TabLayout+ViewPager2+Fragemnt实现切换不同界面

技术点总结:

首先在需要在build.gradle中添加

    //TabLayout
    implementation "com.google.android.material:material:1.1.0"
    //viewpager2
    implementation 'androidx.viewpager2:viewpager2:1.0.0'

然后在界面布局中添加谷歌的TabLayout以及ViewPager2

<!--app:tabGravity="fill" 填充整个   app:tabIndicatorColor="@color/colorPrimaryDark" 下标指示器显示颜色   app:tabMode="fixed" 悬浮在上面
app:tabSelectedTextColor="@color/colorPrimaryDark" 设置选中时字体的颜色 app:tabTextColor="@color/colorAccent" 设置文本颜色-->
    <!--需要在gradle中添加 implementation "com.google.android.material:material:1.1.0"  -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tl_order_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorPrimaryDark"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@color/colorAccent"/>

<!--    android:orientation="horizontal" 设置滚动方式 为横向滚动-->
    <!--需要在gradle中添加 implementation 'androidx.viewpager2:viewpager2:1.0.0'-->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_order_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"/>

然后去ui文件中设置该界面布局以及导航栏的标签
 

private String[] title={"全部", "待支付", "已支付", "已入住", "已取消","NoShow"};
private int[] orderStateIdTitle = {0, 1, 2, 3, 5, 6};//数据库对应这里主要是将TabLayout+ViewPager2建立关联   
//TabLayout 顶部分类标题
        TabLayout tlOrderList = view.findViewById(R.id.tl_order_title);
        //ViewPager2 OrderFragment的容器
        ViewPager2 vpOrderContainer = view.findViewById(R.id.vp_order_container);

        //===自定义myActionBar
        MyActionBar myActionBar = view.findViewById(R.id.myActionBar);
        myActionBar.setData("订单", 0, 0, null);

        //实例化适配器
        MyFragmentStateAdapter myAdapter=new MyFragmentStateAdapter(getActivity());
        //给ViewPager2设置适配器
        vpOrderContainer.setAdapter(myAdapter);
        //ViewPager2设置预加载 传入大于1的值来设置预加载数量,默认不预加载
        vpOrderContainer.setOffscreenPageLimit(1);
        //TabLayout+ViewPager2建立关联
        new TabLayoutMediator(tlOrderList, vpOrderContainer, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                // tab:当前处于选中状态的Tab对象
                // position:当前Tab所处的位置
                tab.setText(title[position]);
            }
        }).attach();// 不要忘记attach(),否则没效果


在这里MyFragmentStateAdapter类中继承FragmentStateAdapter以便让
ViewPager2+FragmentStateAdapter建立关联,定义一个构造器存放Fragment数组对象,重写两个父类方法达到切换到对应position索引界面的效果,然后在这个类里面定义一个Fragment数组以便从另外一个OderListFragment界面,返回对应显示的内容

    //自定义适配器  ViewPager2的适配器继承FragmentStateAdapter
    class MyFragmentStateAdapter extends FragmentStateAdapter{
        //存放Fragment
        private Fragment[] fragments;

        //构造器
        public MyFragmentStateAdapter(@NonNull FragmentActivity fragmentActivity) {
            super(fragmentActivity);
            fragments=new Fragment[title.length];
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            //Fragment懒加载
            if (fragments[position]==null){
                //传递参数到OderListFragment
                Bundle bundle=new Bundle();//相当于多个键值对集合
                bundle.putInt("orderStateId",orderStateIdTitle[position]);

                
                OderListFragment oderListFragment=new OderListFragment();
                oderListFragment.setArguments(bundle);
                fragments[position]=oderListFragment;
            }
            //返回需要显示的Fragment
            return fragments[position];
        }

        //返回有多少个页面
        @Override
        public int getItemCount() {
            return fragments.length;
        }
    }


效果:

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值