使用 ViewPager2 自定义选项卡布局

Question

我正在尝试通过

ViewPager2

方法为我的

TabLayout.Tab.setCustomView

使用自定义选项卡。但这不起作用。

这是我的

Activity

中的代码片段，用于使用

ViewPager2

准备

TabLayout

：

@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"

存在。

尽管如此，您可以使用

TabItems

以声明方式将自己的布局应用到

android:layout=""

，从而无需以编程方式执行此操作。

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;
        }
    }
}

Answer 3

这很简单。步骤如下：

1. 为选项卡项目创建自定义布局，例如布局/tab_item
2. 在activity/fragment中设置如下

TabLayoutMediator(tabLayout, viewPager) { tab, position -> 

    when(position) {
        0 -> {
            val tabItemBinding = TabItemBinding.inflate(layoutInftater)
            tabItemBinding.textView.text = "Some title"
            tab.customView = tabItemBinding.root
        }
        1 -> {
            // Repeat above
        }
    }

}

希望这对仍然遇到问题的人有所帮助。