Question

我正在努力实现这个目标

TabLayout

我构建了tablayout，但找不到在左侧文本前添加图标的好方法。

Current Tablayout

我试过.setIcon（），但图标放在文本上方。

注意： 我正在使用com.android.support:design:25.1.1'

Answer 1

setIcon中的Tab必须TabLayout。请点击以下链接 http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Answer 2

使用以下代码将文字左侧的图标设置为

   private void setupTabIcons() {
        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText(R.string.order_detail);
           tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText(R.string.payment_status);
          tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText(R.string.locate_customer);
           tabThree.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);

        TextView tabFour = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabFour.setText(R.string.call_customer);
           tabFour.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(3).setCustomView(tabFour);

    }

和custom_tab.xml

  <?xml version="1.0" encoding="utf-8"?>
<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:drawablePadding="5dp"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:textSize="15sp" />

Answer 3

尝试此创建一个像这样的

的custom_tab布局

<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center"
android:textColor="#FFFFFF" />

现在根据您的要求设置标签图标和标签标题

 TextView tvHome = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tvHome.setText("Home");
    tvHome.setTextSize(13);
    tvHome.setTypeface(Typeface.DEFAULT_BOLD);
    tvHome.setCompoundDrawablesWithIntrinsicBounds(0, R.drawble.ic_icon, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tvHome);

Answer 4

在setCustomView上使用Tablayout并应用您想要的布局

这是Example

在代码中：

private void createTabIcons() {

    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText("Tab 1");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_dash26, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);
}

在layout/custom_tab

中

<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:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:textSize="@dimen/tab_label"
android:textStyle="bold" />

<强>输出

Answer 5

有两种方法可以实现这一目标。

第一种方法您需要为此创建单独的xml布局（根据您的要求使用TextView和ImageView）并将其设置为布局。喜欢这个

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom));

现在您可以设置不同的名称和标签布局文本，如：

for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
            TextView textView = (TextView) tab.findViewById(R.id.textView);
           ImageView imgView = (ImageView) tab.findViewById(R.id.imageView);
                if (i == 0) {
                    textView.setText("TAB 1");
                   imgView.setImageResource(R.drawable.img1);
                } else if (i == 1) {
                    textView.setText("TAB 2");
                  imgView.setImageResource(R.drawable.img2);                
  }

}

第二种方式是，请参阅此tutorials

Answer 6

显然，通过将 app:tabInlineLabel 属性设置为 true 可以更简单地实现此目的。然后，您所要做的就是像这样设置图标：

tab.setIcon(yourIcon);

Android tablayout中的文字和图标

6 个答案: