使用 TabLayout 时如何更改制表符背景颜色？

这是我在主活动中的代码

public class FilterActivity extends AppCompatActivity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_filter);


// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
viewPager.setAdapter(pageAdapter);


// Give the TabLayout the ViewPager
final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);






}
}

这是我在 XML 中的代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<include
android:id="@+id/app_bar"
layout="@layout/app_bar">
</include>


<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="fill_parent"
style="@style/MyCustomTabLayout"
android:layout_height="48dp"/>


<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />


</LinearLayout>

我想改变背景颜色的一个选项卡时，它的选定

150269 次浏览
小开

你试过检查 空气污染指数吗？

您需要为 OnTabSelectedListener事件创建一个监听器，然后当用户选择任何标签时，您应该检查它是否是正确的，然后使用 tabLayout.setBackgroundColor(int color)改变背景颜色，或者如果它不是正确的标签，请确保您用相同的方法再次变回正常颜色。

小开

你可以试试这个:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabBackground">@drawable/background</item>
</style>

在后台 xml 文件中:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/white" />
<item android:drawable="@color/black" />
</selector>
小开
最佳答案

最后对我起作用的是类似于@如果我是 DJ 建议的，但是 tabBackground应该在 layout文件中，而 没有在 style文件中，所以它看起来像:

res/layout/somefile.xml :

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

还有选择器 res/drawable/tab_color_selector.xml :

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

在 xml 中添加属性:

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

并在可绘制文件夹 tab _ color _ selector. xml 中创建

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

您可以在 xml 中使用它。

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabTextColor="@color/colorGray"
app:tabSelectedTextColor="@color/colorWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
小开

你可以像下面这样改变每个标签页的背景或波纹颜色:

    //set ripple color for each tab
for(int n = 0; n < mTabLayout.getTabCount(); n++){


View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);


if(tab != null && tab.getBackground() instanceof RippleDrawable){
RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
if (rippleDrawable != null) {
rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
}
}
}
小开

最简单的解决方案之一就是从 colols.xml 文件中更改 color 质点。

小开

因为我发现最好的和适合我的选择，它将与动画太工作。

您可以使用 indicator本身作为背景。

可以将 app:tabIndicatorGravity="stretch"属性设置为用作背景。

例如:

   <android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorGravity="stretch"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/colorAccent">


<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chef" />




<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" />


</android.support.design.widget.TabLayout>

希望对你有帮助。

小开

可以通过此属性更改选项卡的背景颜色

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'
小开

在一些混乱之后，这就是我如何得到想要的外观(至少在模拟器中) ，它保持了涟漪效应。

tab layout with tab selector with color argument

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_selector"
app:tabIconTint="@drawable/tab_selector"
app:tabIconTintMode="src_atop"
app:tabTextColor="@drawable/tab_selector" />

还有 @drawable/tab_selector:

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

仅供参考: 这是在我将 color参数添加到 @drawable/tab_selector之前模拟器显示的内容:

tab layout with tab selector without color argument

小开

我可以找到的方法之一就是像这样使用标签指示符:

<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/normal_unselected_color"
app:tabIndicatorColor="@color/selected_color"
app:tabIndicatorGravity="center"
app:tabIndicatorHeight="150dp"
app:tabSelectedTextColor="@color/selected_text_color"
app:tabTextColor="@color/unselected_text_color">


..... tab items here .....


</com.google.android.material.tabs.TabLayout>

诀窍是:

  • 使制表符在中心对齐
  • 将指示器的高度设为足够大，以覆盖整个标签

在切换选项卡时，这也能保证平滑的动画效果

小开

因为 ViewPager 正在被 ViewPager2取代，我们需要迁移到它。

使用 Java 的一个快速方法是这样的:

    final List<String> colors = new ArrayList<String>(){
{
add("#FF0000");
add("#800000");
add("#FFFF00");
}
};


    

ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(your_data_structure);
viewPager.setAdapter(adapter);


final TabLayout tabs = findViewById(R.id.tabs);


tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.view.setAlpha((float) 0.5);
}


@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.view.setAlpha(1);
}


@Override
public void onTabReselected(TabLayout.Tab tab) {


}
});


TabLayoutMediator mediator = new TabLayoutMediator(tabs, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
tab.setText("Tab" + position);
            

/*
*  With this feature the TabIndicator color is ignored
*  or covered by the new color ex.(if alpha channel is changed the indicator can be seen through)
*/
tab.view.setBackgroundColor(Color.parseColor(colors.get(position))); //You can use your HEX string color
}
});


mediator.attach();
小开

您可以简单地在 < strong > tabLayout.addOnTabSelectedListener 中使用 SetContext (可绘制) 如下所示:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.view.setBackground(getResources().getDrawable(R.drawable.ic_rectangle_1345));
}


@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.view.setBackgroundColor(Color.TRANSPARENT);
}


@Override
public void onTabReselected(TabLayout.Tab tab) {


}
});

提交答案