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，一个专注于网络创业知识分享的论坛。