ViewPager实现实现APP引导页

作者: 块码加编 | 来源:发表于2020-08-13 10:18 被阅读0次

一：摘要

这篇文章主要为大家介绍了使用ViewPager来实现android中常见的引导页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

下面我们先来看一下要实现的效果吧!

二：具体实现过程

1.创建一个工程，修改主布局为线性布局，

加入androidx.viewpager.widget.ViewPager标签，id为view_pager

部分代码：

<androidx.viewpager.widget.ViewPager

    android:id="@+id/view_pager"

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="1">

</androidx.viewpager.widget.ViewPager>

2.在MainActivity把ViewPager引用出来并提取为全局变量。

部分代码：

mViewPager = findViewById(R.id.view_pager);

3. 在调用mViewPager.setAdapter();之前，我们要创建视图数据。接下来创建视图数据。

4.添加全局变量int[] mLayoutIDs

部分代码：

private int[] mLayoutIDs={
       R.layout.view_first,
       R.layout.view_second,
       R.layout.view_third

};

5.新建R.layout.view_first，……相对布局文件并设置内容。alt+enter快捷键

6. List<View> mViews=new ArrayList<>();创建一个视图集合保存视图对象。ctrl+alt+F提取为全局变量

部分代码：

mViews = new ArrayList<>();

7.利用for循环添加视图对象到视图集合。fori快捷键

8.通过.xml文件反向生成视图对象并添加视图对象到视图集合

部分代码：

for (int index = 0; index < mLayoutIDs.length; index++) {

    //通过.xml文件反向生成视图对象并添加视图对象到视图集合
    //写法1：

    //views.add(getLayoutInflater().inflate(mLayoutIDs[index],null));
    //写法2：

    //利用ctrl+alt+v快捷键

    //把getLayoutInflater().inflate(mLayoutIDs[index],null)提取为变量
   View inflate = getLayoutInflater().inflate(mLayoutIDs[index], null);
   mViews.add(inflate);

9.视图有了，就要创建一个Adapter(全局变量)

10.创建一个PagerAdapter, 手动添加两个要实现的方法destroyItem & instantiateItem。ctrl+o

部分代码：

//创建一个PagerAdapter,注意结尾的分号。
// 手动添加两个要实现的方法destroyItem & instantiateItem
//重写好mPagerAdapter的方法就可以设置mViewPager的适配器了
PagerAdapter mPagerAdapter=new PagerAdapter() {
   @Override
   public int getCount() {
       //返回页面的数量
       return mLayoutIDs.length;
   }

   @Override
   public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
       //判断当前视图是不是该对象，object是instantiateItem返回的。相同的话后面就可以复用。
       return view==object;
   }

   @Override
   public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
       //把视图移除
       container.removeView(mViews.get(position));
   }

   @NonNull
   @Override
   public Object instantiateItem(@NonNull ViewGroup container, int position) {
       //获取当前的视图
       View child=mViews.get(position);
       //把视图加载进来
       container.addView(child);
       //同时把该视图返回
       return child;
   }
};

11.重写好mPagerAdapter的方法就可以设置mViewPager的适配器了。

mViewPager.setAdapter(mPagerAdapter);

至此，就可以出现3个滑动页面了。

我们可以看一下效果。

12.主布局添加一个id为dot_layout的LinearLayout。

部分代码：

  android:layout_width="match_parent"

  android:layout_height="100dp"

13. 主布局ViewPager的宽高修改为

部分代码：

    android:layout_width="match_parent"

    android:layout_height="0dp"

    android:layout_weight="1"

14.MainActivity中添加设置点要用到的两个全局变量

部分代码：

private ViewGroup mDotViewGroup;

private List<ImageView> mDotViews = new ArrayList<>();

//在MainActivity的onCreate方法中先把mDotViewGroup初始化

mDotViewGroup = findViewById(R.id.dot_layout);

15.开始在for循环里添加点，为每个点创建一个ImageView对象

ImageView dot = new ImageView(this);

16.设置点的图片,修改一下图片大小

部分代码：

dot.setImageResource(R.mipmap.ic_launcher);
dot.setMaxHeight(100);
dot.setMaxWidth(100);

17.创建LinearLayout.LayoutParams对象并做属性设置

部分代码：

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);

18.把dot加进mDotViews，mDotViewGroup

mDotViews.add(dot);
mDotViewGroup.addView(dot);

19.给mViewPager设置监听器。

addOnPageChangeListener

部分代码：

 //在onPageSelected中设置点的图片，可利用for循环

for (int index = 0; index < mDotViews.size(); index++) {

    mDotViews.get(index).setImageResource(position == index ?R.mipmap.star:R.mipmap.ic_launcher);
    //a ? b:c a 三目运算符，右结合，a为真时，选b,否则选c

}

//然后crtl+alt_m提取该循环为一个函数。

private void setDotViews(int position) {

for (int index = 0; index < mDotViews.size(); index++) {

    mDotViews.get(index).setImageResource(position == index ?R.mipmap.star:R.mipmap.ic_launcher);
    //a ? b:c a 三目运算符，右结合，a为真时，选b,否则选c

}
}

20.设置默认的页面序号

mViewPager.setCurrentItem(0);把0提取为常量。ctrl+alt+c。

同时注意默认的页面序号设置为0时请调用一次setDotViews

至此，全部功能已实现。

我们先看看默认的页面序号设置为0时没有调用setDotViews的情况。

有没有发现一开始在0页面时没有小星星呢？

tips:默认的页面序号设置为0时，调用setDotViews的效果就是文章开篇是展示的效果图，小伙伴们可以比较一下哦。

下面附上全部代码，仅供学习交流。

MainActivity.java

package com.wxdgut.viewpager;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

   public static final int INIT_POSITION = 0;
   private ViewPager mViewPager;
   private int[] mLayoutIDs={
           R.layout.view_first,
           R.layout.view_second,
           R.layout.view_third
           //新建R.layout.view_first，……相对布局文件并设置内容。alt+enter快捷键
   };
   private List<View> mViews;
   //添加设置点要用到的两个全局变量
   private ViewGroup mDotViewGroup;
   private List<ImageView> mDotViews = new ArrayList<>();

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       mViewPager = findViewById(R.id.view_pager);
       //mViewPager.setAdapter();前要创建视图数据
       //创建视图数据,添加全局变量int[] mLayoutIDs
       //List<View> mViews=new ArrayList<>();创建一个视图集合保存视图对象。ctrl+alt+F提取为全局变量
       mViews = new ArrayList<>();

       //设置点之前mDotViewGroup先把初始化
       mDotViewGroup = findViewById(R.id.dot_layout);

       //利用for循环添加视图对象到视图集合。fori快捷键
       for (int index = 0; index < mLayoutIDs.length; index++) {
           //通过.xml文件反向生成视图对象并添加视图对象到视图集合
           //写法1：views.add(getLayoutInflater().inflate(mLayoutIDs[index],null));
           //写法2：利用ctrl+alt+v快捷键把getLayoutInflater().inflate(mLayoutIDs[index],null)提取为变量
           View inflate = getLayoutInflater().inflate(mLayoutIDs[index], null);
           mViews.add(inflate);

           /*如果只是想简单放张图片的话也可以直接new对象
           ImageView imageView = new ImageView(this);
           imageView.setImageResource(R.mipmap.ic_launcher);
           mViews.add(imageView);
           */

           //开始在for循环里添加点，为每个点创建一个ImageView对象
           ImageView dot = new ImageView(this);
           //设置点的图片,修改一下图片大小
           dot.setImageResource(R.mipmap.ic_launcher);
           dot.setMaxHeight(100);
           dot.setMaxWidth(100);
           //创建LinearLayout.LayoutParams对象并做属性设置
           LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
           layoutParams.leftMargin = 20;//点距离左边的点为20
           dot.setLayoutParams(layoutParams);
           dot.setEnabled(false);//设置不可用
           //把dot加进mDotViews，mDotViewGroup
           mDotViews.add(dot);
           mDotViewGroup.addView(dot);

       }
       //视图有了，就要创建一个PagerAdapter(全局)

       //设置mViewPager的适配器
       mViewPager.setAdapter(mPagerAdapter);

       //设置默认的页面序号mViewPager.setCurrentItem(0);。把0提取为常量。ctrl+alt+c
       mViewPager.setCurrentItem(INIT_POSITION);
       //默认的页面序号设置为0时请调用一次setDotViews
       setDotViews(INIT_POSITION);

       //给mViewPager设置监听器。
       mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

           }

           @Override
           public void onPageSelected(int position) {
               setDotViews(position);

           }

           @Override
           public void onPageScrollStateChanged(int state) {

           }
       });

   }

   private void setDotViews(int position) {
       for (int index = 0; index < mDotViews.size(); index++) {
           mDotViews.get(index).setImageResource(index==position ? R.mipmap.star:R.mipmap.ic_launcher);
       }
   }

   //创建一个PagerAdapter,注意结尾的分号。
   // 手动添加两个要实现的方法destroyItem & instantiateItem。ctrl+o
   //重写好mPagerAdapter的方法就可以设置mViewPager的适配器了
   PagerAdapter mPagerAdapter=new PagerAdapter() {
       @Override
       public int getCount() {
           //返回页面的数量
           return mLayoutIDs.length;
       }

       @Override
       public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
           //判断当前视图是不是该对象，object是instantiateItem返回的。相同的话后面就可以复用。
           return view==object;
       }

       @Override
       public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
           //把视图移除
           container.removeView(mViews.get(position));
       }

       @NonNull
       @Override
       public Object instantiateItem(@NonNull ViewGroup container, int position) {
           //获取当前的视图
           View child=mViews.get(position);
           //把视图加载进来
           container.addView(child);
           //同时把该视图返回
           return child;
       }
   };
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
   android:orientation="vertical">

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

   <LinearLayout
       android:id="@+id/dot_layout"
       android:layout_width="match_parent"
       android:layout_height="100dp"
       android:orientation="horizontal"
       android:layout_marginBottom="20dp"
       android:gravity="center"
       ></LinearLayout>

</LinearLayout>

view_first.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="页面1"
       android:textSize="25sp"
       android:layout_centerInParent="true"/>

</RelativeLayout>

view_second.xml与view_third.xml和上面的类似。

欢迎小伙伴们批评指正！

ViewPager实现实现APP引导页

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读