Android ViewPager2

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示例项目结构

(Android ViewPager2 Example Project Structure

Android 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

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:

这样就结束了本教程。 您可以从下面的链接下载项目:

翻译自: https://www.journaldev.com/26148/android-viewpager2

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值