ViewPager实现App引导页

Step 1 创建ViewPager布局文件

这里一共有4个布局文件，只贴一个，供参考

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="first"
        android:textSize="30sp"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/picture_1"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>

Step 2 将ViewPager添加到activity_main布局文件中

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

  <androidx.viewpager.widget.ViewPager
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      >

  </androidx.viewpager.widget.ViewPager>

</RelativeLayout>

Step 3 MainActivity中准备布局资源并初始化

//准备布局资源
private  int[]  layoutsId = {
         R.layout.view_pager_first,
         R.layout.view_pager_second,
        R.layout.view_pager_third,
        R.layout.view_pager_forth,

};
 private List<View> views;
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

  //初始化数据
         views = new ArrayList<>();

        for(int index=0;index<layoutsId.length;index++){
            View  view = getLayoutInflater().inflate(layoutsId[index],null);
                    views.add(view);
        }

        
    }

Step 4 获取viewPager，PagerAdapter实例并设置adapter

PagerAdapter中需要重写四个方法，即getCount()、isViewFromObject()、instantiateItem()、destroyItem()，一定要注意释放资源。

//获取viewPager实例
ViewPager viewPager = findViewById(R.id.view_pager);

 PagerAdapter   adapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return layoutsId.length;
            }

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

             @NonNull
             @Override
             public Object instantiateItem(@NonNull ViewGroup container, int position) {
                //获取每次添加的视图
                View child =views.get(position);
                        container.addView(child);
                 return child;
             }

             @Override
             public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                  container.removeView(views.get(position));
             }
         };

//设置PagerAdapter
        viewPager.setAdapter(adapter);

Step 5 在布局文件中设置dot_layout

<!--设置随viewpager滚动的点-->
<LinearLayout
    android:id="@+id/dot_layout"
    android:layout_width="120dp"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="40dp"
    android:layout_centerHorizontal="true"
    android:gravity="center"
     android:orientation="horizontal"
  >

</LinearLayout>

Step 6 设置随页面变化的dot

//准备dot的ViewGroup以及List
private ViewGroup  mDotViewGroup ;
private List<ImageView> mDotViews = new ArrayList<>();


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

        ...
        mDotViewGroup =  findViewById(R.id.dot_layout);

        for(int index=0;index<layoutsId.length;index++){
          ...
            ImageView dot = new ImageView(this);
            dot.setImageResource(R.drawable.dot_1);
              //宽高做限制
            dot.setMaxWidth(100);
            dot.setMaxHeight(100);

               //为LinearLayout设置参数：设置每个点相距20
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20,20);
            layoutParams.leftMargin = 20;
           dot.setLayoutParams(layoutParams);
            dot.setEnabled(false);
            //将点放入 ViewGroup当中
            mDotViewGroup.addView(dot);
            mDotViews.add(dot);

        }

Step 7 为viewPager设置换页监听

 //在缓冲中至少有几页
    //viewPager.setOffscreenPageLimit(4);
 //设置当前页面
    viewPager.setCurrentItem(0);
    setDotViews(0);

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            //设置换pager的时候 下面滚动点的变化
            setDotViews(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

private void setDotViews(int position) {
    for (int i = 0; i <mDotViews.size() ; i++) {
        mDotViews.get(i).setImageResource(position==i ? R.drawable.dot:R.drawable.dot_1);
    }
}

测试结果