使用 ViewPager2 自定义选项卡布局

Question

我正在尝试通过TabLayout.Tab.setCustomView方法为我的ViewPager2使用自定义选项卡。 但它不起作用。

这是我的Activity中的代码片段，用于使用TabLayout ViewPager2

@Override
protected void onCreate(Bundle savedInstanceState)
{
   ...
   
   mMyViewPager2 = findViewById(R.id.view_pager);
   mMyViewPager2.setAdapter(new MyPagerAdapter(this));
   mMyTabLayout = findViewById(R.id.media_tab);
   new TabLayoutMediator(mMyTabLayout, mMyViewPager2, myTabHandler).attach();
}

private class MyPagerAdapter extends FragmentStateAdapter
{
   ...
}

这是我的TabLayoutMediator.TabConfigurationStrategy的代码片段（也在我的Activity中）：

private TabLayoutMediator.TabConfigurationStrategy myTabHandler = new TabLayoutMediator.TabConfigurationStrategy()  
{
    private TextView tabTitle;
    private TextView tabSubtitle;

    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position)
    {
        View tabView = LayoutInflater.from(MyActivity.this).inflate(R.layout.tab_layout, null, false);

        tabTitle    = tabView.findViewById(R.id.tab_title);
        tabSubtitle = tabView.findViewById(R.id.tab_subtitle);
        
        tabTitle.setText("Title" + (position + 1));
        tabSubtitle.setText("Subtitle" + (position + 1));

        tab.setCustomView(tabView);
    }
}

但是通过上述设置，选项卡保持空白。

我还在我的TabConfigurationStrategy中尝试了以下方法（来自这篇文章）； 但它也不起作用：

FrameLayout frameLayout = new FrameLayout(MyActivity.this);
frameLayout.addView(tabView);

我想知道我的代码有什么问题，以及如何更正它以使用ViewPager2显示自定义选项卡布局。

Answer 1

从setCustomView()文档：

如果提供的视图包含一个 ID 为 text1 的 TextView，那么它将使用给定 setText(CharSequence) 的值进行更新

所以尝试将 tabTitle 的 ID 更改为"@android:id/text1" 。

现在对于字幕，我不确定。 使用"@android:id/text2"可能值得一试。 注意： "@android:id/text2"存在。

不过，您可以使用android:layout=""以声明方式将自己的布局应用到TabItems ，从而无需以编程方式进行。 TabLayout 文档中有一个声明式版本的示例。 所以我相信这样的事情会起作用：

<TabLayout
        ...>

     <TabItem
            ....
             android:layout="@layout/linearLayout_tabitem_1"/>

     <TabItem 
             ....
             android:layout="@layout/linearLayout_tabitem_2"/>

 </TabLayout>

Answer 2

您可以在 pagerAdapter 本身中定义选项卡的标题。

@Override
protected void onCreate(Bundle savedInstanceState)
{
   ...
   MyPagerAdapter adapter = new MyPagerAdapter(this, getSupportFragmentManager() , 2);
   mMyTabLayout = findViewById(R.id.media_tab);
   mMyViewPager2 = findViewById(R.id.view_pager);
   pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mMyTabLayout));
   mMyViewPager2.setAdapter(adapter);
   mMyTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            mMyViewPager2.setCurrentItem(tab.getPosition());
            setTabView(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
        }
    });
}

private void setTabView(int index) {

    TabLayout.Tab tab = mMyTabLayout.getTabAt(index);
    tab.setCustomView(R.layout.tab_layout);
    ((TextView) tab.getCustomView().findViewById(R.id.tabSubtitle)).setText("Subtitle" + (position + 1));
}



private class MyPagerAdapter extends FragmentStatePagerAdapter
{
   private Context mContext;
   private int mCount;

    public MyPagerAdapter(Context context, FragmentManager fm , int count) {
        super(fm);
        mContext = context;
        mCount = count;
        notifyDataSetChanged();

    @Override
    public Fragment getItem(int position) {
        if (position == 0)
            return someFragment();
        else if (position == 1)
            return someOtherFragment(); 



    }
    @Override
    public int getCount() {
        return mCount;
    }
    @Override
    public CharSequence getPageTitle(int position) {
    // Generate title based on item position
        switch (position) {
            case 0:
                return "Title" + position+1;
            case 1:
                return "Title" + position+1;
            default:
                return null;
        }
    }
}