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演示的效果了。

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

猜你喜欢