Android:工具栏 Tablayout，在文本上方呈现的图标

Question

我在对话框中有一个简单的布局，里面有 AppCompat Toolbar 和 TabLayout。我希望我的选项卡在文本左侧有图标。

Here is a layout of the dialog.

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            >

        <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                />
    </android.support.v7.widget.Toolbar>

    <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            />
</LinearLayout>

然后我以编程方式添加选项卡。

tabs.addTab(tabs.newTab()
                .setTag(SettingsTabTag)
                .setText("Settings")
                .setIcon(R.drawable.scan_tab_settings_black), true);
tabs.addTab(tabs.newTab()
                .setTag(MetadataTabTag)
                .setText("Metadata")
                .setIcon(R.drawable.scan_tab_metadata_black));

但是图标总是渲染在文字上方，而且非常小。

Answer 1

1.创建自定义标签布局

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"/>

2.在您的 Activity 中设置自定义标签

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);

setCompoundDrawablesWithIntrinsicBounds做的工作。