It’s been hardly a week since Google has released the new ViewPager2’s alpha version. We’re here with our very own introduction to ViewPager2 through a sample Android Application.
自Google发布新的ViewPager2的Alpha版本以来,已经差不多一周了。 我们在这里通过示例Android应用程序对ViewPager2进行了自己的介绍。
ViewPager has been an important component of the UI since a long while. Still, it always gives chills to developers when they try to implement certain features. Features such as updating Fragment content, swiping right to left and swiping vertical require a lot of effort.
很长时间以来,ViewPager一直是UI的重要组成部分。 尽管如此,当开发人员尝试实现某些功能时,它总是让他们感到不寒而栗。 更新片段内容,从右向左滑动和垂直滑动等功能需要大量的精力。
Things like these have brought ViewPager2 into the scene. Let’s see what it has in store for us.
诸如此类的事情将ViewPager2带入了现场。 让我们看看它为我们准备了什么。
Android ViewPager2 (Android ViewPager2)
In order to use ViewPager2 in your application add the following dependency in the build.gradle
.
为了在您的应用程序中使用ViewPager2,请在build.gradle中添加以下依赖build.gradle
。
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
Android ViewPager2功能 (Android ViewPager2 Features)
Following are the features that ViewPager2 brings to the table:
以下是ViewPager2带来的功能:
- Right to Left Layout Support 从右到左布局支持
- Vertical Orientation 垂直方向
- Use of RecyclerView implicitly 隐式使用RecyclerView
- Shift from PagerAdapter to RecyclerView.Adapter 从PagerAdapter转移到RecyclerView.Adapter
- Better control of Animation on Page change thanks to RecyclerView 借助RecyclerView,可以更好地控制页面更改上的动画
- A Smarter Page Change Listener 智慧的页面更改监听器
- A working
notifyDataSetChanged
工作的notifyDataSetChanged
In order to add ViewPager2 in your layout add the following snippet:
为了在布局中添加ViewPager2 ,请添加以下代码段:
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
OnPageChangeListener
, we had to override all three methods. In ViewPager2 it is no longer necessary, thus preventing boilerplate code.
OnPageChangeListener
,我们必须重写所有三个方法。 在ViewPager2中,它不再是必需的,从而防止了样板代码。
If you check the implementation of ViewPager2, it uses RecyclerView within. Thus if you’ve implemented RecyclerView, implementing ViewPager2 wouldn’t be much different.
如果检查ViewPager2的实现,它将在其中使用RecyclerView 。 因此,如果您实现了RecyclerView,则实现ViewPager2不会有太大不同。
You can use fragments inside ViewPager2 as well as we did in ViewPager.
您可以像在ViewPager中一样使用ViewPager2内部的片段。
You just need to use FragmentStateAdapter
instead of FragmentStatePagerAdapter
.
您只需要使用FragmentStateAdapter
而不是FragmentStatePagerAdapter
。
In order to register a Listener on ViewPager2, we need to do the following:
为了在ViewPager2上注册侦听器,我们需要执行以下操作:
viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
});
Note: You can override either or all of the methods of the callback.
注意:您可以覆盖回调的任何一个或所有方法。
In the following section, we’ll be implementing ViewPager2 using the RecyclerView.Adapter pattern.
Implementation using FragmentStateAdapter is similar to what we did in ViewPager 1
在下一节中,我们将使用RecyclerView.Adapter模式实现ViewPager2。
使用FragmentStateAdapter的实现与我们在ViewPager 1中所做的类似
Android ViewPager2示例项目结构
Android Viewpager2示例项目结构
![Android Viewpager2项目结构](https://i-blog.csdnimg.cn/blog_migrate/2cbf68cfdb67fd0b481e7b16076e52e1.png)
Android Viewpager2示例项目结构
码
(Android ViewPager2 Example Project StructureAndroid Viewpager2 Example Project Structure
Code
)Coming to the code, we’ve used androidx packaging system.
进入代码,我们使用了androidx打包系统 。
The code for the activity_main.xml file is given below:
下面给出了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>
The code for the MainActivity.java class is given below:
MainActivity.java类的代码如下:
package com.journaldev.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));
}
}
Let’s look at the layout for each of the viewpager screens:
让我们看一下每个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>
The code for the ViewPagerAdapter.java
class is given below:
下面给出了ViewPagerAdapter.java
类的代码:
package com.journaldev.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);
}
}
});
}
}
}
In the above code, we’ve passed the ViewPager2 instance to demonstrate the orientation toggle. On the button click, we change the orientation of the ViewPager2.
在上面的代码中,我们传递了ViewPager2实例来演示方向切换。 在按钮上单击,我们更改ViewPager2的方向。
The output of the above application in action is given below:
上面应用程序的输出如下:
![Android Viewpager2 Output](https://cdn.journaldev.com/wp-content/uploads/2019/02/android-viewpager2-output.gif)
Android Viewpager2 Example App
Android Viewpager2示例应用程序
ViewPager2 has just been released and few known issues such as clipToPadding
have been reported. We predict a stable version of ViewPager2 to be out with Android Q this year.
ViewPager2刚刚发布,并且几乎没有报告过诸如clipToPadding
已知问题。 我们预计今年将在Android Q上发布稳定版的ViewPager2。
To know the other main issues, visit this link.
要了解其他主要问题,请访问此链接 。
That brings an end to this tutorial. You can download the project from the link below:
这样就结束了本教程。 您可以从下面的链接下载项目: