一：摘要
这篇文章主要为大家介绍了使用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和上面的类似。
欢迎小伙伴们批评指正！
网友评论