Android TabLayout 选项卡图标

Question

我有以下代码来设置 android TabLayout 文本和图像:

//First tab - Home Facebook Updates
        tabLayout.addTab(tabLayout.newTab()
                .setText("Tab 1")
                .setIcon(R.drawable.fb_updates));
        //Second tab - Instagram Latest Checkins
        tabLayout.addTab(tabLayout.newTab()
                .setText(Tab 2"));
                .setIcon(R.drawable.ic_location_on_white_24dp));
        //Third tab - Events
    tabLayout.addTab(tabLayout.newTab()
            .setText("אירועים")
            .setIcon(R.drawable.ic_event_note_white_24dp));

该代码运行良好，但由于某些原因，选项卡图标出现在选项卡文本上方，而不是靠近文本。例如:

标签 1 图像

标签 1 文本

我需要它以这种方式出现:

选项卡 1 图片 选项卡 1 文本

Answer 1

默认的选项卡布局会将图标放在文本上方。如果您想要将图标放在一边，则必须提供自定义布局。

注意:不要给 ImageView 指定 id android.R.id.icon，因为选项卡布局会自动在其下方放置边距，无论它在哪里!

做这样的事情:

View tabView = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
// use findViewById etc to set the text and images
tabLayout.addTab(
    tabLayout.newTab()
    .setCustomView(tabView )
);

R.layout.custom_tab 可以是您喜欢的任何内容，但最有可能是这样的:

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    tools:ignore="UseCompoundDrawables">

    <ImageView
        android:layout_width="@dimen/indicator_size_tab"
        android:layout_height="@dimen/indicator_size_tab"
        android:id="@+id/tab_icon"
        android:layout_marginRight="@dimen/margin_small"
        android:layout_marginEnd="@dimen/margin_small"/>

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:id="@android:id/text1"
        android:textAppearance="@style/TextAppearance.Design.Tab"
        android:textColor="@color/tab_text"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"/>

</LinearLayout>