Question

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

这是对话框的布局。

    <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.IN您的活动设置了自定义标签

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完成工作。

Answer 2

以下是常用于获取标题标题左侧图标的代码。

在我的情况下，我必须添加线性布局到中心tablayout标题。我还添加了一些空格字符来获取图标和文本之间的边距。

<强> custom_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:gravity="center"/>
</LinearLayout>

初始化代码：

LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);

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

2 个答案: