18.2、Android --ViewPager2 基础学习--滑动效果

ViewPager2和ViewPager对比

1、ViewPager2内部实现是RecyclerView，所以ViewPager2的性能更高。
2、ViewPager2可以实现竖向滑动，ViewPager只能横向滑动。
3、ViewPager2只有一个adapter，FragmentStateAdapter继承自RecyclerView.Adapter。
而ViewPager有两个adapter,FragmentStatePagerAdapter和FragmentPagerAdapter，均是继承PagerAdapter。
FragmentStatePagerAdapter和FragmentPagerAdapter两者的区别是FragmentStatePagerAdapter不可以缓存，FragmentPagerAdapter可以缓存。
4、ViewPager2模式实现了懒加载，默认不进行预加载。ViewPager会进行预加载，懒加载需要自己去实现

使用区别

• Adapter：ViewPager是ViewPagerAdapter，ViewPager2使用RecyclerView.Adapter<VH>
• 滑动监听:ViewPager是addPageChangeListener，ViewPager2使用registerOnPageChangeCallback

示例

建立界面实现滑动效果。

1、引入ViewPager2依赖包

Frist\app\build.gradle中的dependencies{}添加viewpager2依赖包

	//添加 ViewPager2 的依赖包
    implementation 'androidx.viewpager2:viewpager2:1.0.0'

2、主界面layout布局

主界面到没有非常特别的，就时应用
res/layout/activity_view_pager2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ViewPager2Activity">
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/lightgray"
        android:id="@+id/vp2_one"
        />
</LinearLayout>

3、子布局

res/layout/view_pager2_itm_one.xml
特殊的就是给RelativeLayout 设置id ，主要是后面用于背景色改变

<?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/activity_view_pager2"
    >
    <TextView
        android:id="@+id/tv_vp2_itm1_one"
        android:text="ViewPager2"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="100dp"
        />
</RelativeLayout>

4、数据初始化

1、数据存储类Bean
java/com/pha/first/bean/ViewPager2Bean.java

package com.pha.first.bean;

public class ViewPager2Bean {
    String title;
    Integer color;
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public Integer getColor() {
        return color;
    }
    public void setColor(Integer color) {
        this.color = color;
    }
}

2、数据赋值
java/com/pha/first/ViewPager2Activity.java
中创建变量

 private List<ViewPager2Bean> list_vp2_data = new ArrayList<>();

数据赋值(新建方法，并在onCreat调用)

private void InitData() {
        ViewPager2Bean vp2_bean = new ViewPager2Bean();
        vp2_bean.setTitle("one");
        vp2_bean.setColor(R.color.red);
        list_vp2_data.add(vp2_bean);
        ViewPager2Bean vp2_bean2 = new ViewPager2Bean();
        vp2_bean2.setTitle("two");
        vp2_bean2.setColor(R.color.yellow);
        list_vp2_data.add(vp2_bean2);
        ViewPager2Bean vp2_bean3 = new ViewPager2Bean();
        vp2_bean3.setTitle("three");
        vp2_bean3.setColor(R.color.green);
        list_vp2_data.add(vp2_bean3);
        ViewPager2Bean vp2_bean4 = new ViewPager2Bean();
        vp2_bean4.setTitle("four");
        vp2_bean4.setColor(R.color.gray);
        list_vp2_data.add(vp2_bean4);
    }

6、创建Adapter

可以看出ViewPager2是一个容器，我们可以看出数据显示我们需要通过Adapter实现
在文章开始也可以看出：ViewPager2继承RecyclerView.Adapter<VH>
我们看到RecyclerView.Adapter可以联想到之前的RecyclerView控件使用，和他的Adapter一样。
先把代码发出来
java/com/pha/first/bean/ViewPager2Bean.java

package com.pha.first.adapter;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;

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

import com.pha.first.R;
import com.pha.first.bean.ViewPager2Bean;

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

public class ViewPager2Adapter extends RecyclerView.Adapter<ViewPager2Adapter.ViewPager2ViewHolder>{
    private static final String TAG =  "ViewPager2Adapter";
    private List<ViewPager2Bean> list_vp2_data;
    private  Context context;

    public ViewPager2Adapter(List<ViewPager2Bean> list_vp2_data,Context context) {
        this.list_vp2_data = list_vp2_data;
        this.context = context;
    }

    @NonNull
    @Override
    public ViewPager2Adapter.ViewPager2ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.view_pager2_itm_one,parent,false);
        return new ViewPager2ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewPager2Adapter.ViewPager2ViewHolder holder, int position) {
        Log.e(TAG, position+"onBindViewHolder: "+list_vp2_data.get(position).getTitle() +"^"+list_vp2_data.get(position).getColor());
        holder.tv_vp2_itm1_one.setText(list_vp2_data.get(position).getTitle());
        holder.container.setBackgroundResource(list_vp2_data.get(position).getColor());
    }

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

    public class ViewPager2ViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_vp2_itm1_one;
        private RelativeLayout container;
        public ViewPager2ViewHolder(@NonNull View itemView) {
            super(itemView);
            container =itemView.findViewById(R.id.activity_view_pager2);
            tv_vp2_itm1_one=itemView.findViewById(R.id.tv_vp2_itm1_one);
        }
    }
}

我们通过和RecyclerView控件中创建的Adaper基本是一样的。
唯一区别 onCreateViewHolder的使用是不同
在RecyclerView控件使用的是

	View view = View.inflate(context, R.layout.recyler_view_itm,null);

而在这使用的是

 View view = LayoutInflater.from(context).inflate(R.layout.view_pager2_itm_one,parent,false);

为什么这么写呢，
主要是ViewPager2，是懒加载，不能初始化的时候就将布局加载进去

• 如果root为null，无论attachToRoot为true或者false，效果都是一样的
• 如果root不为null，attachToRoot为true，表示将layout布局添加到root布局中
• 如果root不为null，attachToRoot为false，表示不将layout布局添加到root布局，若要添加则需要手动addView
• 如果root不为null，不设置attachToRoot(即调用两个参数的方法)，情况和(2)中一样

报错信息
java.lang.IllegalStateException: Pages must fill the whole ViewPager2 (use match_parent)

只需要改为

 View view = LayoutInflater.from(context).inflate(R.layout.view_pager2_itm_one,parent,false);

6、展示ViewPager

		ViewPager2 vp2_one = findViewById(R.id.vp2_one);
        ViewPager2Adapter viewPager2Adapter = new ViewPager2Adapter(list_vp2_data,this);
        vp2_one.setAdapter(viewPager2Adapter);

java/com/pha/first/ViewPager2Activity.java最终代码

package com.pha.first;

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

import android.os.Bundle;

import com.pha.first.adapter.ViewPager2Adapter;
import com.pha.first.bean.ViewPager2Bean;

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

public class ViewPager2Activity extends AppCompatActivity {
    private List<ViewPager2Bean> list_vp2_data = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager2);

        //  初始化数据
        InitData();
        ViewPager2 vp2_one = findViewById(R.id.vp2_one);
        ViewPager2Adapter viewPager2Adapter = new ViewPager2Adapter(list_vp2_data,this);
        vp2_one.setAdapter(viewPager2Adapter);
    }

    private void InitData() {
        ViewPager2Bean vp2_bean = new ViewPager2Bean();
        vp2_bean.setTitle("one");
        vp2_bean.setColor(R.color.red);
        list_vp2_data.add(vp2_bean);
        ViewPager2Bean vp2_bean2 = new ViewPager2Bean();
        vp2_bean2.setTitle("two");
        vp2_bean2.setColor(R.color.yellow);
        list_vp2_data.add(vp2_bean2);
        ViewPager2Bean vp2_bean3 = new ViewPager2Bean();
        vp2_bean3.setTitle("three");
        vp2_bean3.setColor(R.color.green);
        list_vp2_data.add(vp2_bean3);
        ViewPager2Bean vp2_bean4 = new ViewPager2Bean();
        vp2_bean4.setTitle("four");
        vp2_bean4.setColor(R.color.gray);
        list_vp2_data.add(vp2_bean4);
    }

}