如何动态更改 Viewpager 选项卡颜色? [英] How to change Viewpager tab colour dynamically?

问题描述

如何像这样改变标签的颜色?当我单击/滑动到绿色或任何其他选项卡时，选项卡颜色应更改为适当的颜色，其余其他选项卡颜色应更改为黑色.我怎样才能做到这一点?我正在使用 Viewpager.

我在 onpagelistener 中尝试了这段代码:

 if(位置 == 0) {viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);}否则如果(位置 == 1){viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);}

但是上面的代码没有效果.

我正在使用此代码:.您可以选择您的 parent theme 作为 API>=3 的 Theme.Holo 或支持库 V7 的 Theme.AppCompat 等.

此外，对于 <item name="android:background">，您可以将其设置为您为标签状态更改创建的选择器:

android:background="@drawable/selector_tab"

对于 selector_tab 可以是:

<?xml version="1.0" encoding="utf-8"?><选择器xmlns:android="http://schemas.android.com/apk/res/android"><项目 android:color="@color/pressed_color"android:state_pressed="true"/><项目 android:color="@color/selected_color"android:state_selected="true"/><项目 android:color="@color/normal_color"/></选择器>

[更新]

为了动态改变标签颜色，建议使用带有标签的自定义视图:

//your_custom_tab.xml<?xml 版本="1.0" 编码="utf-8"?><线性布局 xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><文本视图android:id="@+id/tab_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizo​​ntal"android:maxLines="1"/></线性布局>LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);

然后 setCustomeView(customView) 添加选项卡到 ActionBar.在您的标签/页面更改监听器中:

Tab selectedTab = yourActionBar.getSelectedTab();查看 tabView = selectedTab.getCustomView();tabView.setBackgroundColor(your_select_color);

为了消除自定义视图引起的选项卡周围可能出现的间隙，您可以设置选项卡样式:

<style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView"><item name="android:paddingLeft">0dp</item><item name="android:paddingRight">0dp</item><item name="android:paddingTop">0dp</item><item name="android:paddingBottom">0dp</item></风格>

并相应地使用您的主题父级.

希望对您有所帮助！

How to change colour of Tabs like this? When I click/swipe to green or any other tab, the tab colour should change to that appropriate colour and rest of other tabs colour should change to black. How can I do this? Im using Viewpager.

I tried this code inside onpagelistener:

  if(position == 0) {
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
         }        
  else if(position == 1) { 
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
         }

But above code has no effect.

And Im using this code : Android Viewpager tutorial Androidhive

解决方案

There is tutorial Styling tabs in the Android action bar. You can choose your parent theme as Theme.Holo for API>=3, or Theme.AppCompat for support library V7, etc.

And besides, for <item name="android:background">, you could set it to a selector you create for tab state change:

android:background="@drawable/selector_tab"

For selector_tab can be like:

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

    <item android:color="@color/normal_color" />
</selector>

[UPDATE]

For change tab color dynamically, suggest to use custom view with tab:

//your_custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >


  <TextView
    android:id="@+id/tab_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:maxLines="1" />

</LinearLayout>

LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);

then setCustomeView(customView) when add tab to ActionBar. And in your tab/page change listener:

Tab selectedTab = yourActionBar.getSelectedTab();
View tabView = selectedTab.getCustomView();
tabView.setBackgroundColor(your_select_color);  

To remove possible gap around tab caused by custom view, you can set tab style:

<style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView">
   <item name="android:paddingLeft">0dp</item>
   <item name="android:paddingRight">0dp</item>
   <item name="android:paddingTop">0dp</item>
   <item name="android:paddingBottom">0dp</item>
</style>

and use your theme parent accordingly.

Hope this help!

这篇关于如何动态更改 Viewpager 选项卡颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！