【Android 基础知识】翻页类视图 ViewPager

1、翻页视图 ViewPager

• 对于 ViewPager 来说，一个页面就是一个项（相当于 ListView 的一个列表项），许多页面组成 ViewPager 的页面项；
• ViewPager 的适配器使用 PagerAdapter；
• ViewPager 的监听器使用 OnPageChangeListener，表示监听页面切换事件。

ViewPager 三个常用方法：

• setAdapter：设置页面项的适配器。适配器用的是 PagerAdapter 及其子类；
• setCurrentItem：是指当前页码，即打开翻页视图时默认显示哪个页面；
• addOnPageChangeListener：设置翻页视图的页面切换监听器。该监听器需实现接口 OnPageChangeListener 下的 3 个方法：
  – onPageScrollStateChanged：在页面滑动状态变化时触发。
  – onPageScrolled：在页面滑动过程中触发。
  – onPageSelected：在选中页面时，即滑动结束后触发。

下面是使用 PagerAdapter 的代码例子：

public class ImagePagerAdapater extends PagerAdapter {
    private Context mContext; // 声明一个上下文对象
    // 声明一个图像视图队列
    private ArrayList<ImageView> mViewList = new ArrayList<ImageView>();
    // 声明一个商品信息队列
    private ArrayList<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>();

    // 图像翻页适配器的构造函数，传入上下文与商品信息队列
    public ImagePagerAdapater(Context context, ArrayList<GoodsInfo> goodsList) {
        mContext = context;
        mGoodsList = goodsList;
        // 给每个商品分配一个专用的图像视图
        for (int i = 0; i < mGoodsList.size(); i++) {
            ImageView view = new ImageView(mContext);
            view.setLayoutParams(new LayoutParams(
                    LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
            view.setImageResource(mGoodsList.get(i).pic);
            view.setScaleType(ScaleType.FIT_CENTER);
            // 把该商品的图像视图添加到图像视图队列
            mViewList.add(view);
        }
    }

    // 获取页面项的个数
    public int getCount() {
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {

        return arg0 == arg1;
    }

    // 从容器中销毁指定位置的页面
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

    // 实例化指定位置的页面，并将其添加到容器中
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

    // 获得指定页面的标题文本
    public CharSequence getPageTitle(int position) {
        
        return mGoodsList.get(position).name;
    }
}

与适配器 ImagePagerAdapter 对应的页面代码：

public class ViewPagerActivity extends AppCompatActivity implements OnPageChangeListener {
    private ArrayList<GoodsInfo> goodsList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        goodsList = GoodsInfo.getDefaultList();
        // 构建一个商品图片的翻页适配器
        ImagePagerAdapater adapter = new ImagePagerAdapater(this, goodsList);
        // 从布局视图中获取名叫vp_content的翻页视图
        ViewPager vp_content = findViewById(R.id.vp_content);
        // 给vp_content设置图片翻页适配器
        vp_content.setAdapter(adapter);
        // 设置vp_content默认显示第一个页面
        vp_content.setCurrentItem(0);
        // 给vp_content添加页面变化监听器
        vp_content.addOnPageChangeListener(this);
    }

    // 翻页状态改变时触发。arg0取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕
    // 在翻页过程中，状态值变化依次为：正在滑动→滑动完毕→静止
    public void onPageScrollStateChanged(int arg0) {}

    // 在翻页过程中触发。该方法的三个参数取值说明为 ：第一个参数表示当前页面的序号
    // 第二个参数表示当前页面偏移的百分比，取值为0到1；第三个参数表示当前页面的偏移距离
    public void onPageScrolled(int arg0, float arg1, int arg2) {}

    // 在翻页结束后触发。arg0表示当前滑到了哪一个页面
    public void onPageSelected(int arg0) {
        Toast.makeText(this, "您翻到的手机品牌是：" + goodsList.get(arg0).name, Toast.LENGTH_SHORT).show();
    }
}

下面是页面代码对应的布局文件代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <!-- 注意翻页视图ViewPager的节点名称要填全路径 -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="400dp" />
</LinearLayout>

2、翻页标题栏 PagerTitleStrip/PagerTabStrip

• 为了方便开发者处理 ViewPager 的页面显示与切换，Android 附带提供了两个控件，分别是 PagerTitleStrip 和 PagerTabStrip。
• 二者都是在 ViewPager 页面上方展示设定的页面标题，不同之处在于 PagerTitleStrip 只是单纯的文本标题效果，无法点击进行页面切换；PagerTabStrip 类似选项卡效果，文本下面有横线，点击左右选项卡即可切换到对应页面。
• 要想在标题栏显示指定的文字，得重写 PagerAdapter 的 getPageTitle 方法。

//获得指定页面的标题文字
@Override
public CharSequence getPageTitle(int position){
	return mGoodsList.get(position).name;
}

下面是布局代码，如果用 PagerTitleStrip，就把 PagerTabStrip 改成 PagerTitleStrip：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <!-- 注意翻页视图ViewPager的节点名称要填全路径 -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="400dp">

        <!-- 注意翻页标题栏PagerTabStrip的节点名称要填全路径 -->
        <androidx.viewpager.widget.PagerTabStrip
            android:id="@+id/pts_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

标题栏因为只有文本，所以调整样式只能改文字的大小和颜色，并且只能在代码中调用文本样式的设置方法，具体代码如下：

// 初始化翻页标题栏
private void initPagerStrip() {
    // 从布局视图中获取名叫pts_tab的翻页标题栏
    PagerTabStrip pts_tab = findViewById(R.id.pts_tab);
    // 设置翻页标题栏的文本大小
    pts_tab.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
    // 设置翻页标题栏的文本颜色
    pts_tab.setTextColor(Color.GREEN);
}

需要完整代码可以留言或者私信。