ViewPager底部添加小圆点

转自：https://blog.csdn.net/qq_26239671/article/details/70038228

在APP的ViewPager引导页面中, 我们通常可以看到底部有小圆点显示当前是第几页, 我们来试一下这个效果是怎么实现的, 效果图如下:

目录

基础配置

创建适配器控件

创建适配器

添加数据

创建适配器对象, 设置适配器

重点教程(小圆点)

在drawable文件夹下创建xml图形

生成小圆点

监听滑动

---

基础配置

首先要创建出一个滑动页面,可以阅读我以前的文章, 也可以直接读以下文档.

创建适配器控件

在布局中.添加 viewpager控件, 并在MainActivity中 绑定控件.

1.布局中:

        <?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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.dell.lunbo.MainActivity">

        <android.support.v4.view.ViewPager
            android:id="@+id/main_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:id="@+id/main_linear"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:orientation="horizontal" />
    </RelativeLayout>

1. MainActivity中:

import android.os.Bundle;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.LinearLayout;

    import static com.example.dell.lunbo.R.id.main_linear;

    public class MainActivity extends AppCompatActivity {
        private ViewPager mViewPager;
        private LinearLayout mLinearLayout;
        //ImageView动态数组
        private List<ImageView> mImageList = new ArrayList<ImageView>();


        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            bindID();

        }

        /**
         * 绑定ID
         */
        private void bindID() {
            mViewPager = (ViewPager) findViewById(R.id.main_viewpager);
            mLinearLayout = (LinearLayout) findViewById(main_linear);

        }
    }

创建适配器

1. 在MainActivity中,创建一个内部适配器类:

    /**
         * 适配器
         */
        private class MyAdapter extends PagerAdapter {

            //大小
            @Override
            public int getCount() {
                return mImageList.size();
            }

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

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                //获取图片view
                ImageView imageView = mImageList.get(position);
                //设置到容器,也就是ViewPager
                container.addView(imageView);
                //返回控件
                return imageView;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                //从容器中删除
                container.removeView(mImageList.get(position));
            }
        }

添加数据

在图片资源资源文件夹下面放入三张图片, 然后将每个图片给ImageView设置为背景并添加到动态数组中

1. 添加图片数组

        //图片数组
        private int[] mPics = new int[]{R.drawable.guide1, R.drawable.guide2, R.drawable.guide3};

1. 创建getData()方法, 生成ImageView设置背景图片并放入ImageView数组中, 在onCreate()中调用.

    /**
     * 获取数据
     */
    private void getData() {
        //设置图片
        ImageView imageView;
        View view;
        for (int pic : mPics) {
            imageView = new ImageView(MainActivity.this);
            imageView.setBackgroundResource(pic);
            //添加到数组
            mImageList.add(imageView);
        }
    }

创建适配器对象, 设置适配器

1. 创建initAdaper()方法在onCreate()中调用给ViewPager设置适配器.

    /**
     * 设置适配器
     */
    private void initAdapter() {
        mAdapter = new MyAdapter();
        mViewPager.setAdapter(mAdapter);
    }

重点教程(小圆点)

在drawable文件夹下创建xml图形

1. 在xml文件夹下创建一个enable.xml文件(选中时白色的小圆点文件)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--白色-->
    <solid android:color="#ffffff" />
    <!--半径-->
    <corners android:radius="10dp" />
</shape>

1. 在drawable文件夹下创建一个disable.xml文件(未选中是灰色的小圆点)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--灰色-->
    <solid android:color="@android:color/darker_gray" />
    <!--半径-->
    <corners android:radius="10dp" />
</shape>

1. 在drawable文件夹下创建一个background.xml文件(将前两种圆点背景合成一个文件)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/enable" android:state_enabled="true" />
    <item android:drawable="@drawable/disable" android:state_enabled="false" />
</selector>

生成小圆点

1. 修改getData()方法, 有多少个图片资源,就生成多少个小圆点,设置到LinearLayout中.

   /**
     * 获取数据
     */
    private void getData() {
        //设置图片
        ImageView imageView;
        View view;
        for (int pic : mPics) {
            imageView = new ImageView(MainActivity.this);
            imageView.setBackgroundResource(pic);
            //添加到数组
            mImageList.add(imageView);

            //创建底部指示器(小圆点)
            view = new View(MainActivity.this);
            view.setBackgroundResource(R.drawable.background);
            view.setEnabled(false);
            //设置宽高
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //设置间隔
            if (pic != mPics[0]) {
                layoutParams.leftMargin = 10;
            }
            //添加到LinearLayout
            mLinearLayout.addView(view, layoutParams);
        }
    }

监听滑动

1. 进入页面后, 第一个小圆点高亮,在onCreate()中写入一下代码:

        //第一次显示小白点
        mLinearLayout.getChildAt(0).setEnabled(true);

1. 使用监听滑动 , 滑到一个页面就将哪个小圆点高亮显示
   1). 将 MainActivity implements ViewPager.OnPageChangeListener, 并重写三个方法
   2). 给ViewPager注册监听

        //注册
        mViewPager.addOnPageChangeListener(this);

1. 在重写的三个方法中, 如下写入:

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

    }

    @Override
    public void onPageSelected(int position) {
        mLinearLayout.getChildAt(mNum).setEnabled(false);
        mLinearLayout.getChildAt(position).setEnabled(true);
        mNum = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

好了,运行一下发下完美无误了.