android - 选择 TabLayout 时更改每个 Tab 文本颜色的正确方法是什么?
问题描述
我想知道,我有一个用于 TabLayout 中的选项卡的 custom_tab_layout,它只有一个带有 id 的 TextView,但是我想做的是,当它被单击/选择时,所述 TextView 的文本会改变它的颜色,下一个代码可以工作,但是我不确定这是否是实现此功能的正确方法,因为我是 android 的新手,并且感觉必须有更好的方法。这是带有一些注释的代码!我只是使用 ViewPager 并创建了一个扩展 FragmentPagerAdapter 的自定义适配器类。
public class MainActivity extends AppCompatActivity{
public static class CategoryPagerAdapter extends FragmentPagerAdapter{
private static int NUM_PAGES = 4;
public CategoryPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:{
return new NumbersFragment();
}
case 1:{
return new FamilyFragment();
}
case 2:{
return new ColorsFragment();
}
case 3:{
return new PhrasesFragment();
}
default:{
return null;
}
}
}
@Override
public int getCount() {
return NUM_PAGES;
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_pager);
TabLayout tlCategoryTab = this.findViewById(R.id.tlCategoryTab);
final ViewPager vpPager = this.findViewById(R.id.vpPager);
tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
String [] categories = {"Numbers", "Family", "Colors", "Phrases"};
for (int i = 0; i < categories.length; i++) {
TabLayout.Tab tab = tlCategoryTab.getTabAt(i);
//Here I get the custom tab layout
View v = tab.getCustomView();
//Assign the TextView and the Tab name
TextView tvTabItem = v.findViewById(R.id.tvTabItem);
tvTabItem.setText(categories[i]);
//I was having issues when the app first started because it wasn't
//getting assigned the first color, so I came up with this kinda lame solution
if(i == 0){
tvTabItem.setTextColor(getResources().getColor(R.color.category_numbers));
tab.setCustomView(v);
}
}
CategoryPagerAdapter myAdapter = new CategoryPagerAdapter(this.getSupportFragmentManager());
vpPager.setAdapter(myAdapter);
vpPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tlCategoryTab));
//And here is the actual functionality that changes the TextColor when it gets clicked/selected
tlCategoryTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
int colorToUse = 0;
View v = tab.getCustomView();
TextView tvTabItem = v.findViewById(R.id.tvTabItem);
if(tvTabItem.getText().toString().equalsIgnoreCase("Numbers")){
colorToUse = R.color.category_numbers;
}
else if(tvTabItem.getText().toString().equalsIgnoreCase("Family")){
colorToUse = R.color.category_family;
}
else if(tvTabItem.getText().toString().equalsIgnoreCase("Colors")){
colorToUse = R.color.category_colors;
}
else if(tvTabItem.getText().toString().equalsIgnoreCase("Phrases")){
colorToUse = R.color.category_phrases;
}
tvTabItem.setTextColor(getResources().getColor(colorToUse));
tab.setCustomView(v);
vpPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
View v = tab.getCustomView();
TextView tvTabItem = v.findViewById(R.id.tvTabItem);
tvTabItem.setTextColor(getResources().getColor(R.color.white));
tab.setCustomView(v);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
有没有办法以更有效的方式实现相同的目标?提前感谢您花时间阅读本文!
解决方案
您可以通过 xml 或 java 代码两种方式执行此操作。
在 XML 中:
用于app:tabTextColor
未选择的选项卡颜色和app:tabSelectedTextColor
选定的选项卡颜色
<android.support.design.widget.TabLayout
app:tabIndicatorColor="@color/yourColor"
app:tabTextColor="@color/yourColor"
app:tabSelectedTextColor="@color/yourColor">
在 Java 代码中:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {
@Override
public void onTabSelected(TabLayout.Tab tab) {
super.onTabSelected(tab);
tabLayout.setTabTextColors(
// Unselected Tab Text Color
ContextCompat.getColor(MainActivity.this, R.color.unselectedTabColor),
// Selected Tab Text Color
ContextCompat.getColor(MainActivity.this, R.color.selectedTabColor)
);
// Selected Tab Indicator Color
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.yourColor));
tabLayout.setSelectedTabIndicatorHeight(5);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
super.onTabUnselected(tab);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
super.onTabReselected(tab);
}
});
推荐阅读
- c++ - getsockname 总是返回协议族 0 的结构
- c# - .Net 的 GraphQL 错误:未映射的选择字段
- python - 为 x 轴上的每个值绘制 3 个条形图
- laravel - 单击下拉按钮时,导航中的下拉按钮会扩展导航的高度。怎么解决?
- node.js - 使用 NestJS 和 GRPC 服务器进行身份验证
- lua - LuaR是什么版本
- reactjs - apollographql - 更改本地状态对象中的条目并重新渲染?
- java - 我可以从键盘上读取基于相同界面但不同类的 N 种不同的几何形式吗?
- c++ - 与 std::optional nullopt 等效的 boost 是什么?
- c# - 实体框架核心中的自联接