在 TabLayout(Android 设计支持库)中更改 Tab 的背景颜色不会占用整个 Tab 空间 [英] Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space

问题描述

我有一个 TabLayout(设计支持库)，它绑定到一个包含三个选项卡的 ViewPager.我设计了一个自定义布局并将其设置为 TabLayout 中的每个选项卡.我一直在尝试更改当前选定选项卡的背景颜色.颜色仅环绕选项卡中的文本，但不会占据整个选项卡空间.

以下是我的活动和自定义布局文件的代码片段.

活动代码

public class CustomTabLayoutActivity extends AppCompatActivity {私有 TabLayout tabLayout;@覆盖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() {@覆盖public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@覆盖public void onPageSelected(int position) {for (int i = 0; i < tabLayout.getTabCount(); i++) {如果(我==位置){tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));} 别的 {tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));}}}@覆盖public void onPageScrollStateChanged(int state) {}});}私有无效 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);}私有无效 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("三");tabLayout.getTabAt(2).setCustomView(customTab3);}}

每个标签的自定义布局文件

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

正如你们所看到的，颜色只占据标签中的文本，而不是整个标签空间.如何实现这一目标?任何想法/建议都会对我有很大帮助.提前致谢.

解决方案

将选择器定义为可绘制对象，并为选中/未选中状态定义一个可绘制对象.

对于这个解决方案，我从

附加说明:

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

依赖项{编译'com.android.support:appcompat-v7:23.3.0'编译'com.android.support:cardview-v7:23.3.0'编译'com.android.support:recyclerview-v7:23.3.0'编译'com.android.support:design:23.3.0'编译'com.android.support:support-v4:23.3.0'}

I have a TabLayout (design support library) which is tied up to a ViewPager containing three tabs. I have designed a custom layout and set that to each tab in the TabLayout. I have been trying to change the background color of the currently selected tab. The color only wraps up around the text in the tab but doesn't occupy the entire tab space.

Below are the code snippets of my activity and the custom layout file.

Activity code

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);
}
}

Custom Layout file for each 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="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" />

Here is the screenshot of the tabs after running the above code.

As you guys can see, the color only occupies the text in the tab but not the entire tab space. How to achieve this? Any ideas/suggestions would help me a lot. Thanks in advance.

解决方案

Define a selector as a drawable, and also have a drawable for the selected/unselected states.

For this solution, I started with the code from this answer, and then added the functionality that changes the background color for the current Tab.

First, the selector, tab_background.xml in the drawable folder:

<?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>

Then, tab_background_selected.xml in the drawable folder:

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

Then, tab_background_unselected.xml in the drawable folder:

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

Finally, in your styles.xml, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor property in the TabLayout will now be ignored:

<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>

Result with the example colors above:

Additional Note:

Tested with the 23.3.0 versions of the support library components:

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'
}

这篇关于在 TabLayout(Android 设计支持库)中更改 Tab 的背景颜色不会占用整个 Tab 空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！