效果图

GIF.gif

第一步、布局

主界面布局,ViewPager+6个小圆点

MainActivity.xml

<android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7.5"
        android:layout_marginTop="10dp"
        android:id="@+id/viewpage">

    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/llt_page_indicator"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:visibility="visible"
        android:background="@color/white">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="5dp"
            android:src="@drawable/circle_main" />
    </LinearLayout>

这里的可以通过drawable设置颜色样式

激活样式

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

未激活样式

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

第二步、ViewPager滑动展示的界面

view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:src="@drawable/img_home_guide_chat"
        android:id="@+id/iv"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="蜜语聊天"
        android:textColor="#f15795"
        android:id="@+id/tv1"
        android:textSize="20dp"
        android:textStyle="bold"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="只有情侣彼此能看到"
        android:textColor="#696466"
        android:layout_marginTop="10dp"
        android:textSize="20dp"/>

</LinearLayout>

第三步、继承PagerAdapter重写必须用的4个用法

public class AdapterViewpager extends PagerAdapter {
    
    private List<View> views;

    public AdapterViewpager(List<View> mViewList) {
        this.views = mViewList;
    }

    @Override
    public int getCount() {//必须实现
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {//必须实现
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {//必须实现，实例化
       
        ViewGroup parent = (ViewGroup) views.get(position).getParent();
        if (parent != null)
            parent.removeAllViews();

        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {//必须实现，销毁
        container.removeView(views.get(position));
    }
}

补充：一些方法

其中，getCount和isViewFromObject是必须覆写的方法。isViewFromObject是用来判断pager的一个view是否和instantiateItem方法返回的object有关联，因为instantiateItem方法返回值不一定是view，可以是任意对象。
而当我们覆写instantiateItem方法时，如果直接写container.addView(views.get(position))的话会报
java.lang.IllegalStateException:
The specified child already has a parent. You must call removeView() ..."造成程序结束。
提示我们要添加的View已经绑定一个父类，由于一个子view不能与两个父类相关，所以必须得解绑。
因此必须在此之前添加判断，如果已经绑定了一个父类，必须先解绑再添加到ViewGroup里：

ViewGroup parent = (ViewGroup) views.get(position).getParent();  
if (parent != null)  
    parent.removeAllViews();  

第四步、初始化

MainActivity.java

//viewpager的设置
        vpager_one = (ViewPager) findViewById(R.id.viewpage);
        aList = new ArrayList<View>();

        //设置第一个点未激活状态
        lltPageIndicator = (LinearLayout) findViewById(R.id.llt_page_indicator);
        lltPageIndicator.getChildAt(0).setEnabled(false);

        //循环添加viewpager
        for (int i = 0; i < 6; i++) {
            aList.add(getGuidePage(i));
        }

        //实现方法类
        mAdapter = new AdapterViewpager(aList);
        //添加
        vpager_one.setAdapter(mAdapter);

        //滑动监听
        vpager_one.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            //滚动过程中实现
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //滚动成功后实现
            @Override
            public void onPageSelected(int position) {
                clearIndicatorFocusedState();
                lltPageIndicator.getChildAt(position).setEnabled(false);
            }
            //滚动成功前，即手指按下屏幕时
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

实现方法类

//滑动消除小圆圈
    private void clearIndicatorFocusedState() {
        // TODO 自动生成的方法存根  
        int childCount = lltPageIndicator.getChildCount();
        for (int i = 0; i < childCount; i++) {
            lltPageIndicator.getChildAt(i).setEnabled(true);

        }
    }

    private View getGuidePage(int i) {
        // TODO 自动生成的方法存根
        View v = View.inflate(this, R.layout.view_one, null);
        ImageView ivGuidePage = (ImageView) v.findViewById(R.id.iv);
        tv1 = v.findViewById(R.id.tv1);
        tv2 = v.findViewById(R.id.tv2);

        switch (i) {
            case 0:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_chat);

                break;
            case 1:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_add);
                tv1.setText("立即添加另一半");
                tv2.setText("开启你们的恩爱之旅");
                break;
            case 2:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_alarm);
                tv1.setText("远程闹钟");
                tv2.setText("让 TA 一键叫你起床");
                break;
            case 3:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_distance);
                tv1.setText("距离感应");
                tv2.setText("你我距离一键感应");
                break;
            case 4:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_game);
                tv1.setText("情侣二人游戏");
                tv2.setText("一起养宠物，一起养宝宝");
                break;
            case 5:
                ivGuidePage.setImageResource(R.drawable.img_home_guide_notify);
                tv1.setText("智能提醒");
                tv2.setText("让你不在错过 TA 的生日");
                break;
        }

        return v;

    }