安卓基础之《（21）—高级控件（3）翻页类视图》

一、翻页视图ViewPager

1、翻页视图允许页面在水平方向左右滑动

2、例子

这里用更新的类ViewPager2

ViewPagerActivity.java

java 复制代码

package com.example.chapter08;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.example.chapter08.adapter.ImagePagerAdapter;

public class ViewPagerActivity extends AppCompatActivity {

    public static final int[] imageList = new int[] {R.drawable.diqiu, R.drawable.shuixing, R.drawable.huoxing};
    public static final String[] descList = new String[] {"地球", "水星", "火星"};

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

        ViewPager2 vp2_content = findViewById(R.id.vp2_content);
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageList, descList);
        vp2_content.setAdapter(adapter);
        vp2_content.setCurrentItem(1, false); // 设置初始位置
        // 设置二代翻页视图的排列方向为水平方向
        vp2_content.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        vp2_content.setCurrentItem(0);
    }
}

布局文件activity_view_pager.xml

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp2_content"
        android:layout_width="match_parent"
        android:layout_height="370dp"/>

</LinearLayout>

适配器ImagePagerAdapter.java

java 复制代码

package com.example.chapter08.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.chapter08.R;

public class ImagePagerAdapter extends RecyclerView.Adapter{

    private Context mContext;
    private int[] mImageList;
    private String[] mDescList;

    // 定义列表项的视图持有者
    class ItemHolder extends RecyclerView.ViewHolder {
        public ImageView iv_pic; // 声明列表项图标的图像视图
        public TextView tv_desc; // 声明列表项描述的文本视图

        public ItemHolder(@NonNull View itemView) {
            super(itemView);
            iv_pic = itemView.findViewById(R.id.iv_pic);
            tv_desc = itemView.findViewById(R.id.tv_desc);
        }
    }

    public ImagePagerAdapter(Context context, int[] imageList, String[] descList) {
        this.mContext = context;
        this.mImageList = imageList;
        this.mDescList = descList;
    }

    // 创建视图持有者（ViewHolder），并实例化对应的布局文件
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        View itemView = LayoutInflater.from(mContext).inflate(R.layout.item_pager2, viewGroup, false);
        return new ItemHolder(itemView);
    }

    // 将数据绑定到指定位置的视图上
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        ItemHolder ih = (ItemHolder) holder;
        ih.iv_pic.setImageResource(mImageList[position]);
        ih.iv_pic.setLayoutParams(new LinearLayout.LayoutParams(
                // 设置长宽
                800, 800));
        ih.tv_desc.setText(mDescList[position]);
    }

    // 返回列表项数量
    @Override
    public int getItemCount() {
        return mImageList.length;
    }
}

条目文件item_pager2.xml

XML 复制代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:scaleType="fitCenter" />
    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>