在 TabLayout（Android 设计支持库）中更改选项卡的背景颜色不会占用整个选项卡 space

Question

我有一个 TabLayout（设计支持库），它与包含三个选项卡的 ViewPager 相关联。我设计了一个自定义布局并将其设置到 TabLayout 中的每个选项卡。我一直在尝试更改当前所选选项卡的背景颜色。颜色仅环绕选项卡中的文本，但不占据整个选项卡 space。

下面是我的 activity 和自定义布局文件的代码片段。

Activity代码

public class CustomTabLayoutActivity extends AppCompatActivity {

private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_tab_layout);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    setupTabLayout();
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                if (i == position) {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
                } else {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}


private void setupViewPager(ViewPager viewPager) {
    CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
    pagerAdapter.addFragments(new OneFragment(), "ONE");
    pagerAdapter.addFragments(new OneFragment(), "TWO");
    pagerAdapter.addFragments(new OneFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);
}

private void setupTabLayout() {

    TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    customTab1.setText("ONE");
    tabLayout.getTabAt(0).setCustomView(customTab1);
    customTab2.setText("TWO");
    tabLayout.getTabAt(1).setCustomView(customTab2);
    customTab3.setText("THREE");
    tabLayout.getTabAt(2).setCustomView(customTab3);
}
}

每个选项卡的自定义布局文件

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tab"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_gravity="center"
   android:background="#ffffff"
   android:text="Test"
   android:textColor="@android:color/black"
   android:textSize="20sp" />

这是运行上述代码后的选项卡的屏幕截图。

正如你们所见，颜色只占据选项卡中的文本，而不是整个选项卡space。如何做到这一点？任何 ideas/suggestions 都会对我有很大帮助。提前致谢。

Answer 1

将选择器定义为可绘制对象，并为 selected/unselected 状态定义一个可绘制对象。

对于此解决方案，我从中的代码开始，然后添加了更改当前选项卡背景颜色的功能。

首先是选择器，tab_background.xml在drawable文件夹中：

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

然后，tab_background_selected.xml在drawable文件夹中：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#d13fdd1a" />
</shape>

然后，tab_background_unselected.xml在drawable文件夹中：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#3F51B5" />
</shape>

最后，在您的 styles.xml 中指定要使用的选择器，并指定选项卡指示器样式，因为 TabLayout 中的 app:tabIndicatorColor 属性现在将被忽略：

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

以上示例颜色的结果：

补充说明：

使用 23.3.0 版本的支持库组件进行测试：

dependencies {
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:cardview-v7:23.3.0'
    compile 'com.android.support:recyclerview-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:support-v4:23.3.0'
}

Answer 2

具有波纹效果的标签： 除了 Daniel Nugent 的回答之外，为选项卡添加涟漪效果会很漂亮。为此，您必须将这两个可绘制对象添加到 drawable-v21 文件夹：

tab_background_selected.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#63D25B"> <!-- ripple color -->
    <item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>

tab_background_unselected.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#606FC7"> <!-- ripple color -->
    <item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>

Answer 3

我知道现在回答这个问题已经很晚了，但是在没有创建任何新背景或选择器的情况下有一个不同且简单的答案。 Tab-Layout 在开始和结束时默认填充 12dp。刚设置

app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"

在您的选项卡中填充颜色。

Answer 4

你应该使用：

app:tabBackground="@drawable/tab_selector"
android:background="@color/colorNormal"

tab_selector.xml（在可绘制文件夹中）：

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

在 TabLayout（Android 设计支持库）中更改选项卡的背景颜色不会占用整个选项卡 space

Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space

android

android-design-library

android-tablayout