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

Question

TabLayout 文档 给出了嵌套 TabItem 直接在 TabLayout 中的示例，如下所示：

 <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 的文档说：

这个视图实际上并没有添加到 TabLayout，它只是一个允许设置选项卡项的文本、图标和自定义布局的虚拟对象。

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

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

Answer 1

这似乎是设计库中相对较新的添加，显然是在版本 23.2.0 中添加的，但在 修订历史 中未提及。它的功能非常基本，它似乎使用的唯一属性是其 文档 中给出的三个属性： text ， icon 和 layout

从测试来看，它似乎基本上是用于创建新的 Tab 并设置其文本、图标和自定义 View 的 XML 快捷方式，就像通常在代码中所做的那样。当它说“此视图实际上并未添加到 TabLayout”时，我相信这意味着它不是常规意义上的 View ，因为您不能在上面设置任何类型的标准布局属性它，比如 layout_width 或 background 。 It simply serves to cause the TabLayout to create a new Tab for each TabItem , and call 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 布局的相同要求仍然适用。 That is, the TextView for the text must have the system Resource ID @android:id/text1 , and the ImageView for the icon must have the 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>

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

Answer 2

快速添加到@Mikes 非常有用的答案：

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

如果您想在没有自定义视图的情况下调整 TabItem 的外观：使用 白色矢量资产 作为选项卡 android:icon 并使用选择器对其进行 着色（根据 android:state_selected 提供不同的颜色 --- )

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

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

https://stackoverflow.com/a/49603559/414581

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