当在布局XML中放置TabItem时，它是如何使用的？

Question

当在布局XML中放置TabItem时，它是如何使用的？

androidandroid-layoutandroid-tabsandroid-tablayout

36

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

3个回答

3

@Mikes非常有帮助的回答还需要补充一点：

Android Studio现在提供了一个模板，可以在XML布局中使用TabLayout和TabItem。通过选择"新建 > 活动 > 带选项卡的活动"并选择"操作栏选项卡（与ViewPager一起使用）"，可以创建所有所需文件，如下图所示：

如果您想调整TabItem的外观而不使用自定义视图：可使用android:icon作为标签的tab 白色矢量资源 , 并使用选择器进行着色（根据android:state_selected提供不同的颜色）

当前选定选项卡下面的线条颜色设置为标签TabLayout上的app:tabIndicatorColor.

我花了一段时间才让它正常工作，因此完整的步骤已经变成了一个很长的答案，我不想在这里复制它们。您可以在以下网址找到我的更详细的答案和完整代码：

https://dev59.com/gFcP5IYBdhLWcg3wyc3W#49603559

- sunadorer

似乎您无法再选择“导航样式”了。当前模板不包含“TabItem”。我已经搜索了几个小时，希望能够将我的片段放入TabItems中，并且不需要任何适配器来完成它... :/ - The incredible Jan

0

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

- Anton Kogan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike M. · Accepted Answer

这似乎是设计库中相对较新的添加，据说是在版本23.2.0中添加的，尽管它没有在修订历史记录中提到。它的功能非常基本，唯一使用的属性似乎是其文档中给出的三个: text, icon 和 layout。

从测试结果来看，它基本上是一个XML快捷方式，用于创建一个新的Tab，并设置其文本、图标和自定义View，就像我们通常在代码中做的那样。当它说“此视图实际上未添加到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>