Fragment+Viewpage2+FragmentStateAdapter实现滑动式标签布局

大家好,我是网创有方,今天记录下标签布局的实现方法,先看下效果图。

第一步:编写一个activity或者fragment。内含有一个viewpager2的适配器,适配器类型为FragmentStateAdapter。

复制代码
​
public class MediaCreateFragment extends Fragment {
    private FragmentMediaCreateBinding binding;
    private TabLayout tabLayout;

    private ViewPager2 viewPager2;

    private List<TabMediaFragment> tabMediaFragmentList ;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = FragmentMediaCreateBinding.inflate(inflater,container,false);
        View root = binding.getRoot();
        initView();
        Log.e("tag","onCreateView中");
        return root;
    }
    private void initView(){



    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        tabLayout = binding.tabMediaCreate;
        viewPager2 = binding.viewPager2Tab;
        // 初始化Fragment列表和标题
        tabMediaFragmentList =new ArrayList<>();
        tabMediaFragmentList.add(TabMediaFragment.newInstance("小红书的内容"));
        tabMediaFragmentList.add(TabMediaFragment.newInstance("百家号的内容"));
        tabMediaFragmentList.add(TabMediaFragment.newInstance("今日头条的内容"));
        List<String> titleList = new ArrayList<>();
        titleList.add("小红书");
        titleList.add("百家号");
        titleList.add("今日头条");
        // 获取FragmentManager和Lifecycle实例
        Lifecycle lifecycle = getLifecycle();
        // 创建并设置适配器
        MyFragmentStateAdapter adapter = new MyFragmentStateAdapter(getActivity(), tabMediaFragmentList, titleList);
        // 设置适配器到ViewPager2
        viewPager2.setAdapter(adapter);
        // 设置TabLayout与ViewPager2的关联
        new TabLayoutMediator(tabLayout, viewPager2,
                (tab, position) -> tab.setText(adapter.getPageTitle(position)) // 设置标签标题
        ).attach();
    }

    public class MyFragmentStateAdapter extends FragmentStateAdapter {
        private  List<TabMediaFragment> tabMediaFragmentList;
        private  List<String> titles;
        public MyFragmentStateAdapter(@NonNull FragmentActivity fragmentActivity, List<TabMediaFragment> tabMediaFragmentList, List<String> titles) {
            super(fragmentActivity);
            this.tabMediaFragmentList = tabMediaFragmentList;
            this.titles = titles;
        }
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return tabMediaFragmentList.get(position);
        }

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

        public String getPageTitle(int position) {
            return titles.get(position);
        }
    }
}

​

需要包含标签的list和fragment的list

第二步:编写盛载标签页面的容器framelayout

复制代码
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000">
<TextView
    android:id="@+id/tx_show_content"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="测试"
    android:textSize="25sp"
    android:textColor="#000"/>

</FrameLayout>

第三步:编写activity或者fragment的布局。

复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_media_create"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabIndicatorColor="@color/design_default_color_secondary"
        app:tabIndicatorFullWidth="true"
        app:tabSelectedTextColor="@color/design_default_color_primary"
        app:tabTextColor="@color/purple_200">
    </com.google.android.material.tabs.TabLayout>
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2_tab"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>


</LinearLayout>

包含一个tablayout和viewpager2控件。

好了这篇文章到这里就结束了。喜欢的点个关注,收藏。

网创有方论坛:https://wcyf520.cn,一个专注于网络创业知识分享的论坛。

相关推荐
超龄超能程序猿7 小时前
dnSpy 使用教程
windows·microsoft
路来了12 小时前
Python小工具之PDF合并
开发语言·windows·python
csdn_aspnet14 小时前
在 Windows 上安装和运行 Apache Kafka
windows·kafka
江山如画,佳人北望16 小时前
C#程序入门
开发语言·windows·c#
AustinCyy16 小时前
【环境配置】Neo4j Community Windows 安装教程
windows·neo4j
奇怪的杰哥17 小时前
Win11 加快软件开机自启动
windows
cpsvps17 小时前
Windows内核并发优化
windows
qq_393828221 天前
电脑休眠设置
windows·电脑·软件需求
网安小白的进阶之路1 天前
A模块 系统与网络安全 第三门课 网络通信原理-3
网络·windows·安全·web安全·系统安全
芳草萋萋鹦鹉洲哦1 天前
【vue3+tauri+rust】如何实现下载文件mac+windows
windows·macos·rust