Android tablayout中的文本和图标答案

【问题标题】：Text and Icon in Android tablayoutAndroid tablayout中的文本和图标
【发布时间】：2017-07-11 09:53:22
【问题描述】：

我正在努力实现这一目标

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

我尝试过 .setIcon() 但图标位于文本上方。

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

【问题讨论】：

如果你想在同一行设置图标和文本，那么它会帮助你Click Here to set icon and text in Tab

标签： android android-tablayout

【解决方案1】：

您必须在TabLayout 中为 Tab 使用 setIcon。按照以下链接 http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

【讨论】：

这是互联网上最好的例子
我试过了，但是因为android支持设计23.1.0使用setIcon设置了文字上方的图标

【解决方案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" />

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

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

这是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" />

输出

【讨论】：

您好，欢迎来到堆栈溢出..如果答案有助于通过单击答案左侧的勾号将其标记为正确..

【解决方案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

【讨论】：

【解决方案6】：

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

tab.setIcon(yourIcon);

【讨论】：