详解ViewPager无限循环及缩放动画PageTransformer的实现

港控/mmm° 2022-06-08 14:11 217阅读 0赞

网上也有很多关于无限循环的实现方案，但是基本上都效果不是很好，没有根本上利用和掌握ViewPager和Adapter的展现原理，也基本没有复用View。

我这里给大家讲解下最新的无限循环的实现方案以及下图这种缩放和透明度渐变的动画PageTransformer的方案。

![20170927213720148][]

1、首先说无限循环，这个就要从PagerAdapter的下手。

@Override
        public int getCount() {
            return mData.size() * 100;
        }

里面有个getCount方法，这里默认设置个集合的大小，但是我们需要无限循环，所以这里我们可以设置足够大，但是一定要用集合的大小进行倍数相乘，方便后面的处理。

还有个关键位置：

int select = position < mData.size() ? position : (position % mData.size());

这里要判断处理下，如果position大于集合的大小的话，我们这个position要处理下，就是除以集合的大小取余即可。

2、接下来给大家一个详细的PagerAdapter的配置：

package com.tandong.viewpagerdemo;
    
    import android.content.Context;
    import android.support.v4.view.PagerAdapter;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.FrameLayout;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.tandong.viewpagerdemo.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class CardPagerAdapter extends PagerAdapter {
    
        private List<FrameLayout> mViews;
        private List<String> mData;
        private Context context;
    
        public CardPagerAdapter(Context context, List<String> list) {
            this.context = context;
            mViews = new ArrayList<FrameLayout>();
            this.mData = list;
            for (int i = 0; i < list.size(); i++) {
                mViews.add(null);
            }
        }
    
        @Override
        public int getCount() {
            return mData.size() * 100;
        }
    
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(container.getContext())
                    .inflate(R.layout.item_card, container, false);
            container.addView(view);
            FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.ll_container);
            ImageView iv_img = (ImageView) view.findViewById(R.id.iv_img);
            TextView tv_select = (TextView) view.findViewById(R.id.tv_select);
            int select = position < mData.size() ? position : (position % mData.size());
            Log.i("info", "位置：" + select + "  " + position + "  " + (position / mData.size()) + "  " + (position % mData.size()));
            tv_select.setText("" + select);
            mViews.set(select, frameLayout);
            return view;
        }
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
            int select = position < mData.size() ? position : (position % mData.size());
            mViews.set(select, null);
        }
    
    }3、接下来说渐变的PageTransformer：

package com.tandong.viewpagerdemo;
    
    import android.support.v4.view.ViewPager;
    import android.util.Log;
    import android.view.View;
    
    public class TransFormer implements ViewPager.PageTransformer {
        public static float MIN_ALPHA = 0.5f;
        public static float MIN_SCALE = 0.8f;
    
        @Override
        public void transformPage(View page, float position) {
            if (position < -1 || position > 1) {
                page.setAlpha(MIN_ALPHA);
                page.setScaleX(MIN_SCALE);
                page.setScaleY(MIN_SCALE);
                Log.i("info", "缩放：position < -1 || position > 1");
            } else if (position <= 1) { // [-1,1]
                float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
                if (position < 0) {
                    float scaleX = 1 + 0.2f * position;
                    Log.i("info", "缩放：position < 0");
                    page.setScaleX(scaleX);
                    page.setScaleY(scaleX);
                } else {
                    float scaleX = 1 - 0.2f * position;
                    page.setScaleX(scaleX);
                    page.setScaleY(scaleX);
                    Log.i("info", "缩放：position <= 1 >=0");
                }
                page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
            }
        }
    }
    4、最后给一个完整的调用：

package com.tandong.viewpagerdemo;
    
    import android.os.Bundle;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    
    import com.tandong.viewpagerdemo.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity {
        private ViewPager vp;
        private CardPagerAdapter cardPagerAdapter;
        private List<String> lists;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
        }
    
        private void initView() {
            vp = (ViewPager) this.findViewById(R.id.vp);
            lists = new ArrayList<String>();
            for (int i = 0; i < 5; i++) {
                lists.add("");
            }
            cardPagerAdapter = new CardPagerAdapter(this, lists);
    //        vp.setPageMargin(10);
            vp.setOffscreenPageLimit(3);
            vp.setPageTransformer(false, new TransFormer());
            vp.setAdapter(cardPagerAdapter);
            vp.setCurrentItem(cardPagerAdapter.getCount() / 2);
        }
    }
    这里要实现这个一个界面有3个View的ViewPager效果，需要注意在ViewPager所在的布局里设置： android:clipChildren="false"把ViewPager和父布局分别设置这个属性，然后把ViewPager分别设置：

android:layout_marginLeft="80dp"
    android:layout_marginRight="80dp" 这样才可以实现一个界面3个View的ViewPager效果。

[20170927213720148]: /images/20220608/202c26574ef848f78765601c5b3615e4.png