Viewpager迁移至ViewPager2实现Tab标签页面

ViewPager2是什么呢?

ViewPager2 是 ViewPager 的下一代版本,带来了更强的功能并修复了之前的 bug;也就是解决了ViewPager的bug和不支持RTL布局等等其他问题,Google同时也放弃对ViewPager的维护了。

ViewPager2相比ViewPager带来的新功能

  • 支持竖直滑动
  • 支持RTL布局
  • 可以使用DiffUtil

相关文档链接

ViewPager2官方文档
ViewPager迁移至ViewPager2官方文档
迁移至 ViewPager2 | AndroidDevSummit

实现的效果如下

在这里插入图片描述

一、使用Androidx的依赖,同时引入TabLayout

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

二、在布局中使用TabLayout和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>

三、为ViewPager2添加Fragment,需要集成FragmentStateAdapter

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由之前的FragmentPagerAdapter改成了FragmentStateAdapter
  • ViewPager2与TabLayout联动需要new 一个TabLayoutMediator类来实现

TestFragment就是简单的加载了一个TextView代码这里就不贴了

四、动态切换LTRRTL、ViewPager2的滑动方向

  • 设置LTRRTL
tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
viewPager.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);

tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
viewPager.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
  • 设置滑动方向
viewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

上面是通过代码动态设置的,当然在布局上也是有对应的属性

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

总体来说使用还是很简单的,主要还是一些api的变化;同时还有更多高级的功能可以查看Google给的Sample

Code-Porter CSDN认证博客专家 代码界的扛把子
我从事多年Android软件开发及物联网方面开发,熟悉Java,Android,前端、数据库开发;对技术要求苛刻、热爱分享、热爱新技术
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付 5.20元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值