如何在 tablayout 中覆盖和显示 viewpager2 中的选项卡标题

Question

我在Fragment 中使用TabLayout。显示TabLayout（由2 个fragments 组成）的内容，但不显示tabs 的标题。我相信这是一个布局问题，但我不确定如何解决它。 ViewPager (getPagetitle) 中使用的 ViewPager2 的覆盖方法是什么？

主片段

    public class CommunityFragment extends Fragment {
    
        private TabLayout tbL;
        private ViewPager2 vp;
        private RecipeViewPagerAdapter rvpa;
    
        public CommunityFragment() {
            // Required empty public constructor
        }
    
        public static CommunityFragment newInstance(){
            return new CommunityFragment();
        }
    
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View rootView = inflater.inflate(R.layout.fragment_community, container, false);
            tbL = rootView.findViewById(R.id.tabL);
            vp = rootView.findViewById(R.id.pager);
            rvpa = new RecipeViewPagerAdapter(this);
            vp.setAdapter(rvpa);
    
            rvpa.addFragment(new AllFragment(),"All time");
            rvpa.addFragment(new DayFragment(),"Today");
            new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
                        @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                            //////title????
                        }
                    }).attach();
            return rootView;
        }
    }

适配器

    public class RecipeViewPagerAdapter extends FragmentStateAdapter {
    
        private ArrayList<Fragment> listF = new ArrayList<>();
        private ArrayList<String> listT =  new ArrayList<>();
    
        public RecipeViewPagerAdapter(@NonNull Fragment fragment) {
            super(fragment);
        }
    
    
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return listF.get(position);
        }
        //new method ????
        public CharSequence getPageTitle(int position){
            return listT.get(position);
        }
    
        @Override
        public int getItemCount() {
            return listT.size();
        }
    
        public void addFragment(Fragment frag, String title){
            listF.add(frag);
            listT.add(title);
        }
    }

片段布局

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".fragments.CommunityFragment">
    
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabL"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/yellowCool"/>
    
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    
    </LinearLayout>

Answer 1

您的 tabLayout 不显示。使用这个：

<androidx.viewpager2.widget.ViewPager2
     android:id="@+id/pager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_weight="1" // add this line
/>

TabLayoutMediator：

new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
                    @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                        if(position == 0)
                           tab.setText("All time");
                        else
                           tab.setText("Today");
                    }
                }).attach();

Answer 2

把它放在你的主要活动中......

myAdapter=new FragmentAdapter(this);
myViewPager2.setAdapter(myAdapter);
       
String [] tabTtiles={"Home","Chat","Notification","Account"};
new TabLayoutMediator(myTabLayout, myViewPager2,(myTabLayout, position) -> 
  myTabLayout.setText(tabTtiles[position])).attach();

Answer 3

根据documentation：

TabLayoutMediator 对象也处理生成页面的任务 TabLayout 对象的标题，这意味着适配器类 不需要重写getPageTitle()：

要做到这一点：

    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
    new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setText("OBJECT " + (position + 1))
    ).attach();

Answer 4

您可以为 viewPager2 使用以下适配器：

public class ViewPagerAdapter extends FragmentStateAdapter {
  private static final int CARD_ITEM_SIZE = 10;
  public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
  }
  @NonNull @Override public Fragment createFragment(int position) {
    return CardFragment.newInstance(position);
  }
  @Override public int getItemCount() {
    return CARD_ITEM_SIZE;
  }
}

在 mainActivity 上，您需要包含以下内容：

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = findViewById(R.id.view_pager);
    tabLayout = findViewById(R.id.tabs);
    viewPager.setAdapter(new ViewPagerAdapter(this));
    new TabLayoutMediator(tabLayout, viewPager,
        new TabLayoutMediator.TabConfigurationStrategy() {
          @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText("Tab " + (position + 1));
          }
        }).attach();
  }
}