实现数据源为List<ImageView>的简单的ViewPage效果

最新推荐文章于 2021-08-28 12:34:18 发布

刘浪菜中菜

最新推荐文章于 2021-08-28 12:34:18 发布

阅读量957

点赞数

分类专栏： viewpager动画文章标签： android

本文链接：https://blog.csdn.net/qq_36713642/article/details/71518142

版权

viewpager动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现如下的ViewPager效果
这里写图片描述

一：明确ViewPager是高级控件，所以高级控件怎么来，viewPagar就怎么来
①声明viewpager
②findViewById
③添加数据源
④设置适配器
⑤展示

二：设计底部小圆，用shape设计
①未点击的时候，小圆点为灰色，代码如下

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#787878"/>
    <size android:width="30dp" android:height="30sp"/>
</shape>

②点击的时候，小圆点为粉色，代码如下

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <size android:height="30dp" android:width="30dp"/>
</shape>

三：activity_main.xml设计布局，代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.nightday0509.MainActivity">

    //让ViewPager充满整个父布局，注意别导错了是v4包下的
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_show"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    //给小圆点布局
    <LinearLayout
        //让小圆点居中
        android:gravity="center"
        android:id="@+id/ll_dotList"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp"></LinearLayout>
</RelativeLayout>

四：在MainActivity.class中实现代码

public class Text06 extends AppCompatActivity {
    private ViewPager vp_show06;
    private LinearLayout ll_dotList;
    //声明一个List<ImageView> ，是viewPager的数据源集合
    private List<ImageView> imgList = new ArrayList<>();
    //声明一个int类型的数组，给viewpager添加数据源
    private int [] imgRes = {R.mipmap.item01,R.mipmap.item02,R.mipmap.item03,R.mipmap.item04,R.mipmap.item05,R.mipmap.item06,R.mipmap.item07,R.mipmap.item08};
    //声明小圆点的图片ImageView[]数组
    private ImageView [] dotList;
    //设置处于轮播的状态
    private boolean isLoof = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text06);
        vp_show06 = (ViewPager) findViewById(R.id.vp_show06);
        //给viewpager增加数据源
        addVpData();
        MyAdapter06 adapter = new MyAdapter06();
        vp_show06.setAdapter(adapter);
        //给viewPager设置左右两边分别的数量，默认为1
         vp_show06.setOffscreenPageLimit(1);
        ll_dotList = (LinearLayout) findViewById(R.id.ll_dotList06);
        //viewpager中的imageView的图片个数与小圆点个数保持一致
        dotList = new ImageView[imgRes.length];
        //给小圆点的布局增加小圆点数据
        addDotData();
        //设置viewpager的监听事件
        setListener();
    }

    private void setListener() {
           //注意是.addOnPageChangeListener
        vp_show06.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            //滑动时
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //（滑动后）选中时
            @Override
            public void onPageSelected(int position) {
                //先设置每一个小圆点为灰
                for(int i=0;i<imgRes.length;i++){
                    dotList[i].setImageResource(R.drawable.dot_shape_no);
                }
                //选中的那个小圆点设置为亮粉，也就是滑动到那一个，就让那一个小圆点设置为亮分，其他的小圆点，设置为灰色
                dotList[position].setImageResource(R.drawable.dot_shape_sel);
            }
            //状态 分为 0前 1时 2后
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void addDotData() {
           //循环每一个小圆点
        for(int i=0;i<imgRes.length;i++){
            ImageView iv = new ImageView(this);
            //设置一个宽高为30，30的layoutParams
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //设置小圆点iv的左边局
            layoutParams.leftMargin = 10;
            //给小圆点设置宽高
            iv.setLayoutParams(layoutParams);
            //设置小圆点的图片资源
            iv.setImageResource(R.drawable.dot_shape_no);
            //把iv添加到父布局中
            ll_dotList.addView(iv);
            //把iv添加到小圆点数组中
            dotList[i] = iv;
            //给当前的小圆点iv一个标签（位置）
            iv.setTag(i);
            //设置当前小圆点的点击时间
            iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //当前的视图v也就是iv，得到标签（得到位置）
                    int position = (int)v.getTag();
                    //点击当前小圆点的时候，让viewpager跳转到位置position的条目（关于跳转改变小圆点状态的思想，见最后说明）
                    vp_show06.setCurrentItem(position);
                }
            });
        }
        //给第一个小圆点设置默认为亮粉
        dotList[0].setImageResource(R.drawable.dot_shape_sel);
        //创建一个子线程，进行延时操作
        new Thread(new Runnable() {
            @Override
            public void run() {
                isLoof = true;
                while(isLoof){
                    try {
                        //子线程sleep2秒
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    //sleep结束后，打开一个Ui进程
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //首先得到当前viewPager的条目的位置
                        int position = vp_show06.getCurrentItem();
                        //进行判断，如果position==最大值（长度length-1）,viewpager设置当前条目为第一个（跳转到第一个）
                        if(position == imgRes.length-1){
                            vp_show06.setCurrentItem(0);
                            //如果不是position不是最后一个，则跳转到下一个position(++position)
                        }else{
                            vp_show06.setCurrentItem(++position);
                        }
                    }
                });
                }
            }
        }).start();
    }

    private void addVpData() {
        //循环添加ImageView到viewPager的数据集合中
        for(int i=0;i<imgRes.length;i++){
            ImageView iv = new ImageView(this);
            //设置iv的布局宽高，填充父布局
            ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            //将layoutParams set进iv中
            iv.setLayoutParams(layoutParams);
            //当前iv设置ImageResource资源
            iv.setImageResource(imgRes[i]);
            //添加到数据源中
            imgList.add(iv);
        }
    }
    //写一个adapter继承自PagerAdapter
    class MyAdapter06 extends PagerAdapter{
        //得到数据源的size
        @Override
        public int getCount() {
            return imgList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        //viewpag加载当前可见视图以及当前视图左右的两边的视图
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(imgList.get(position));
            return imgList.get(position);
        }
        //销毁视图（只可意会，不可言传）
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imgList.get(position));
        }
    }
}

此时就实现了效果，总结如下：

①明确需求，明确需要用什么知识点解决
②viewPager视图改变分两种情况
1：通过小圆点的单机事件,改变视图：让viewPager.setCurrentItem到选择位置position的条目中，然后通过viewPager的addOnPageChangeListener设置监听，其中就会调用onPageSelected方法，先让使用的小圆点变灰，然后再将当前position的小圆点设置为亮粉
2：通过viewPager的左右滑动,改变视图：通过viewPager的addOnPageChangeListener设置监听，其中就会调用onPageSelected方法，先让使用的小圆点变灰，然后再将当前position的小圆点设置为亮粉