在TabLayout(Android设计支持库)中更改标签的背景颜色不会占用整个标签空间 [英] Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space
问题描述
我有一个TabLayout(设计支持库)，它与包含三个选项卡的ViewPager绑定在一起.我设计了一个自定义布局，并将其设置为TabLayout中的每个选项卡.我一直在尝试更改当前选定选项卡的背景颜色.颜色仅环绕选项卡中的文本，而不占据整个选项卡空间.
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.
活动代码
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.
首先，选择器，可绘制文件夹中的tab_background.xml:
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>
然后，在可绘制文件夹中，tab_background_selected.xml:
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>
然后，在可绘制文件夹中，tab_background_unselected.xml:
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>
最后，在您的styles.xml中，指定要使用的选择器，并指定选项卡指示器样式，因为现在TabLayout中的app:tabIndicatorColor属性将被忽略:
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:
附加说明:
使用支持库组件的23.3.0版本进行了测试:
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设计支持库)中更改标签的背景颜色不会占用整个标签空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
