Android ViewPager2

时间:2020-02-23 14:29:23  来源:igfitidea点击:

自Google发布新的ViewPager2的Alpha版本以来,已经差不多一周了。
我们在这里通过示例Android应用程序对ViewPager2进行了自己的介绍。

很长一段时间以来,ViewPager一直是UI的重要组成部分。
尽管如此,当开发人员尝试实现某些功能时,它总是让他们感到不寒而栗。
更新片段内容,从右向左滑动和垂直滑动等功能需要大量的精力。

诸如此类的事情将ViewPager2带入了现场。
让我们看看它为我们准备了什么。

Android ViewPager2

为了在您的应用程序中使用ViewPager2,请在build.gradle中添加以下依赖项。

implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

Android ViewPager2功能

以下是ViewPager2带来的功能:

  • 从右到左布局支持
  • 垂直方向
  • 隐式使用RecyclerView
  • 从PagerAdapter转移到RecyclerView.Adapter
  • 借助RecyclerView,可以更好地控制页面更改上的动画
  • 智慧的页面更改监听器
  • 有效的notifyDataSetChanged

为了在布局中添加ViewPager2,请添加以下代码段:

<androidx.viewpager2.widget.ViewPager2
      android:id="@+id/viewPager2"
      android:layout_width="match_parent"
      android:layout_height="match_parent"

在较旧的ViewPager的addOnPageChangeListener方法回调接口" OnPageChangeListener"中,我们必须覆盖所有三个方法。
在ViewPager2中,它不再是必需的,从而避免了样板代码。

如果检查ViewPager2的实现,它将其中使用RecyclerView。
因此,如果您实现了RecyclerView,则实现ViewPager2不会有太大不同。

您可以像在ViewPager中一样使用ViewPager2内部的片段。

您只需要使用" FragmentStateAdapter"而不是" FragmentStatePagerAdapter"即可。

为了在ViewPager2上注册侦听器,我们需要执行以下操作:

viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
          @Override
          public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
              super.onPageScrolled(position, positionOffset, positionOffsetPixels);
          }
      });

注意:您可以覆盖回调的任何一个或者所有方法。

在以下部分中,我们将使用RecyclerView.Adapter模式实现ViewPager2。
使用FragmentStateAdapter的实现类似于我们在ViewPager 1中所做的

Android ViewPager2示例项目结构

Android Viewpager2示例项目结构

代码

在代码方面,我们使用了androidx打包系统。

下面给出了activity_main.xml文件的代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/viewPager2"
      android:layout_width="match_parent"
      android:layout_height="match_parent"

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java类的代码如下:

package com.theitroad.androidviewpager2;

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

import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

  ViewPager2 viewPager2;

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

      viewPager2 = findViewById(R.id.viewPager2);

      List<String> list = new ArrayList<>();
      list.add("First Screen");
      list.add("Second Screen");
      list.add("Third Screen");
      list.add("Fourth Screen");

      viewPager2.setAdapter(new ViewPagerAdapter(this, list, viewPager2));

  }
}

让我们看一下每个Viewpager屏幕的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="https://schemas.android.com/tools"
  android:id="@+id/container"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <androidx.appcompat.widget.AppCompatTextView
      android:id="@+id/tvTitle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:textColor="@android:color/white"
      android:textSize="32sp"
      tools:text="item" 

  <androidx.appcompat.widget.AppCompatButton
      android:id="@+id/btnToggle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:text="Toggle Orientation" 

</RelativeLayout>

下面给出了ViewPagerAdapter.java类的代码:

package com.theitroad.androidviewpager2;

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

import java.util.List;

import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;

public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {

  private List<String> mData;
  private LayoutInflater mInflater;
  private ViewPager2 viewPager2;

  private int[] colorArray = new int[]{android.R.color.black, android.R.color.holo_blue_dark, android.R.color.holo_green_dark, android.R.color.holo_red_dark};

  ViewPagerAdapter(Context context, List<String> data, ViewPager2 viewPager2) {
      this.mInflater = LayoutInflater.from(context);
      this.mData = data;
      this.viewPager2 = viewPager2;
  }

  @Override
  public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      View view = mInflater.inflate(R.layout.item_viewpager, parent, false);
      return new ViewHolder(view);
  }

  @Override
  public void onBindViewHolder(ViewHolder holder, int position) {
      String animal = mData.get(position);
      holder.myTextView.setText(animal);
      holder.relativeLayout.setBackgroundResource(colorArray[position]);
  }

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

  public class ViewHolder extends RecyclerView.ViewHolder {
      TextView myTextView;
      RelativeLayout relativeLayout;
      Button button;

      ViewHolder(View itemView) {
          super(itemView);
          myTextView = itemView.findViewById(R.id.tvTitle);
          relativeLayout = itemView.findViewById(R.id.container);
          button = itemView.findViewById(R.id.btnToggle);

          button.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {

                  if(viewPager2.getOrientation() == ViewPager2.ORIENTATION_VERTICAL)
                  viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
                  else{
                      viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
                  }
              }
          });
      }
  }

}

在上面的代码中,我们传递了ViewPager2实例来演示方向切换。
在按钮上单击,我们更改ViewPager2的方向。