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提供标识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>

Android TabLayout选项卡图标

1 个答案: