ViewPager实现左右边距效果

最近不知道写什么，就写一个在项目中用到的效果，看图。

其实和banner差不多，效果就是支付宝财富-财富直通车类似。实现起来并不是很难。

首先看下布局

<?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="170dp"
    android:clipChildren="false"//关键
    android:orientation="vertical">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"//关键
        android:layout_marginLeft="30dp"//关键
        android:clipChildren="false"//关键 />

</LinearLayout>

android:clipChildren="false"允许子View越过父View绘制，同时给ViewPager和他的父View设置margin。

再来看看代码

kotlin版

class Banner1Activity : BaseActivity() {

    private val images = arrayOf(R.drawable.img_banner_one, R.drawable.img_banner_two,
            R.drawable.img_banner_three, R.drawable.img_banner_four, R.drawable.img_banner_five)
    private var imageLists = ArrayList<Int>()
    private var currentPosition: Int = 0


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager)
        initView()
    }

    private fun initView() {
        //array转list
        imageLists = images.toList() as ArrayList<Int>
        imageLists.add(0, imageLists[imageLists.size - 1])
        imageLists.add(imageLists[1])
        //设置ViewPager缓存数量，这里最好指定数量跟数据源一样，不然会出现空白
        view_pager.offscreenPageLimit = 5
        //每个pager之间的间距，就是两张图片之间空白间隙
        view_pager.pageMargin = 20
        //适配器
        view_pager!!.adapter = object : PagerAdapter() {
            override fun getCount(): Int {
                return imageLists.size
            }

            override fun destroyItem(container: ViewGroup, position: Int, any: Any) {
                container.removeView(any as View?)
            }

            override fun instantiateItem(container: ViewGroup, position: Int): Any {
                val imageView = ImageView(this@Banner1Activity)
                imageView.setImageResource(imageLists[position])
                imageView.scaleType = ImageView.ScaleType.FIT_XY
                container.addView(imageView)
                return imageView
            }

            override fun isViewFromObject(view: View, any: Any): Boolean {
                return view == any
            }
        }
        view_pager.setCurrentItem(1, false)
        view_pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    if (currentPosition == 0) {
                        view_pager.setCurrentItem(imageLists.size - 2, false)
                    } else if (currentPosition == imageLists.size - 1) {
                        view_pager.setCurrentItem(1, false)
                    }
                }
            }

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
            }

            override fun onPageSelected(position: Int) {
                currentPosition = position
            }

        })
    }
}

鼓励大家在平时用kotlin写代码，一开始我也拒绝学习kotlin，接触一点之后哎呀那叫一个真香。

JAVA版

public class ViewPagerActivity extends BaseActivity {

    private ViewPager mViewPager;
    private Integer[] images = {R.drawable.img_banner_one, R.drawable.img_banner_two, R.drawable.img_banner_three, R.drawable.img_banner_four, R.drawable.img_banner_five};
    private List<Integer> imageLists = new ArrayList<>();
    private int currentPosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        initView();
    }

    private void initView() {
        mViewPager = findViewById(R.id.view_pager);

        imageLists.addAll(Arrays.asList(images));


        imageLists.add(0, imageLists.get(imageLists.size() - 1));
        imageLists.add(imageLists.get(1));

        //设置缓存的页面数量
        mViewPager.setOffscreenPageLimit(5);
        mViewPager.setPageMargin(20);
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imageLists.size();
            }

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

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView = new ImageView(ViewPagerActivity.this);
                imageView.setImageResource(imageLists.get(position));
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                container.addView(imageView);
                return imageView;
            }

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

        mViewPager.setCurrentItem(1, false);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                currentPosition = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    if (currentPosition == 0) {
                        mViewPager.setCurrentItem(imageLists.size() - 2, false);
                    } else if (currentPosition == imageLists.size() - 1) {
                        mViewPager.setCurrentItem(1, false);
                    }
                }
            }
        });
    }
}

代码注释写的挺清楚的,代码没什么可以说的，就是viewPager的基本使用，唯一要说的就是mViewPager.setPageMargin(20);指定空白间隙如图

还有就是轮播的逻辑，我在这里大概说一下，
上面我有5张图，刚开始我在加了两句代码

     imageLists.add(0, imageLists.get(imageLists.size() - 1));
        imageLists.add(imageLists.get(1));

在list头加了最后一条数据，在末尾加了第一条数据，而在监听ViewPager滑动时判断了一下

      @Override
            public void onPageScrollStateChanged(int state) {
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    if (currentPosition == 0) {
                        mViewPager.setCurrentItem(imageLists.size() - 2, false);
                    } else if (currentPosition == imageLists.size() - 1) {
                        mViewPager.setCurrentItem(1, false);
                    }
                }

滑动到第一个（其实是我手动加的最后一条数据）直接调用setCurrentItem(imageLists.size() - 2, false)到倒数第二条数据
同理当滑动到最后一条（手动加的第一条时）调mViewPager.setCurrentItem(1, false);滑动到第二条，
原来的数据 01234 在首位加两条4012340，这样看起来就是实现了无限循环。