Android学习-ViewPager与PagerAdapter合用实现滑动翻页

项目中需要实现滑动翻阅App引导页，特此记录实现过程。

Android开发中使用到的UI控件有很多，比如TextView、ImageView、Button等等，这些都是比较基础的控件，可以单独使用，而今天介绍的是ViewPager控件，ViewPager 是一种可以让用户通过左右滑动来切换页面的控件，通过它我们可以展示超过屏幕尺寸大小的内容，在某种程度上它可以说是实现多页面的最佳方式，同时 ViewPager 还支持任意动态的添加/删除页面。但是ViewPager不能单独使用，需要配合PagerAdapter一起合用才能实现期望的效果。

准备布局文件

1. 首先创建一个与GuideActivity.java相对应的布局文件用于放置ViewPager。也可以放一些每个引导页都包含的控件，例如我这里放置了“跳过”按钮：

代码如下(activity_guide.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"
    android:gravity="top">

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="30dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_music_switch"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/img_guide_music" />

        <TextView
            android:id="@+id/tv_guide_skip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="跳过"
            android:background="@drawable/corner_view"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

 

效果如图所示：

 

2. 另外分别准备三个布局文件（layout_pager_guide_1.xml、layout_pager_guide_2.xml、layout_pager_guide_3.xml），放置三个引导页具体要显示的内容，我这里只放了一个ImageView，效果如下：

 

重写适配器

新建一个类继承PagerAdapter，需要重写四个方法，具体代码如下：

package com.tangyibo.framework.base;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.List;

public class BasePagerAdapter extends PagerAdapter {

    private List<View> mList;

    public BasePagerAdapter(List<View> mList){
        this.mList = mList;
    }

    @Override
    public int getCount() {
        return mList.size();
    }

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ((ViewPager)container).addView(mList.get(position));
        return mList.get(position);
    }

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

 

GuideActivity.java内逻辑编写

这里有一点小难度，首先把主布局文件的控件都声明出来，包括ImageView、TextView和ViewPager，同时声明三个view用于保存三个布局文件，再声明一个list用于保存这三个view；具体代码如下：

package com.tangyibo.planet.ui;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import com.tangyibo.framework.base.BaseActivity;
import com.tangyibo.framework.base.BasePagerAdapter;
import com.tangyibo.framework.base.BaseUIActivity;
import com.tangyibo.planet.R;

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

/**
 * 引导页
 * 1.ViewPager : 适配器|帧动画播放
 * 2.歌曲的播放
 * 3.属性动画旋转
 * 4.跳转
 */

public class GuideActivity extends BaseActivity {

    private ImageView iv_music_switch; //音乐图标
    private TextView tv_guide_skip; //跳过
    private ViewPager mViewPager;

    private View view1; //guide_1
    private View view2; //guide_2
    private View view3; //guide_3

    private List<View> mPageList = new ArrayList<>(); //用list保存三个页面view



    private void initView() {
        iv_music_switch = (ImageView) findViewById(R.id.iv_music_switch);
        tv_guide_skip = (TextView) findViewById(R.id.tv_guide_skip);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);

        //三个页面布局文件传给view
        view1 = View.inflate(this, R.layout.layout_pager_guide_1, null);
        view2 = View.inflate(this, R.layout.layout_pager_guide_2, null);
        view3 = View.inflate(this, R.layout.layout_pager_guide_3, null);
        //用一个list管理三个引导页面
        mPageList.add(view1);
        mPageList.add(view2);
        mPageList.add(view3);

        mViewPager.setAdapter(new BasePagerAdapter(mPageList));


    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initView();
    }


}

显示效果：