ViewPager使用指南（进阶）

超、凢脫俗 2022-01-28 01:31 280阅读 0赞

之前写了一篇ViewPager最简单的demo（有需要的小伙伴可以去参考我上一篇的博客），可以实现试图的左右滑动，但怎么确定我滑动到哪个界面呢，接下来我们就来实现这个效果。  
一般来说，许多app打开之后都会有一个ViewPager的效果，就是让你一直右滑，直至滑到最后一张为止，在滑动的时候屏幕下方有一排小点，会根据你滑动的时候进行改变，以确定你目前处于哪个View，这个Demo我们用动态获取这个点的数量来实现ViewPager  
其他代码都跟之前的代码一样，只是在布局中加了一个LinearLayout

接着就是主代码

package com.example.viewpagerdemo;
    
    import android.support.annotation.NonNull;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class ImageViewPagerAdapter extends AppCompatActivity {
    
        private ViewPager viewPager;
        //编辑3个View
        private int[] mLayoutIDs = {
                R.layout.first,
                R.layout.second,
                R.layout.third,
        };
        private List<View> views;
        private List<ImageView> mDotView = new ArrayList<> ();
        private ViewGroup mDotGroup;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate (savedInstanceState);
            setContentView (R.layout.activity_image_view_adapter);
            //初始化
            viewPager = findViewById (R.id.View_Pager);
            mDotGroup = findViewById (R.id.dot);
            //new一个集合
            views = new ArrayList<> ();
            //遍历整个集合
            for (int index = 0; index < mLayoutIDs.length; index++) {
                //new一个ImageView
                ImageView imageView = new ImageView (this);
                //设置ImageView得样式
                imageView.setImageResource (R.mipmap.ic_launcher);
                //把ImageView添加到views容器里
                views.add (imageView);
                //new一个 点 的imageView
                ImageView dot = new ImageView (this);
                //设置点的默认样式
                dot.setImageResource (R.mipmap.ic_launcher);
                //设置样式的最大宽高
                dot.setMaxWidth (100);
                dot.setMaxHeight (100);
                //点的大小
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams (50,50);
                //设置点与左边点的间隔距离
                layoutParams.leftMargin = 20;
                dot.setLayoutParams (layoutParams);
                //设置点的不可点击
                dot.setEnabled (false);
                //把点的数量加进来
                mDotGroup.addView (dot);
                mDotView.add (dot);
    
            }
            //设置适配器
            viewPager.setAdapter (pagerAdapter);
            //设置第一次的时候在第一个View
            viewPager.setCurrentItem (0);
            setDotView (0);
            viewPager.addOnPageChangeListener (new ViewPager.OnPageChangeListener () {
                @Override
                public void onPageScrolled(int i, float v, int i1) {
                //当滑动的时候触发此事件
                }
    
                @Override
                public void onPageSelected(int i) {
                    setDotView (i);
                }
    
                @Override
                public void onPageScrollStateChanged(int i) {
    
                }
            });
        }
    
        private void setDotView(int i) {
            for (int index = 0; index < mDotView.size (); index++) {
                mDotView.get (index).setImageResource (i == index ? R.mipmap.insert1:R.mipmap.ic_launcher);
            }
        }
    
        PagerAdapter pagerAdapter = new PagerAdapter () {
            @Override
            //数组的长度
            public int getCount() {
                return mLayoutIDs.length;
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                View child = views.get(position);
                container.addView (child);
                return child;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView (views.get (position));
            }
        };
    }

这里点的图片我就随便找的，不要介意哈，只是为了可以实现ViewPager的效果  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODg5NDc2_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODg5NDc2_size_16_color_FFFFFF_t_70]: /images/20220128/5cdf7bafee8345c196fce6e98d8351cc.png