- ViewPager2 in Android with Example
- ViewPager2 的特点
- 更多关于 ViewPager2
- 换页回调方法
- 现在让我们看看如何在我们的项目中使用 ViewPager2
- XML实现
- XML实现
- Java实现
- Java实现
ViewPager2 in Android with Example
在前往 Viewpager2 之前,请让我们了解 Viewpager。你们中的大多数人都使用过 WhatsApp,当你打开 WhatsApp 时,你可以在顶部看到四个部分,Camera、Chats、Status、Calls 这些是 Viewpager。所以 Viewpager 是一个 android 小部件,用于通过使用相同的活动向左或向右滑动来从一个页面导航到另一个页面。因此,当我们使用 Viewpager 时,我们可以在一个活动中添加不同的布局,这可以通过使用Fragments来完成。 WhatsApp、Snapchat 等著名应用程序使用 Viewpager。
Viewpager2 是 Google 于 2009 年 2 月 7 日发布的 Viewpager 的更新或增强版本。它具有多种新功能。 Viewpager2 最重要的功能是 Viewpager 中不存在的,Recyclerview 使 Viewpager2 比 Viewpager 更高效。通过使用 Recyclerview,我们可以动态添加项目。如果您知道如何实现 RecyclerView ,那么您可以轻松实现 ViewPager2。
ViewPager2 的特点
- 它隐式使用 Recyclerview,是最重要的功能。
- 支持从右到左的布局。
- 支持垂直方向。
- CompositePageTransformer 被引入组合多个页面转换器
- notifyDataSetChanged() 功能齐全。
更多关于 ViewPager2
- View Group:就像 ViewPager 一样,ViewPager2 从 ViewGroup 扩展而来。 ViewGroup 是可以包含其他视图的视图。它是 View 类的子类。它是布局的基类,如 LinearLayout、 RelativeLayout 等。
- LayoutManager:LayoutManager和你在RecyclerView中使用的一样。 LayoutManager 由 Viewpager 管理,它管理视图并用于设置 ViewPager2 的方向。
- RecyclerView:Recyclerview 用于处理提供给它的组件。它将向分配给它的用户显示数据,并使 ViewPager2 更有效率。
换页回调方法
- onPageScrolled():当当前页面有滚动活动时触发该方法。
- onPageSelected():当你选择一个新页面时触发。
- onPageScrollStateChanged():当有滚动状态时触发。
设置方向
默认情况下 viewpager2 的方向是水平的。我们可以通过调用 setOrientation() 方法并将 ORIENTATION_VERTICAL 传递给它,将 viewpager2 的方向设置为垂直。对于水平方向使用
YourViewPager2Object.orientation = ViewPager2.ORIENTATION_VERTICAL
现在让我们看看如何在我们的项目中使用 ViewPager2
要使用 ViewPager2,您必须首先在 Build.gradle 文件中添加依赖项:
为此。转到 app > Gradle Scripts > build.gradle (Module: app) 然后将以下依赖项“ implementation 'androidx.viewpager2:viewpager2:1.0.0' ”写入依赖项部分,如下所示,然后单击 Sync now。
dependencies {
implementation 'androidx.viewpager2:viewpager2:1.0.0'
}
完成所有这些步骤后,现在让我们构建一个应用程序。因此,我们将构建以下应用程序。
第 1 步:创建一个新项目
在 Android Studio 的欢迎屏幕上,单击创建新项目。如果您已经打开了一个项目,请转到文件 > 新建 > 新建项目。选择一个项目模板窗口,选择 Empty Activity 并单击 Next。在名称字段中输入您的应用程序名称。从语言下拉菜单中选择 Java。
第 2 步:添加要在屏幕上显示的矢量资源
转到应用 > res > drawable > 右键单击?? > 新建 > 矢量资源并选择您选择的任何矢量资源
第 3 步:转到 activity_main.xml 并将 ViewPager2 小部件添加到其中
导航到 app > res > layout > activity_main.xml 并将以下代码添加到该文件中。下面是 activity_main.xml 文件的代码。
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"
tools:context=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</LinearLayout>
第四步:新建一个布局资源文件
转到应用 > res > 布局 > 右键单击?? > 新建 > 布局资源文件并将该文件命名为“images_holder.xml”。在该文件中插入一个 ImageView 小部件并为其提供一个 ID。这个布局文件将保存我们的图像。 下面是 images_holder.xml 文件的代码。
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">
<ImageView
android:id="@+id/images"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
第 5 步:创建适配器类
转到应用程序 > java > 右键单击??第一个包名称 > 新建 > java 类名称,该类为 ViewPager2Adapter。适配器是使用 Recyclerview 的重要类。因为它包含了所有处理 RecyclerView 的重要方法。下面是 Adapter 类的实现。为了更好地理解注释,代码中添加了注释。 下面是 ViewPager2Adapter.java 文件的代码。代码中添加了注释,以便更详细地理解代码。
Java实现
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
class ViewPager2Adapter extends RecyclerView.Adapter<ViewPager2Adapter.ViewHolder> {
// Array of images
// Adding images from drawable folder
private int[] images = {R.drawable.ic_baseline_looks_one_24, R.drawable.ic_baseline_looks_two_24, R.drawable.ic_baseline_looks_3_24,
R.drawable.ic_baseline_looks_4_24, R.drawable.ic_baseline_looks_5_24};
private Context ctx;
// Constructor of our ViewPager2Adapter class
ViewPager2Adapter(Context ctx) {
this.ctx = ctx;
}
// This method returns our layout
@NonNull
@Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(ctx).inflate(R.layout.images_holder, parent, false);
return new ViewHolder(view);
}
// This method binds the screen with the view
@Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// This will set the images in imageview
holder.images.setImageResource(images[position]);
}
// This Method returns the size of the Array
@Override public int getItemCount() {
return images.length;
}
// The ViewHolder class holds the view
public static class ViewHolder extends RecyclerView.ViewHolder {
ImageView images;
public ViewHolder(@NonNull View itemView) {
super(itemView);
images = itemView.findViewById(R.id.images);
}
}
}
第 6 步:使用 MainActivity.java 文件
转到 MainActivity.java 文件并参考以下代码。下面是 MainActivity.java 文件的代码。代码中添加了注释,以便更详细地理解代码。
Java实现
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
public class MainActivity extends AppCompatActivity {
// Create object of ViewPager2
private ViewPager2 viewPager2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing the viewpager2 object
// It will find the view by its id which
// you have provided into XML file
viewPager2 = findViewById(R.id.viewpager);
// Object of ViewPager2Adapter
// this will passes the
// context to the constructor
// of ViewPager2Adapter
ViewPager2Adapter viewPager2Adapter = new ViewPager2Adapter(this);
// adding the adapter to viewPager2
// to show the views in recyclerview
viewPager2.setAdapter(viewPager2Adapter);
// To get swipe event of viewpager2
viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
// This method is triggered when there is any scrolling activity for the current page
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
// triggered when you select a new page
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
}
// triggered when there is
// scroll state will be changed
@Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
});
}
}
输出:
https://media.geeksforgeeks.org/wp-content/uploads/20210510090624/1620617104978.mp4
注:本文由VeryToolz翻译自 ViewPager2 in Android with Example ,非经特殊声明,文中代码和图片版权归原作者 Pushpender007所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。