放在布局XML中的TabItem如何使用？

Question

TabLayout documentation 给出了一个直接在 TabLayout 中嵌套 TabItem 的示例，如下所示：

<android.support.design.widget.TabLayout
     android:layout_height="wrap_content"
     android:layout_width="match_parent">

    <android.support.design.widget.TabItem
         android:text="@string/tab_text"/>

    <android.support.design.widget.TabItem
         android:icon="@drawable/ic_android"/>

</android.support.design.widget.TabLayout>

但它没有给出如何在实践中使用它的示例，TabItem 的文档说：

This view is not actually added to TabLayout, it is just a dummy which allows setting of a tab items's text, icon and custom layout.

那么 TabItem 有什么用呢？经过广泛的谷歌搜索后，我找不到任何在 XML 中定义 TabItems 的例子。如上所示，有什么方法可以在资源文件中使用 TabItem 设置选项卡 activity 吗？

Answer 1

这似乎是设计库中相对较新的添加，显然是在版本 23.2.0 中添加的，但在 the revision history. It's functionality is pretty basic, and the only attributes it seems to use are the three given in its docs 中未提及：text、icon 和layout.

从测试来看，它似乎基本上是一个 XML 快捷方式，用于创建新的 Tab，并设置其文本、图标和自定义 View，就像通常在代码。当它说 "This view is not actually added to TabLayout" 时，我相信这意味着它不是常规意义上的 View，因为您不能在其上设置任何类型的标准布局属性，例如 layout_width 或 background。它只是使 TabLayout 为每个 TabItem 创建一个新的 Tab，并相应地调用 setText()、setIcon() 和 setCustomView()。

例如，要在代码中添加一个Tab，我们通常会这样做：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

// Add Tab
TabLayout.Tab tab = tabLayout.newTab();

tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);

tabLayout.addTab(tab);

而现在我们可以通过在布局中添加 TabItem 来替换上面评论之后的所有内容。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TabItem
        android:layout="@layout/tab"
        android:text="Tab 1"
        android:icon="@drawable/ic_launcher" />

</android.support.design.widget.TabLayout>

请注意，自定义 View 布局的相同要求仍然适用。即，文本的 TextView 必须具有系统资源 ID @android:id/text1，图标的 ImageView 必须具有 ID @android:id/icon。例如，上面的 R.layout.tab：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">

    <ImageView android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Answer 2

快速添加@Mikes 非常有帮助的答案：

Android Studio 现在有一个模板，介绍如何在 XML 布局中使用带有 TabItem 设置的 TabLayout。使用 "New > Activity > Tabbed Activity" 创建所有需要的文件，然后选择 "Action Bar Tabs(with ViewPager)"，如屏幕截图所示：

如果您想在没有自定义视图的情况下调整 TabItem 的外观：使用 white vector assets 作为选项卡 android:icon 和 tint 它们带有选择器（根据 android:state_selected 提供不同的颜色）

当前所选选项卡下的线条颜色在标签 TabLayout 上设置为 app:tabIndicatorColor。

我花了一段时间才让它起作用，所以完整的步骤变成了很长的答案，我不想在这里复制它们。您可以在以下位置找到我更详细的完整代码答案：

Answer 3

请参阅 com.google.android.material.tabs.TabItem class 它接受来自属性的图标文本，但似乎您需要在运行时添加标签。

放在布局XML中的TabItem如何使用？

How is TabItem used when placed in the layout XML?

android

android-layout

android-tabs

android-tablayout