Android 之 View 提升： 五 使用ViewPager实现多种轮播

Android 之 View 提升： 五 使用ViewPager实现多种轮播

1. 实现效果：

1 水平透明滑动进出，有缩放

2. 旋转进入进出

3. 交叉显示

4 . 立体轮播

5. 水平滑动，并透明消失

2. 知识点

• 实现ViewPager的setOnPageChangeListener
• 自定义 PagerAdapter
• 实现 底部圆点和图片对应高亮
• ViewPager切换动画PageTransformer使用

2.1 ViewPager的setOnPageChangeListener 3个方法执行顺序

参考博客

三个方法的执行顺序为：
用手指拖动翻页时，最先执行一遍onPageScrollStateChanged（1），然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged（2），然后立即执行一次onPageSelected，然后再不断执行onPageScrolled，最后执行一次onPageScrollStateChanged（0）。

2.2 自定义 PagerAdapter

必须需要重载4个方法：

    @Override //设置view
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
   
        container.addView(list_imgs.get(position));
        return list_imgs.get(position);
    }

    @Override
    public int getCount() {
   
        return list_imgs.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
   
        return view == object;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
   
        container.removeView(list_imgs.get(position));
    }

2.3 底部圆点和图片对应高亮

实现接口implements ViewPager.OnPageChangeListener
也就是3个方法：（2.1中所说的执行顺序，在这里更改圆点高亮）

@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   

    }

    @Override
    public void onPageSelected(int position) {
   
        for( int i=0; i<list_imgs.size(); i++){
   
            ImageView currentPoint = (ImageView) points.getChildAt(i);
            if(position == i){
   
                currentPoint.setImageResource(R.drawable.ic_round_lens_24_red);
            }else{
   
                currentPoint.setImageResource(R.drawable.ic_round_lens_24_white);
            }

        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {
   

    }

2.4 图片切换动画显示

使用 PageTransformer

可以自定义切换动画。参考博客

public class RotateDownPageTransformer implements ViewPager.PageTransformer
{
   
    private static final float ROT_MAX = 20.0f;
    private float mRot;
    public void transformPage(View view, float position)
    {
   
        Log.e("TAG", view + " , " + position + "");
        if (position < -1)
        {
    // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setRotation(view, 0);
        } else if (