Android中ViewPager支持一屏多个View、切换动画以及无限滚动

1. 首先看一下最终的效果图

2. 需求拆解

第一眼看见上面的效果，是不是有些朋友觉得这个效果很酷，有的高手会觉得这个效果很简单。笔者昨天刚拿到需求的时候，最开始也是觉得这个很简单，可是越分析越发现好像实现出来并不是那么容易。单个的效果可能很简单，但是这么多的效果叠在一起，可能就比较复杂了。我简单得将这个效果任务拆解一下：

一屏要展示3个View，支持左右滑动
屏幕中间两侧的View移向中间时，会有一个放大的效果；中间的View移向两侧时，会有一个缩小的效果
点击屏幕两侧的View，会自动滚动到屏幕的中间，同理效果要满足第2点
当滑动到最左侧或者最右侧时，需要立马衔接最末尾的View和最开头的View，也就是无限滚动
考虑性能问题，必须有一个缓存机制。否则控件的count大于30的时候，会有非常明显的卡顿

起初我想过用HorizontalScrollView来做，但是在性能问题和无限滚动的实现上有一点困难；然后我想过用RecyclerView来做横向的列表，但是在无限滚动和居中放大的实现上有一点困难；然后我考虑直接重写View来做，但是这样的风险和成本实在太高，我不能不负责任地把这种代码投放到实际项目中。最后想来想去，我觉得用ViewPager来实现是最稳妥的，虽然里面仍然有不少坑，不过都被我解决了。

3. 实现一个普通的ViewPager

这里实现一个最最最普通的ViewPager，一页一个Item，支持横向滑动：

activity_main.xml

<?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.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    private ViewPager viewPager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        OnePageThreeItemAdapter adapter = new OnePageThreeItemAdapter(this);
        viewPager.setAdapter(adapter);
    }

}

OnePageThreeItemAdapter.java

public class OnePageThreeItemAdapter extends PagerAdapter {

    private Context context;
    private List<String> sourceData = new ArrayList<String>();

    public OnePageThreeItemAdapter(Context context) {
        this.context = context;
        initData();
    }

    /**
     * 初始化原始数据
     */
    public void initData(){
        sourceData.clear();
        for(int i =  ; i < ; i++){
            sourceData.add(i + "");
        }
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        View view = View.inflate(context, R.layout.item, null);
        view.setTag(String.valueOf(position));
        TextView txt = (TextView) view.findViewById(R.id.txt);
        txt.setText(sourceData.get(position));
        container.addView(view);
        return view;
    }

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

item.xml

<?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="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

</LinearLayout>

4. 实现一屏三个View

这个功能网上已经有很多了，相信大家都已经看见过了，所以我也就简单得说一下

A. 首先ViewPager和包含ViewPager的ViewGroup设置clipChildren属性

<?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:clipChildren="false"
    android:layerType="software"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        />
</LinearLayout>

clipChildren的意思是是否裁剪，当设置为false时，一屏有多个View的时候不裁剪多余的View；layerType的关闭硬件加速，具体原因我也不知道，网友是这样给的，我这样弄了能跑起来就没管了，若有知情者可以告知我哟。

B. 重写PagerAdapter的getPageWidth方法

@Override
public float getPageWidth(int position) {
    return f / ONE_PAGE_ITEM_COUNT; //ONE_PAGE_ITEM_COUNT = 3
}

这个方法返回的是每一个Item所占当前屏幕的比例，我们需要一屏展示三个View，所以这里返回1/3。

5. 实现居中时放大，左右滑动时缩小的动画效果

提起ViewPager的动画效果，大家第一反应肯定是PageTransformer，没错，本文的确是用PageTransformer来实现的，不过因为是一屏展示多个View，所以这里的实现上跟网上的大部分都有很大的差异。首先我们了解一下PageTransformer的transformPage方法的参数

A. 参数讲解

transformPage方法有两个参数，第一个View代表当前的子View，这个没什么好说的。主要是第二个参数position，是一个float类型的。这个position是什么类型呢，我们分两种情况演示一下：

如果一屏只有一个View，也就是最普通最简单的情况

Android中ViewPager支持一屏多个View、切换动画以及无限滚动

一屏有三个View

Android中ViewPager支持一屏多个View、切换动画以及无限滚动

可以看出，如果一屏只有一个View，那么当前View就是0；如果一屏有多个View，那么当前页的第一个View就是0。然后向左依次递减每一个View的宽度；向右依次递增每一个View的宽度。

B. 一屏三个View的实现

通过上面的图，我们可以知道，我们需要处理的区间有(-INFINITE, 0)、(0, 1/3)、(1/3, 2/3)、(2/3, +INFINITE)

public class OnePageThreeItemTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage(View page, float position) {
        //这里的position是指每一个Item相对于Page所占的比例，当前页的第一个Item是0，左边的依次减去Item的宽度，右边的依次加上Item的宽度
        float centerPosition = f / ONE_PAGE_ITEM_COUNT;
        if (position <= ) {
            page.setScaleX();
            page.setScaleY();
        } else if (position <= centerPosition) {
            page.setScaleX( + (itemMaxScale - ) * position / centerPosition);
            page.setScaleY( + (itemMaxScale - ) * position / centerPosition);
        } else if (position <= centerPosition * ) {
            page.setScaleX( + (itemMaxScale - ) * ( * centerPosition - position) / centerPosition);
            page.setScaleY( + (itemMaxScale - ) * ( * centerPosition - position) / centerPosition);
        } else {
            page.setScaleX();
            page.setScaleY();
        }
    }
}

其中itemMaxScale代表最大放大的比例，这里我暂定的2倍，值可以随便修改。

然后设置ViewPager的PageTransformer就可以了

viewPager.setPageTransformer(true, new OnePageThreeItemTransformer());

6. 点击屏幕中的View，实现居中效果

网上很多种实现，原理大约是通过TouchEvent获取内存中的View所在的index，然后再调用setCurrentItem方法平滑过去。在这里，我愤怒的告诉大家：这种做法是完全错误的。顺带黑一句，中国的博客写手很多都不严谨，代码都没有经过分析与验证，就直接发布出来或者转发。大家都知道ViewPager和ListView等都是有缓存原理的，内存中的View所在的index，跟setCurrentItem的参数position，是完全两码事的东西。

后来经过琢磨，我找到了一种实现思路：

在PagerAdapter的instantiateItem方法中，给每一个View设置点击监听器，instantiateItem的position是指每一个View的position，这个position跟数据源的position是保持一致的。在View的点击监听器中调用setCurrentItem方法，注意到setCurrentItem的position参数的意义：如果一屏只有一个View，那么position就是当前页的position；如果一屏有三个View，那么position是指当前页的第一个View的position。我举个例子：

Android中ViewPager支持一屏多个View、切换动画以及无限滚动

如图所示，左边一页的position为3；中间一页的position为6；右边一页的position为9。

也就是说，如果我想要指定position居中，那么我只需要调用setCurrentItem(position - 1)就可以了，这里要考虑position为0的情况。

@Override
public Object instantiateItem(ViewGroup container, final int position) {
    View view = View.inflate(context, R.layout.item, null);
    view.setTag(String.valueOf(position));
    TextView txt = (TextView) view.findViewById(R.id.txt);
    txt.setText(sourceData.get(position));
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //这里的position是指每一页的第一个Item的position
            viewPager.setCurrentItem(position ==  ?  : position - , true);
        }
    });
    container.addView(view);
    return view;
}

这里设置Tag是为了下一节实现无限循环滚动做了必要准备。

7. 实现无限循环滚动

A. 修复添加数据源

网上已经有很多实现ViewPager无限滚动的原理了，但是因为我们这儿是一屏有三个View，因此这里的逻辑需要变动一点。

在数据源的前后各加3个数据源，前面加入原数据源的末三位；后面加入原数据源的前三位。如图：

Android中ViewPager支持一屏多个View、切换动画以及无限滚动

3-7是指我们原来的5个数据源；0-2是添加的头数据源，具体的索引指向5-7；8-10是添加的尾数据源，具体的索引指向3-5。代码如下

/**
 * 初始化原始数据
 */
public void initData(){
    sourceData.clear();
    for(int i =  ; i < ; i++){
        sourceData.add(i + "");
    }
}

/**
 * 为了能无限滚动，将末三项复制加入列表开头，将前三项复制加入到列表末尾
 */
private void repairDataForLoop(){
    repairData.clear();
    List<String> beforeTemp = new ArrayList<String>();
    List<String> afterTemp = new ArrayList<String>();
    for(int i = ; i < ONE_PAGE_ITEM_COUNT; i++){
        beforeTemp.add(, sourceData.get(sourceData.size() -  - i));
        afterTemp.add(sourceData.get(i));
    }
    repairData.addAll(beforeTemp);
    repairData.addAll(sourceData);
    repairData.addAll(afterTemp);
}

我们将原生的数据源放入sourceData，便于数据检索。而将修复后的数据源放入repairData。

B. 无限滚动的要领

然后当界面滚动到position=0时，立马调用setCurrentItem滚动到position=5的位置；当界面滚动到position=8时，立马调用setCurrentItem滚动到position=3的位置。注意这里的position是指当前页的第一个View的position，上面已经讲过了。这里需要有几点需要注意一下：

setCurrentItem的第二个参数要传false，这样才能无动画滚动，才能对用户无感。
在OnPageChangeListener中，需要在onPageScrollStateChanged中处理而不是在onPageSelected。因为onPageScrollStateChanged的SCROLL_STATE_IDLE状态比onPageSelected晚调用。否则会出现界面突然跳动没有平滑动画的问题。
调用setCurrentItem(position, false)时，设置的PageTransformer动画效果会失效。也就是说中间的View不会有放大的效果。所以必须手动设置放大的效果。这里就需要前面instantiateItem中设置Tag的帮助了。

/**
 * 真正处理无限滚动的逻辑，在滑动到边界时，立马跳转到对应的位置
 */
private void handleLoop(){
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        // 是否应该强制跳转到首页
        boolean shouldToBefore = false;
        // 是否应该强制跳转到末页
        boolean shouldToAfter = false;

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

        }

        @Override
        public void onPageSelected(int position) {
            //这里的position是指每一页的第一个Item的position
            if (position == ){
                shouldToAfter = true;
            }else if(position == getCount() - ONE_PAGE_ITEM_COUNT){
                shouldToBefore = true;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            //onPageScrollStateChanged的SCROLL_STATE_IDLE比onPageSelected晚调用，如果在onPageSelected中处理方法，则不会有滑动动画效果
            if(state == ViewPager.SCROLL_STATE_IDLE){
                if(shouldToAfter){
                    //这里的position是指每一页的第一个Item的position
                    viewPager.setCurrentItem(getCount() - ONE_PAGE_ITEM_COUNT * , false);
                    //居中的position比当前position多1
                    handleScale(getCount() - ONE_PAGE_ITEM_COUNT *  + );
                    shouldToAfter = false;
                }
                if(shouldToBefore){
                    //这里的position是指每一页的第一个Item的position
                    viewPager.setCurrentItem(ONE_PAGE_ITEM_COUNT, false);
                    //居中的position比当前position多1
                    handleScale(ONE_PAGE_ITEM_COUNT + );
                    shouldToBefore = false;
                }
            }
        }
    });
}

/**
 * 调用了setCurrentItem(position, false)后，设置的PageTransformer不会生效，
 * 也就是说中间需要放大的项不会放大，所以手动将这一项放大
 */
private void handleScale(int position){
    View view = findCenterView(position);
    if(view == null){
        return;
    }
    view.setScaleX(itemMaxScale);
    view.setScaleY(itemMaxScale);
}

/**
 * 通过在instantiateItem方法给每个View设置的Tag来标记，找出内存中的View
 */
private View findCenterView(int position){
    for(int i = ; i < viewPager.getChildCount(); i++){
        View view = viewPager.getChildAt(i);
        if(String.valueOf(position).equals(view.getTag())){
            return view;
        }
    }
    return null;
}

8. 完整的代码：

item.xml

<?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="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

</LinearLayout>

activity_main.xml

<?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:clipChildren="false"
    android:layerType="software"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        />
</LinearLayout>

OnePageThreeItemAdapter.java

/**
 * Created by chenchen on 2017/8/15.
 *
 * 代码中有几个position需要注意一些
 * 1. setCurrentItem的position参数，是指当前页的第一个Item的所在position
 * 2. OnPageChangeListener的position参数，同样也是指当前页的第一个Item的所在position
 * 3. instantiateItem的position参数，是指每一个Item的所在position
 * 4. PageTransformer的position参数，是指每一个Item相对于Page所占的比例，当前页的第一个Item是0，左边的依次减去Item的宽度，右边的依次加上Item的宽度
 *    比如一页只有一个Item。那么当前页的position为0。左边的position分别为-1。右边的position分别为1；
 *    比如一页有三个Item。那么当前页的Item的position分别为0、1/3、2/3。左边的position分别为-1、-2/3、-1/3。右边的position分别为1、4/3、5/3。
 */
public class OnePageThreeItemAdapter extends PagerAdapter {
    //一屏最多3个item，不能随便改变这个值，改这个数量必须要改动很多逻辑
    private static final int ONE_PAGE_ITEM_COUNT = ;

    private Context context;
    private ViewPager viewPager;
    // 居中的Item的最大放大值
    private float itemMaxScale;
    //在原始的数据前后各加了3项数据
    private List<String> repairData = new ArrayList<String>();
    //原始的数据，用于数据检索等
    private List<String> sourceData = new ArrayList<String>();

    public OnePageThreeItemAdapter(ViewPager viewPager, float itemMaxScale) {
        this.viewPager = viewPager;
        this.context = viewPager.getContext();
        this.itemMaxScale = itemMaxScale;
        initData();
        repairDataForLoop();
        handleLoop();
    }

    /**
     * 调用之前保证initData方法已被调用
     */
    @Override
    public void notifyDataSetChanged() {
        repairDataForLoop();
        super.notifyDataSetChanged();
    }

    /**
     * 初始化原始数据
     */
    public void initData(){
        sourceData.clear();
        for(int i =  ; i < ; i++){
            sourceData.add(i + "");
        }
    }

    /**
     * 为了能无限滚动，将末三项复制加入列表开头，将前三项复制加入到列表末尾
     */
    private void repairDataForLoop(){
        repairData.clear();
        List<String> beforeTemp = new ArrayList<String>();
        List<String> afterTemp = new ArrayList<String>();
        for(int i = ; i < ONE_PAGE_ITEM_COUNT; i++){
            beforeTemp.add(, sourceData.get(sourceData.size() -  - i));
            afterTemp.add(sourceData.get(i));
        }
        repairData.addAll(beforeTemp);
        repairData.addAll(sourceData);
        repairData.addAll(afterTemp);
    }

    /**
     * 真正处理无限滚动的逻辑，在滑动到边界时，立马跳转到对应的位置
     */
    private void handleLoop(){
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            // 是否应该强制跳转到首页
            boolean shouldToBefore = false;
            // 是否应该强制跳转到末页
            boolean shouldToAfter = false;

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

            }

            @Override
            public void onPageSelected(int position) {
                //这里的position是指每一页的第一个Item的position
                if (position == ){
                    shouldToAfter = true;
                }else if(position == getCount() - ONE_PAGE_ITEM_COUNT){
                    shouldToBefore = true;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //onPageScrollStateChanged的SCROLL_STATE_IDLE比onPageSelected晚调用，如果在onPageSelected中处理方法，则不会有滑动动画效果
                if(state == ViewPager.SCROLL_STATE_IDLE){
                    if(shouldToAfter){
                        //这里的position是指每一页的第一个Item的position
                        viewPager.setCurrentItem(getCount() - ONE_PAGE_ITEM_COUNT * , false);
                        handleScale(getCount() - ONE_PAGE_ITEM_COUNT *  + );
                        shouldToAfter = false;
                    }
                    if(shouldToBefore){
                        //这里的position是指每一页的第一个Item的position
                        viewPager.setCurrentItem(ONE_PAGE_ITEM_COUNT, false);
                        handleScale(ONE_PAGE_ITEM_COUNT + );
                        shouldToBefore = false;
                    }
                }
            }
        });
    }

    /**
     * 调用了setCurrentItem(position, false)后，设置的PageTransformer不会生效，
     * 也就是说中间需要放大的项不会放大，所以手动将这一项放大
     */
    private void handleScale(int position){
        View view = findCenterView(position);
        if(view == null){
            return;
        }
        view.setScaleX(itemMaxScale);
        view.setScaleY(itemMaxScale);
    }

    /**
     * 通过在instantiateItem方法给每个View设置的Tag来标记，找出内存中的View
     */
    private View findCenterView(int position){
        for(int i = ; i < viewPager.getChildCount(); i++){
            View view = viewPager.getChildAt(i);
            if(String.valueOf(position).equals(view.getTag())){
                return view;
            }
        }
        return null;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        View view = View.inflate(context, R.layout.item, null);
        view.setTag(String.valueOf(position));
        TextView txt = (TextView) view.findViewById(R.id.txt);
        txt.setText(repairData.get(position));
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //这里的position是指每一页的第一个Item的position
                viewPager.setCurrentItem(position ==  ?  : position - , true);
                Toast.makeText(context, "点击了" + repairData.get(position), Toast.LENGTH_SHORT).show();
            }
        });
        container.addView(view);
        return view;
    }

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

    @Override
    public float getPageWidth(int position) {
        return f / ONE_PAGE_ITEM_COUNT;
    }

    public class OnePageThreeItemTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View page, float position) {
            //这里的position是指每一个Item相对于Page所占的比例，当前页的第一个Item是0，左边的依次减去Item的宽度，右边的依次加上Item的宽度
            float centerPosition = f / ONE_PAGE_ITEM_COUNT;
            if (position <= ) {
                page.setScaleX();
                page.setScaleY();
            } else if (position <= centerPosition) {
                page.setScaleX( + (itemMaxScale - ) * position / centerPosition);
                page.setScaleY( + (itemMaxScale - ) * position / centerPosition);
            } else if (position <= centerPosition * ) {
                page.setScaleX( + (itemMaxScale - ) * ( * centerPosition - position) / centerPosition);
                page.setScaleY( + (itemMaxScale - ) * ( * centerPosition - position) / centerPosition);
            } else {
                page.setScaleX();
                page.setScaleY();
            }
        }
    }

    /**
     * 配置ViewPager一些其他的属性
     */
    public void configViewPager(){
        viewPager.setOffscreenPageLimit(ONE_PAGE_ITEM_COUNT + );
        viewPager.setPageTransformer(true, new OnePageThreeItemTransformer());
        viewPager.setCurrentItem(ONE_PAGE_ITEM_COUNT);
    }
}

MainActivity.java

public class MainActivity extends Activity {

    private ViewPager viewPager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        OnePageThreeItemAdapter adapter = new OnePageThreeItemAdapter(viewPager, );
        viewPager.setAdapter(adapter);
        adapter.configViewPager();
    }

}

Android中ViewPager支持一屏多个View、切换动画以及无限滚动

1. 首先看一下最终的效果图

2. 需求拆解

3. 实现一个普通的ViewPager

4. 实现一屏三个View

A. 首先ViewPager和包含ViewPager的ViewGroup设置clipChildren属性

B. 重写PagerAdapter的getPageWidth方法

5. 实现居中时放大，左右滑动时缩小的动画效果

A. 参数讲解

B. 一屏三个View的实现

6. 点击屏幕中的View，实现居中效果

7. 实现无限循环滚动

A. 修复添加数据源

B. 无限滚动的要领

8. 完整的代码：

继续阅读

专访邓凡平：深入理解Android

与专家面对面：Android开发入门问与答

Android MVP架构MVCMVP

mvp初探

Android常用工具类简介目录

android常用工具类转载自：http://www.trinea.cn/android/android-common-utils/Android常用工具类

Android常用工具类ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解决 Failure [INSTALL_FAILED_OLDER_SDK] 问题

Android – ListView 中添加按钮，动态删除添加ItemView的操作

Kotlin的ListView与RecyclerView的简单应用

关于公司的那些坑：Android Studio篇

android SQLite事务和kotlin协程

无法正常编译错误Compilation failed to complete

关于Gradle配置的小结

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Android APK文件反编译Android APK文件反编译