自定义视图可以用作 TabItem 吗？

Question

android 中的 TabLayout 类为您提供了一个 TabItem，可以让您指定文本和图标。是否可以将自定义视图用作 TabItem？

我的标签看起来像这样

如您所见，除了图标和文本标签外，我还有一个通知符号（黄色圆圈内的数字）。我怎样才能制作这样的标签？

原文由 Denny George 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在某些情况下，我们可能希望为每个选项卡应用自定义 XML 布局，而不是默认选项卡视图。为此，在将滑动选项卡附加到寻呼机后，遍历所有 TabLayout.Tabs：

 public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        SampleFragmentPagerAdapter pagerAdapter =
            new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }

    //...
}

接下来，我们将 getTabView(position) 方法添加到 SampleFragmentPagerAdapter 类：

 public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
   private String tabTitles[] = new String[] { "Tab1", "Tab2" };
   private int[] imageResId = { R.drawable.ic_one, R.drawable.ic_two };

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imgView);
        img.setImageResource(imageResId[position]);
        return v;
    }

}

有了它，您可以为适配器中的每个页面设置任何自定义选项卡内容。

资源

原文由 Asym 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以为每个选项卡项使用任何布局。首先像这样将 TabItems 添加到 TabLayout； （我的布局每个选项卡有 2 个文本视图和 1 个图像）

 <com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/ti_payroll_tab_tab1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/your_custom_layout" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/ti_payroll_tab_tab2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/your_custom_layout" />
</com.google.android.material.tabs.TabLayout>

然后您必须在自定义布局中找到并设置视图。

 TabLayout.Tab tab1 = tabLayout.getTabAt(0);

tvTab1Title = tab1.getCustomView().findViewById(R.id.txt_payroll_tab_title);
tvTab1Value = tab1.getCustomView().findViewById(R.id.txt_payroll_tab_value);
ivTab1 = tab1.getCustomView().findViewById(R.id.img_payroll_tab_image);

原文由 Özer Özcan 发布，翻译遵循 CC BY-SA 4.0 许可协议