移除TabLayout左右内边距

Question

我正在使用选项卡布局，这是我的代码

  <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"

        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"

        android:clipToPadding="false"
        />

像这样添加标签

//创建选项卡

TextView tab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tab.setText("主页"); tab.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_home_black_24dp, 0, 0); tabLayout.addTab(tabLayout.newTab().setCustomView(tab));

TextView tab2 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab2.setText("Report");
tab2.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab2));

TextView tab3 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab3.setText("Medicine");
tab3.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_home_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab3));

TextView tab4 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab4.setText("More");
tab4.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab4));

这是我的手机屏幕截图

https://i.stack.imgur.com/kYNs1.png

有两件事 1.如何删除选项卡布局左右两侧的空间？

2.如何更改活动和非活动选项卡的文本和图标颜色

Answer 1

1. 从选项卡布局中的选项卡中删除填充

   在 TabLayout 中，您必须将 tabPaddingEnd 和 tabPaddingStart 设置为 0dp。

   <android.support.design.widget.TabLayout
   app:tabPaddingStart="0dp"
   app:tabPaddingEnd="0dp"/>
   

2. 通过

   更改TabLayout所选选项卡的图标颜色

   viewPager = (ViewPager) findViewById(R.id.viewpager);
   setupViewPager(viewPager);
   
   tabLayout = (TabLayout) findViewById(R.id.tabs);
   tabLayout.setupWithViewPager(viewPager);
   tabLayout.setOnTabSelectedListener(
           new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
   
               @Override
               public void onTabSelected(TabLayout.Tab tab) {
                   super.onTabSelected(tab);
                   int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                   tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
               }
   
               @Override
               public void onTabUnselected(TabLayout.Tab tab) {
                   super.onTabUnselected(tab);
                   int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                   tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
               }
   
               @Override
               public void onTabReselected(TabLayout.Tab tab) {
                   super.onTabReselected(tab);
               }
           }
   );
   

Answer 2

试试这个，

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/bg_forum_tab"
        app:tabIndicatorColor="@color/colorBtnBg"
        app:tabIndicatorHeight="0dp"
        app:tabPaddingBottom="-1dp"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabPaddingTop="-1dp"
        style="@style/CustomTabLayoutStyle"
        app:tabTextColor="@color/colorWhite" />

像这样设置 tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom

    Styles:

    <style name="CustomTabLayoutStyle" parent="Base.Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@color/tab_text_selected</item>
        <item name="tabIndicatorColor">@color/tab_indicator</item>
        <item name="tabTextAppearance">@style/CustomTabTexStyle</item>
    </style>

    <style name="CustomTabTexStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/tab_text</item>

        ...
    </style>

Answer 3

要调整填充，您可以使用

app:tabMinWidth

或

tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"
        app:tabMinWidth="50dp"
        app:tabPaddingBottom="1dp"
        app:tabPaddingEnd="1dp"
        app:tabPaddingStart="1dp"
        app:tabPaddingTop="1dp"
        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"

        android:clipToPadding="false"
        />

简单来说，您可以使用下面的颜色代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

并将其保存在可绘制对象中为

tab_color_selector.xml

并使用

app:tabBackground="@drawable/tab_color_selector"

所以总代码是

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"
        app:tabMinWidth="50dp"
        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"
        app:tabBackground="@drawable/tab_color_selector"
        android:clipToPadding="false"
        />

在

tab_background_selected

和

tab_background_unselected

中提供颜色，如

#000000

。或者直接使用

#000000

代替

@color/tab_background_unselected

Answer 4

您可以添加属性：

 app:tabIndicatorFullWidth="false"
 app:tabIndicatorHeight="0dp"
 app:tabMinWidth="0dp"
 app:tabPadding="0dp"
 app:tabPaddingBottom="0dp"
 app:tabPaddingEnd="0dp"
 app:tabPaddingStart="0dp"
 app:tabPaddingTop="0dp"