Android ViewPager2
自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的方向。