AndroidViewPager2

What’s this ?

​ ViewPager2，它可以用来制作可以滑动切换的小卡片。相当于Flutter里面的 PageView 。

使用方法

​ 在想要使用的地方加入 ViewPager2 节点，创建每一项子节点的布局文件，并实现 ViewPager2 的适配器 adaptor 。大体步骤和ListView 的使用差不多。

​ 涉及到以下三个文件。activity_pages.xml, viewpager_item.xml, CardItem.java, ViewPagerAdaptor.java 。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".PagesActivity"
    android:background="@color/black">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:layout_marginHorizontal="40dp"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginHorizontal="16dp"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:cardCornerRadius="16dp"
        app:cardElevation="8dp"
        >
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/itemImg"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:src="@drawable/girlandcat"
                android:scaleType="centerCrop"/>
            <TextView
                android:id="@+id/itemTitle"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_constraintTop_toBottomOf="@id/itemImg"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:text="Study"
                android:textSize="35sp"
                android:textStyle="bold"
                android:fontFamily="cursive"
                android:gravity="center"/>
            <TextView
                android:id="@+id/itemContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxHeight="130dp"
                android:overScrollMode="ifContentScrolls"
                app:layout_constraintTop_toBottomOf="@id/itemTitle"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:text="As you can see,I want to study and make my own progress."
                android:textSize="20sp"
                android:textStyle="bold"
                android:fontFamily="cursive"
                android:gravity="start"
                android:layout_marginHorizontal="20dp"
                />
            <Button
                android:layout_width="60dp"
                android:layout_height="60dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="10dp"
                android:background="@drawable/card_button_background"/>

        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

package cn.kahvia.androiduidesign.pojo;

public class CardItem {
    int imageId;
    String title,content;

    public CardItem(int imageId, String title, String content) {
        this.imageId = imageId;
        this.title = title;
        this.content = content;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

package cn.kahvia.androiduidesign.adaptors;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

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

import java.util.List;

import cn.kahvia.androiduidesign.R;
import cn.kahvia.androiduidesign.pojo.CardItem;

//继承时传入泛型为内部类ViewHolder，这个Holder用来保存通过view findViewById方法获得的组件，这样只需要find一次足矣
public class ViewPagerAdaptor extends RecyclerView.Adapter<ViewPagerAdaptor.ViewHolder> {
    //要展示的列表数据
    List<CardItem> cardItems;

    //构造函数，必需。
    public ViewPagerAdaptor(List<CardItem> cardItems){
        this.cardItems=cardItems;
    }

    //内部类
    public static class ViewHolder extends RecyclerView.ViewHolder{
        ImageView image;
        TextView title;
        TextView content;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            image=itemView.findViewById(R.id.itemImg);
            title=itemView.findViewById(R.id.itemTitle);
            content=itemView.findViewById(R.id.itemContent);
        }
    }

    @NonNull
    @Override//创建ViewHolder
    public ViewPagerAdaptor.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //创建一个view，在父节点的上下文中填充一个View
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.viewpager_item,parent,false);
        //创建一个ViewHolder。多个ViewHolder可以实现View的复用，无需反复创建View。
        return new ViewHolder(view);
    }

    @Override//快速赋值，实现view的迅速加载
    public void onBindViewHolder(@NonNull ViewPagerAdaptor.ViewHolder holder, int position) {
        CardItem cardItem=cardItems.get(position);
        holder.image.setImageResource(cardItem.getImageId());
        holder.title.setText(cardItem.getTitle());
        holder.content.setText(cardItem.getContent());

    }

    @Override
    public int getItemCount() {
        return cardItems.size();
    }


}

ps

• ViewPager2 的子节点要设置为 match_parent .

效果图