Viewpager migrate to ViewPager2 achieve Tab tab page

ViewPager2 What is it?

ViewPager2 is the next generation version ViewPager, bringing enhanced functionality and bug fixes before; that is to solve the ViewPager the bug and do not support the RTLlayout and so on other issues, Google also give up the maintenance of ViewPager.

New features compared to ViewPager brought ViewPager2

  • Support vertical slide
  • Support RTL layouts
  • You can use DiffUtil

Related documents Links

ViewPager2 official document
ViewPager migrate to ViewPager2 official document
to migrate to ViewPager2 | AndroidDevSummit

To achieve the following results

Here Insert Picture Description

First, the use of the dependence Androidx while introducing TabLayout

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.2.0-alpha02'

Second, the use in the layout TabLayout and ViewPager2

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Third, add the Fragment to ViewPager2, need to integrateFragmentStateAdapter

public class MainActivity extends AppCompatActivity {

    private List<Fragment> list = new ArrayList<>();
    private String[] title = {"Android", "iOS", "Java"};
    private TabLayout tabLayout;
    private ViewPager2 viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("ViewPager2与TabLayout的使用");
        tabLayout = findViewById(R.id.tab);
        viewPager = findViewById(R.id.view_pager);
		//添加Fragment
        list.add(TestFragment.newInstance(title[0], "#03A9F4"));
        list.add(TestFragment.newInstance(title[1], "#8BC34A"));
        list.add(TestFragment.newInstance(title[2], "#009688"));
        viewPager.setAdapter(new MyPagerAdapter(this));
        //TabLayout与ViewPager2联动
        new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(title[position]);
            }
        }).attach();
        //监听选中的下标
        //tabLayout.addOnTabSelectedListener();
    }

    public class MyPagerAdapter extends FragmentStateAdapter {

        public MyPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
            super(fragmentActivity);
        }

        @Override
        public Fragment createFragment(int position) {
            return list.get(position);
        }

        @Override
        public int getItemCount() {
            return list.size();
        }
    }

}
  • Adapter inherited from the previous FragmentPagerAdapterchangedFragmentStateAdapter
  • ViewPager2 conjunction with TabLayout need a new TabLayoutMediatorclass that implements

TestFragment is simply loaded with a TextView not posted the code here

Fourth, the dynamic switching LTR, RTLsliding direction of ViewPager2

  • Set LTR,RTL
tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
viewPager.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);

tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
viewPager.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
  • Set the sliding direction
viewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

The above is provided by dynamic code, of course, also in a corresponding layout attributes

//布局排列方向
android:layoutDirection=""
//ViewPager2的滑动方向
android:orientation=""

Overall, use is very simple, mainly some changes in the api; as well as more advanced features you can see Google give Sample

Published 140 original articles · won praise 546 · views 540 000 +

Guess you like

Origin blog.csdn.net/a_zhon/article/details/103563181
Tab
Tab
Tab
Tab