TabItem 放置在布局 XML 中时如何使用? [英] How is TabItem used when placed in the layout XML?

问题描述

TabLayout 文档 给出了一个直接在 TabLayout 内部嵌套 TabItem 的例子，如下所示:

The TabLayout documentation gives an example of nesting TabItem directly inside TabLayout like so:

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

But it gives no example of how this could be used in practice, and the documentation for TabItem says:

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

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 设置选项卡式活动，如上所示?

So what is TabItem for? After extensive Googling, I cannot find a single example of anyone defining TabItems in XML. Is there any way to set up a tabbed activity using TabItem in the resource file as shown above?

推荐答案

这似乎是设计库中相对较新的添加项，显然是在 23.2.0 版本中添加的，尽管 修订历史.它的功能非常基本，它似乎使用的唯一属性是 文档:text、icon 和 layout.

This appears to be a relatively recent addition to the design library, apparently added in version 23.2.0, though it's not mentioned in 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, and layout.

从测试来看，它似乎基本上是一个用于创建新 Tab 并设置其文本、图标和自定义 View 的 XML 快捷方式，就像通常在代码.当它说此视图实际上并未添加到 TabLayout"时，我相信这意味着它不是常规意义上的 View，因为您无法设置任何类型的标准布局属性在它上面，比如 layout_width 或 background.它只是让 TabLayout 为每个 TabItem 创建一个新的 Tab，并调用 setText()，setIcon() 和 setCustomView() 相应.

From testing, it seems it's basically an XML shortcut for creating a new Tab, and setting its text, icon, and custom View, as one would usually do in code. When it says "This view is not actually added to TabLayout", I believe it's meant to suggest that it's not a View in the regular sense, in that you can't set any kind of standard layout attribute on it, like layout_width or background. It simply serves to cause the TabLayout to create a new Tab for each TabItem, and call setText(), setIcon(), and setCustomView() accordingly.

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

For example, to add a Tab in code, we would usually do something like this:

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 来替换上面注释之后的所有内容.

Whereas now we can replace everything after the comment above by adding a TabItem in the layout.

<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:

Do note that the same requirements for the custom View layout still apply. 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. As an example, the R.layout.tab from above:

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

这篇关于TabItem 放置在布局 XML 中时如何使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！