How to use ViewPager2 to achieve page sliding switching effect

1. Introduction

In many applications, we often see a scene of sliding switching between multiple pages. ViewPager2 is an upgraded version of ViewPager. This article will briefly introduce how to use ViewPager2, FragmentStateAdapter and Fragment to achieve sliding switching between pages.

2. Implement page sliding switching

2.1 Introducing ViewPager2 library

To use ViewPager2, you need to introduce the ViewPager2 library. The method is as follows:

implementation "androidx.viewpager2:viewpager2:1.0.0"

2.2 Using ViewPager2

Using ViewPager2 in a layout, the example is as follows:

<androidx..ViewPager2
    android:
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2.3 Building a Fragment

This Fragment is only for a simple demonstration, and its layout is as follows:

<LinearLayout xmlns:andro
    xmlns:tools="/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@color/black"/>

</LinearLayout>

The implementation of the ContentFragment class is as follows:

public class ContentFragment extends Fragment {
    private String content;

    public ContentFragment(String content) {
         = content;
    }

    private TextView tv_content;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = (.fragment_content, container, false);
        tv_content = (.tv_content);
        tv_content.setText(content);
        return view;
    }

    public void setContent(String content) {
         = content;
        tv_content.setText(content);
    }
}

2.4 Inheriting FragmentStateAdapter

Create a custom class ContentPagerAdapter, let it inherit FragmentStateAdapter, and implement createFragment(int position) and getItemCount() methods. The example is as follows:

public class ContentPagerAdapter extends FragmentStateAdapter {
    private List<ContentFragment> datas;

    public ContentPagerAdapter(@NonNull FragmentActivity fragmentActivity,List<ContentFragment> datas) {
        super(fragmentActivity);
         = datas;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return (position);
    }

    @Override
    public int getItemCount() {
        return ();
    }
}

2.5 Bind ViewPager2 with the adapter

After binding ViewPager2 to the adapter, you can realize page sliding switching. The example is as follows:

datas = new ArrayList<>();
(new ContentFragment("Page 1"));
(new ContentFragment("Page 2"));
(new ContentFragment("Page 3"));
(new ContentFragment("Page 4"));
(new ContentFragment("Page 5"));
contentPagerAdapter = new ContentPagerAdapter(this, datas);
(contentPagerAdapter);

2.6 Sliding toggle vertically

ViewPager2 not only supports horizontal sliding, but also vertical sliding. It is also quite simple to achieve vertical sliding. Add the android:orientation="vertical" attribute to the layout file, as shown below:

<androidx..ViewPager2
    android:
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"/>

Or call ViewPager2's setOrientation (ViewPager2.ORIENTATION_VERTICAL) method in the code can also enable ViewPager2 to slide vertically.

2.7 Fragment update

When the Fragment collection changes and needs to be updated, it is also very convenient to use the FragmentStateAdapter to update. Since ViewPager2 is implemented based on RecyclerView, you can call notifyItemChanged(int position), notifyItemInserted(int position) and other methods to update when updating data.

3. Summary

Using ViewPager2, FragmentStateAdapter and Fragment can easily achieve sliding switching between pages. It not only supports horizontal sliding, but also enables vertical sliding through simple settings. Flexible use of ViewPager2 can achieve actual needs.

This is the article about how Android uses ViewPager2 to achieve page sliding switching effect. For more related contents of Android ViewPager2 page sliding switching, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!