Android开发之ViewPager切换动画

分手后的思念是犯贱 2022-08-21 07:48 232阅读 0赞

Android从3.0开始，ViewPager也开始有了切换动画，ViewPager有个**setPageTransformer()**方法，用于设置ViewPager切换时的动画效果。Google提供了两个切换动画的例子：**DepthPageTransformer**和 **ZoomOutPageTransformer**。其实完全可以通过实现 **ViewPager.PageTransformer**接口，然后重写 **transformPage(View view, float position)**方法来做出属于自己的切换动画效果。但是最难的就是该方法中两个参数的理解，其中view就是ViewPager中滑动的View，但是position比较难理解，接下来在测试中来一探究竟。

#### Activity布局 ####

#### 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); } } }

#### 测试效果 ####

![strip][]

PageTransformer.gif

文／YungFan（简书作者）  
原文链接：http://www.jianshu.com/p/33b1734f0736  
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

[strip]: /images/20220724/8895eb5d5e4c49deae468af1b563b686.png