用開源項目JazzyViewPager實現ViewPager切換動畫

時間 2019-11-19

標籤開源項目 jazzyviewpager 實現 viewpager 切換動畫欄目 Android 简体版

原文原文鏈接

　　JazzyViewPager這個項目可讓viewpager有各類絢麗的動畫，並且還能夠自由擴展。但從官網下載的lib導入時會出現找不到視圖的問題，不知道是否是我人品不行，因此我就本身寫了lib。總之，本篇就是來說這些能夠有華麗動畫的viewpager。java

JazzyViewPager項目地址：https://github.com/jfeinstein10/JazzyViewPagerandroid

1、佈局文件git

像viewpager同樣，直接寫一個控件便可。github

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#00ff00">

    <com.jfeinstein.jazzyviewpager.JazzyViewPager
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/jazzyViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.jfeinstein.jazzyviewpager.JazzyViewPager>

</LinearLayout>

它裏面還有不少屬性能夠定義的，像上面的能夠用app這個命名空間來定義屬性。下面是各類屬性，基本就是各類動畫，和淡入淡出效果app

fadeEnable:是否有淡入淡出效果ide

outLineEnable:viewpager一個視圖周邊是否有邊框佈局

outLineColor:邊框顏色動畫

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="JazzyViewPager">
        <attr name="style">
            <enum name="standard" value="0" />
            <enum name="tablet" value="1" />
            <enum name="cubein" value="2" />
            <enum name="cubeout" value="3" />
            <enum name="flipvertical" value="4" />
            <enum name="fliphorizontal" value="5" />
            <enum name="stack" value="6" />
            <enum name="zoomin" value="7" />
            <enum name="zoomout" value="8" />
            <enum name="rotateup" value="9" />
            <enum name="rotatedown" value="10" />
            <enum name="accordion" value="11" />
        </attr>
        <attr name="fadeEnabled" format="boolean" />
        <attr name="outlineEnabled" format="boolean" />
        <attr name="outlineColor" format="color|reference" />
    </declare-styleable>

</resources>

2、java代碼實現ui

2.1首先看看它有什麼動畫效果，至於各類動畫是什麼樣的，本身去試試吧~spa

* Standard
* Tablet
* CubeIn
* CubeOut
* FlipVertical
* FlipHorizontal
* Stack
* ZoomIn
* ZoomOut
* RotateUp
* RotateDown
* Accordion

2.2設置動畫的方法

viewPager.setTransitionEffect(TransitionEffect.Tablet);

TransitionEffect effect = TransitionEffect.valueOf("Tablet");
setupJazziness(effect);

2.3簡單設置

viewPager.setPageMargin(100);//兩個頁面之間的間距
viewPager.setFadeEnabled(true);//有淡入淡出效果
viewPager.setOutlineEnabled(true);//有邊框
viewPager.setOutlineColor(0xff0000ff);//邊框顏色

2.4適配器的寫法

這裏已經寫的很簡單了，之後照貓畫虎就行。主要就是裏面須要用這個viewpager作一些事情。

官方文檔中說：Due to the limitations of the ViewPager class (which JazzyViewPager is built upon) in order to get the animations to work correctly for more than 3 Views, you'll have to add the following to theinstantiateItem method of your PagerAdapter.

private JazzyViewPager mJazzy;
/* ... */
@Override
public Object instantiateItem(ViewGroup container, final int position) {
    Object obj = super.instantiateItem(container, position);
    mJazzy.setObjectForPosition(obj, position);
    return obj;
}

大概意思就是若是viewpager中的view超過3個了，就須要添加上面這個方法。這裏面的obj就是一個view對象，具體參照下面的例子。

例子：

    /**
     * @author:Jack Tony
     * @tips  :下面的方法須要注意，儘可能按照這種寫法。
     * @date  :2014-10-22
     */
    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            // TODO 自動生成的方法存根
            return 10;
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            if (view instanceof OutlineContainer) {
                return ((OutlineContainer) view).getChildAt(0) == obj;
            } else {
                return view == obj;
            }
        }
        
        /* 若是viewpager中的view超過3個就須要重寫這個方法*/  
        @Override  
        public Object instantiateItem(ViewGroup container, final int position) {  
            TextView tv = new TextView(getApplicationContext());
            tv.setText("Page " + (position + 1));
            tv.setTextColor(Color.parseColor("#000000"));
            tv.setTextSize(30);
            tv.setGravity(Gravity.CENTER);
            tv.setBackground(getWallpaper());
            container.addView(tv, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            
            //這句話必需要寫，按不一樣的位置添加視圖
            viewPager.setObjectForPosition(tv, position);
            return tv;  
        }
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object obj) {
            container.removeView(viewPager.findViewFromObject(position));
        }


    }

ok，這樣就基本搞定了。貼上所有代碼：

MainActivity.java

package com.kale.jazzviewpagertest;

import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.jfeinstein.jazzyviewpager.JazzyViewPager;
import com.jfeinstein.jazzyviewpager.JazzyViewPager.TransitionEffect;
import com.jfeinstein.jazzyviewpager.OutlineContainer;

public class MainActivity extends Activity {

    private JazzyViewPager viewPager;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = (JazzyViewPager)findViewById(R.id.jazzyViewPager);
        /**
         * 添加動畫效果，能夠設置不少動畫效果。如：
         * Standard
         * Tablet
         * CubeIn
         * CubeOut
         * FlipVertical
         * FlipHorizontal
         * Stack
         * ZoomIn
         * ZoomOut
         * RotateUp
         * RotateDown
         * Accordion
         * 
         * 下面是能夠經過字符串來產生動畫對象的例子：
         * TransitionEffect effect = TransitionEffect.valueOf("Tablet");
         * setupJazziness(effect);
         */
        viewPager.setTransitionEffect(TransitionEffect.Tablet);
        viewPager.setPageMargin(100);//兩個頁面之間的間距
        viewPager.setFadeEnabled(true);//有淡入淡出效果
        viewPager.setOutlineEnabled(true);//有邊框
        viewPager.setOutlineColor(0xff0000ff);//邊框顏色
        /**
         * 設置適配器
         * 但當ViewPager中的子View超過三個的時候，咱們須要對PagerAdapter修改，
         * 重寫InstantiateItem()方法
         */
        viewPager.setAdapter(new MyAdapter());
        
        viewPager.setOnPageChangeListener(null);//能夠監聽page的改變
    }
    
    /**
     * @author:Jack Tony
     * @tips  :下面的方法須要注意，儘可能按照這種寫法。
     * @date  :2014-10-22
     */
    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            // TODO 自動生成的方法存根
            return 10;
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            if (view instanceof OutlineContainer) {
                return ((OutlineContainer) view).getChildAt(0) == obj;
            } else {
                return view == obj;
            }
        }
        
        /* 若是viewpager中的view超過3個就須要重寫這個方法*/  
        @Override  
        public Object instantiateItem(ViewGroup container, final int position) {  
            TextView tv = new TextView(getApplicationContext());
            tv.setText("Page " + (position + 1));
            tv.setTextColor(Color.parseColor("#000000"));
            tv.setTextSize(30);
            tv.setGravity(Gravity.CENTER);
            tv.setBackground(getWallpaper());
            container.addView(tv, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            
            //這句話必需要寫，按不一樣的位置添加視圖
            viewPager.setObjectForPosition(tv, position);
            return tv;  
        }
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object obj) {
            container.removeView(viewPager.findViewFromObject(position));
        }


    }
}

最終效果：

擴展：

咱們固然能夠繼續擴展動畫，下面就擴展一個動畫。

1、先定義一個動畫名字，這裏叫test

public enum TransitionEffect {
        Standard,
        Tablet,
        CubeIn,
        CubeOut,
        FlipVertical,
        FlipHorizontal,
        Stack,
        ZoomIn,
        ZoomOut,
        RotateUp,
        RotateDown,
        Accordion,
        Test;}

2、寫實現方式

protected void animateTest(View left, View right, float positionOffset) {    
 if (mState != State.IDLE) {
  if (left != null) {
   //此處增長具體動畫
 }
  if (right != null) {
   //此處增長具體動畫實現 
 }
 }
}

這裏舉一個源碼中table的例子

    protected void animateTablet(View left, View right, float positionOffset) {        
        if (mState != State.IDLE) {
            if (left != null) {
                manageLayer(left, true);
                mRot = 30.0f * positionOffset;
                mTrans = getOffsetXForRotation(mRot, left.getMeasuredWidth(),
                        left.getMeasuredHeight());
                ViewHelper.setPivotX(left, left.getMeasuredWidth()/2);
                ViewHelper.setPivotY(left, left.getMeasuredHeight()/2);
                ViewHelper.setTranslationX(left, mTrans);
                ViewHelper.setRotationY(left, mRot);
                logState(left, "Left");
            }
            if (right != null) {
                manageLayer(right, true);
                mRot = -30.0f * (1-positionOffset);
                mTrans = getOffsetXForRotation(mRot, right.getMeasuredWidth(), 
                        right.getMeasuredHeight());
                ViewHelper.setPivotX(right, right.getMeasuredWidth()*0.5f);
                ViewHelper.setPivotY(right, right.getMeasuredHeight()*0.5f);
                ViewHelper.setTranslationX(right, mTrans);
                ViewHelper.setRotationY(right, mRot);
                logState(right, "Right");
            }
        }
    }

3、添加實現代碼到設置項中

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  if (mState == State.IDLE && positionOffset > 0) {
  oldPage = getCurrentItem();
  mState = position == oldPage ? State.GOING_RIGHT : State.GOING_LEFT;
}
boolean goingRight = position == oldPage;    
if (mState == State.GOING_RIGHT && !goingRight)
  mState = State.GOING_LEFT;
  else if (mState == State.GOING_LEFT && goingRight)
  mState = State.GOING_RIGHT;

  float effectOffset = isSmall(positionOffset) ? 0 : positionOffset;

  // mLeft = getChildAt(position);
  // mRight = getChildAt(position+1);
  mLeft = findViewFromObject(position);
  mRight = findViewFromObject(position+1);

  if (mFadeEnabled)
  animateFade(mLeft, mRight, effectOffset);
  if (mOutlineEnabled)
  animateOutline(mLeft, mRight);

  switch (mEffect) {
  case Standard:
  break;
  case Tablet:
  animateTablet(mLeft, mRight, effectOffset);
  break;
  case CubeIn:
  animateCube(mLeft, mRight, effectOffset, true);
  break;
  case CubeOut:
  animateCube(mLeft, mRight, effectOffset, false);
  break;
  case FlipVertical:
  animateFlipVertical(mLeft, mRight, positionOffset, positionOffsetPixels);
  break;
  case FlipHorizontal:
  animateFlipHorizontal(mLeft, mRight, effectOffset, positionOffsetPixels);
  case Stack:
  animateStack(mLeft, mRight, effectOffset, positionOffsetPixels);
  break;
  case ZoomIn:
  animateZoom(mLeft, mRight, effectOffset, true);
  break;
  case ZoomOut:
  animateZoom(mLeft, mRight, effectOffset, false);
  break;
  case RotateUp:
  animateRotate(mLeft, mRight, effectOffset, true);
  break;
  case RotateDown:
  animateRotate(mLeft, mRight, effectOffset, false);
  break;
  case Accordion:
  animateAccordion(mLeft, mRight, effectOffset);
  break;
  case Test: 
　　animateTest(mLeft, mRight, effectOffset); break;
}

super.onPageScrolled(position, positionOffset, positionOffsetPixels);

if (effectOffset == 0) {
disableHardwareLayer();
mState = State.IDLE;
}

}