Android ViewPage2 引导页动画

使用ViewPage2模拟引导页动画的效果

首先我们需要自定义出我们需要的形状未选择状态  indicator_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="8dp" android:height="8dp"></size>
    <solid android:color="#cccccc"/>

</shape>

 

 

自定义设置选中时的文件 indicator_in.xml   这里我们设置的长一点模拟滑动粘连效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="12dp"
        android:height="8dp"></size>
    <corners android:radius="8dp" />
    <solid android:color="@color/mycolor" />

</shape>

 

 

 

 

 

 

我们将使用相对布局，把我们需要进行提示的小圆点放到ViewPage2 的控件上

效果如图所示

 

布局文件代码

<?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"
    android:orientation="vertical"
    tools:context=".FirstActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="10dp"
        android:foregroundGravity="center"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/indicator_off" />

        <ImageView
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"

            android:src="@drawable/indicator_off" />

        <ImageView
            android:id="@+id/img3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"

            android:src="@drawable/indicator_off" />
    </LinearLayout>
</RelativeLayout>

 

代码部分  给ViewPage2控件添加监听 判断是否选中状态 更改小圆点文件

            List<Integer> imgList = new ArrayList<Integer>();//添加我们定义的小圆点
            imgList.add(R.id.img1);//之前布局文件设置的图像视图
            imgList.add(R.id.img2);
            imgList.add(R.id.img3);
            vpSplash.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
                @Override
                //int索引
                public void onPageSelected(int position) {
                    super.onPageSelected(position);
                    //5、for循环遍历列表
                    for (int i = 0; i < imgList.size(); i++) {
                        //3、获取图片框
                        ImageView imageView = (ImageView) findViewById(imgList.get(i));
                        //判断是否被选中蓝点
                        if (i == position) {
                            //被选中显示蓝点
                            imageView.setImageResource(R.drawable.indicator_in);
                        } else {
                            //未选中显示灰点
                            imageView.setImageResource(R.drawable.indicator_off);
                        }
                    }

                }
            });