Android從3.0開始，ViewPager也開始有了切換動畫，ViewPager有個setPageTransformer() 方法，用於設定ViewPager切換時的動畫效果。Google提供了兩個切換動畫的例子：DepthPageTransformer和 ZoomOutPageTransformer。其實完全可以通過實現 ViewPager.PageTransformer介面，然後重寫 transformPage(View view, float position) 方法來做出屬於自己的切換動畫效果。但是最難的就是該方法中兩個引數的理解，其中view就是ViewPager中滑動的View，但是position比較難理解，接下來在測試中來一探究竟。
Activity佈局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</RelativeLayout>
複製程式碼Activity.java
public class MainActivity extends Activity {
private ViewPager mViewPager;
private int[] images = {R.drawable.one, R.drawable.two, R.drawable.three};
private ArrayList<ImageView> imageViews = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
/**
* 初始化資料
*/
private void init() {
// 定義一個佈局並設定引數
LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
// 初始化引導圖片列表
for (int i = 0; i < images.length; i++) {
ImageView iv = new ImageView(this);
iv.setLayoutParams(mParams);
// 防止圖片不能填滿螢幕
iv.setScaleType(ImageView.ScaleType.FIT_XY);
// 載入圖片資源
iv.setImageResource(images[i]);
imageViews.add(iv);
}
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new MyViewPagerAdapter());
// 設定切換動畫
mViewPager.setPageTransformer(true, new MyPageTransformer());
}
class MyViewPagerAdapter extends PagerAdapter {
// viewpager中的要顯示的View的總數量
@Override
public int getCount() {
return imageViews.size();
}
// 滑動切換的時候銷燬當前的View
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(imageViews.get(position));
}
// 每次滑動的時候生成的View
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViews.get(position));
return imageViews.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
}
}
複製程式碼MyPageTransformer，自定義切換動畫
public class MyPageTransformer implements ViewPager.PageTransformer {
/**
*
* @param view 滑動中的那個view
* @param position
*/
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
Log.e("TAG [-Infinity,-1) ", view + " , " + position + "");
} else if (position <= 1) // a頁滑動至b頁 ； a頁從 0.0 ~ -1 ；b頁從1 ~ 0.0
{
Log.e("TAG [-1, 1]", view + " , " + position + "");
} else { // (1,+Infinity]
Log.e("TAG (1,+Infinity] ", view + " , " + position + "");
}
}
}
複製程式碼列印分析
三個介面分別為A、B和C，滑動順序為A->B->C，然後返回，通過列印測試，position的變化如下:
A —> B A介面的position變化區間[0, -1] B介面的position變化區間[1, 0 ] C介面無變化
B —> C A介面的position變化區間[-1, -2] B介面的position變化區間[0, -1] C介面的position變化區間[1, 0 ]
C —> B A介面的position 無變化 B介面的position變化區間[-1, 0] C介面的position變化區間[0, 1 ]
B —> A A介面的position 變化區間[-1,0] B介面的position 變化區間[0, 1] C介面的position變化就是[1, 2 ]
實現一個自己的切換動畫（參考網上程式碼）
public class MyPageTransformer implements ViewPager.PageTransformer {
private static final float ROT_MAX = 20.0f;
private float mRot;
/**
* @param view 滑動中的那個view
* @param position
*/
public void transformPage(View view, float position) {
//介面不可見
if (position < -1) {
ViewCompat.setRotation(view, 0);
}
//介面可見
else if (position <= 1) {
mRot = (ROT_MAX * position);
ViewCompat.setPivotX(view, view.getMeasuredWidth() * 0.5f);
ViewCompat.setPivotY(view, view.getMeasuredHeight());
ViewCompat.setRotation(view, mRot);
}
//介面不可見
else {
ViewCompat.setRotation(view, 0);
}
}
}
複製程式碼測試效果
