Android学习（二十六）APP引导页面以及小圆点滑动的实现

1、先看效果如下：

2、然后实现这个效果大体说明：

1）滑动的页面，用ViewPager来实现2）小圆点用LinerLayout里面添加图片来实现3）三个滑动页面和小圆点都是图片4）当滑动到当前页面的时候，小圆点显示红色，其他圆点显示蓝色5）ViewPager滑动页面的实现我之前博客已经写过了，这次只要是直接把布局的背景设置成图片就可以了。

3、然后讲一下小圆点
我当前只有一个主布局文件，其他三个布局文件都是用来适配ViewPager的。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.gucheng.viwerpagerdemo.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/>    <LinearLayout        android:id="@+id/dot"        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerInParent="true"        android:layout_marginBottom="15dp">    </LinearLayout></RelativeLayout>

4、布局文件设置好之后，现在在Java类里面进行实现:
首先，声明一个ImageView对象数组的用来存放小圆点，数组的大小取决于当前ViewPager的大小。
我把小圆点设置函数单独封装成了一个类，只需要传入当前ImageView[],存放小圆点的LinerLayout布局对象，以及当前上下文就可以完成静态小圆点的设置（就是说目前为止，滑动页面小圆点的状态并没有改变）。

下面是我封装的类：

//圆点设置函数public class SetDot {    public  SetDot(ImageView[] imageView, LinearLayout dot, Context context){        for (int i=0; i < imageView.length;i++){            ImageView imageViewLocal = new ImageView(context);            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,                    LinearLayout.LayoutParams.WRAP_CONTENT);            //控件，绑定到这个LinerLayout里面            imageViewLocal.setLayoutParams(layoutParams);            //给空数组赋值            imageView[i] = imageViewLocal;            //默认初始界面为红色圆点            if (i == 0){                imageView[i].setImageResource(R.mipmap.dot_red);            } else {                imageView[i].setImageResource(R.mipmap.dot_blue);            }            dot.addView(imageViewLocal);        }    }}

5、设置好小圆点之后，现在要做的是实现小圆点状态和ViewPager同步变化，我也把这个函数封装成了一个单独的类：
只需要在实例化的时候传入ViewPager对象, ImageView[]对象

package com.example.gucheng.viwerpagerdemo;import android.support.v4.view.ViewPager;import android.widget.ImageView;/** * Created by gucheng on 2017/7/4. */public class SetDotChangeWithViewPager {    //构造函数    public SetDotChangeWithViewPager(){}    //给ViewPager设置监听事件，当页面滑动的时候，小圆点的状态也跟着改变    public void dotChangeWithViewPager(ViewPager viewPager, final ImageView[] imageView){        viewPager.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 < imageView.length;i++){                    if (i == position){//当前页面小圆点设置为红色                        imageView[i].setImageResource(R.mipmap.dot_red);                    }else {                        imageView[i].setImageResource(R.mipmap.dot_blue);                    }                }            }            //页面状态改变时被调用            @Override            public void onPageScrollStateChanged(int state) {            }        });    }}

关于ViewPager的实现就不写了，主要是小圆点的代码，在MainActivity类里面：
先声明两个变量如下

private ImageView[] imageView;private LinearLayout dot;//小圆点的布局文件

然后

//小圆点设置        dot = (LinearLayout)findViewById(R.id.dot);        //imageView数组的大小取决于布局文件的大小,就是viewList的大小        imageView = new ImageView[viewList.size()];        new SetDot(imageView,dot,MainActivity.this);

其中SetDot是我封装的第一个函数，写在开始了。然后

//给viewPager设置监听事件,让小圆点跟着页面变化而滑动        SetDotChangeWithViewPager setDotChangeWithViewPager = new SetDotChangeWithViewPager();        setDotChangeWithViewPager.dotChangeWithViewPager(viewPager,imageView);

ok，这样的话就可以实现开头gif演示的效果了。