安卓APP_ 布局(8) —— 基于 RecyclerView 的 ViewPager2翻页

viewpager2 是对RecyclerView 的封装(所以viewpager2 自带懒加载方案),相对于viewpager,在实际项目中,更推荐使用viewpager2 。

实现效果

目前来说跟viewpager一毛一样

在这里插入图片描述

(1)创建viewpager2

activity_main.xml中,更改为LinearLayout布局,再创建viewpager2布局。
在这里插入图片描述

如果找不到viewpager2,则需要添加依赖:
在这里插入图片描述

(2)构建viewPage2专属adapter

viewPage的显示需要适配别的数据,相当于一个容器,在容器中显示什么数据需要用户在使用的时候去适配。

在下图中,先是通过find创建viewPage2对象,然后用.setAdapter设置适配器。

Adapter类实例化了一个对象,并把这个对象作为适配器设置的传入参数,如下图:
在这里插入图片描述

接下来就是要定义一个Adapter类,这个类专门用于适配viewPage2
在这里插入图片描述
这个Adapter类要继承于RecyclerView.Adapter,并实现其里面的全部方法:(alt+enter选择继承)
在这里插入图片描述实现如下图的方法:
在这里插入图片描述

(3)定义要适配的界面

创建一个新的布局

在这里插入图片描述
如下图:
在这里插入图片描述
当前UI框架如下图:
在这里插入图片描述

其实现在ViewPager已经实现了左滑右滑,只是要对Adapter进行操作。

定义一个内部类去封装RecyclerView.ViewHolder返回的数据,这个内部类为ViewPagerViewHolder,将要替换RecyclerView.ViewHolder
在这里插入图片描述


传入泛型
在这里插入图片描述

按住ctrl点进Adapter看看,发现是拓展自ViewHolder的一个泛型,就是传入的参数要是ViewHolder的一个泛型。
在这里插入图片描述
正是上面创建的内部类ViewPagerViewHolder。更改为传入泛型后,报错了,更改掉即可。
在这里插入图片描述
至此,adpter雏形就完成了。


(4)解析界面

解析要适配的xml
在这里插入图片描述
再解析xml里面的具体内容,分别是Layout和Textview.
在这里插入图片描述

(5)绑定不同的页面数据实现左右切换

绑定内容
在这里插入图片描述实现绑定
在这里插入图片描述

数据怎么变化,未来可以使用架构MVP,MVM,MVC,这些架构有专门传递数据的值。

具体细节在代码中体现

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //为名为viewPage2的布局实例化一个对象
        ViewPager2 viewPager2 = findViewById(R.id.viewPage2);
        //实例化一个Adapter对象
        ViewPager2Adapter viewPager2Adapter = new ViewPager2Adapter();
        //设置名为viewPage2的布局的Adapter
        viewPager2.setAdapter(viewPager2Adapter);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewPage2"
        android:background="#ffff00"/>

</LinearLayout>

item_pager.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:id="@+id/container">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvTitle"
        android:layout_centerInParent="true"
        android:textColor="#ff4532"
        android:textSize="40dp"
        android:text="hello"/>

</RelativeLayout>

item_pager.xml

/*为什么ViewPagerAdapter继承的会是RecyclerView.Adapter呢?
  因为点进类ViewPager2发现其实就是对RecyclerView的适配,有很多RecyclerView的影子*/
public class ViewPager2Adapter extends RecyclerView.Adapter <ViewPager2Adapter.ViewPagerViewHolder>{

    private List<String> titles = new ArrayList<>();
    private List<Integer> colors = new ArrayList<>();

    //构造方法:适配页面的数据(在viewPage初始化的时候就要初始化ArrayList)
    public ViewPager2Adapter(){
        titles.add("chen");
        titles.add("li");
        titles.add("chen");
        titles.add("mei");
        titles.add("wo");
        titles.add("shuai");

        colors.add(R.color.white);
        colors.add(R.color.teal_700);
        colors.add(R.color.teal_200);
        colors.add(R.color.purple_700);
        colors.add(R.color.purple_500);
        colors.add(R.color.purple_200);
    }

    @NonNull
    @Override
    //这个方法返回的是类 ViewPagerViewHolder 所对应的一个对象,必须是一个java代码
    //怎样创建一个view呢:解析xml。
    public ViewPagerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //解析xml        这个view来自哪里呢?用下面的解析器进行解析
        return new ViewPagerViewHolder(LayoutInflater.from
                (parent.getContext()).inflate(R.layout.item_pager,parent,false));
    }

    @Override
    //绑定不同的页面数据,适配不同的内容,让item_pager.xml的数据动态变化   position可以标识item
    public void onBindViewHolder(@NonNull ViewPagerViewHolder holder, int position) {
        holder.mTv.setText(titles.get(position));
        //R.color.white传送的是资源id,所以要用setBackgroundResource,而不是setBackgroundColor
        holder.mContainer.setBackgroundResource(colors.get(position));
    }

    @Override
    //滚动的页面数量
    public int getItemCount() {
        //多出实际值程序闪退
        return 6;
    }

    //定义一个内部类去封装RecyclerView.ViewHolder返回的数据
    class ViewPagerViewHolder extends RecyclerView.ViewHolder{
        //这个ViewPagerViewHolder正是用于解析item_pager.xml的
        TextView mTv;
        RelativeLayout mContainer;

        //实现构造函数
        public ViewPagerViewHolder(@NonNull View itemView) {
            super(itemView);
            //解析id为container的item_pager.xml根布局:RelativeLayout
            mContainer = itemView.findViewById(R.id.container);
            //解析item_pager.xml下的TextView
            mTv = itemView.findViewById(R.id.tvTitle);
        }
    }
}

版权声明:本文为weixin_44742824原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。