如何动态更改 Viewpager 选项卡颜色？

Question

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

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

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

我正在使用此代码：Android Viewpager tutorial Androidhive

Answer 1

终于解决了。感谢@Xcihnegn 的想法。这是解决方案：

/* For setting default selected tab */

    actionBar.setSelectedNavigationItem(0);
    actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);  

    /**
     * on swiping the viewpager make respective tab selected
     * */
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {

    /*on changing the page make respected tab selected */           
            actionBar.setSelectedNavigationItem(position);

                if(position == 0)
                {

                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);

                }else if(position == 1)
                {
                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);

                }else if(position == 2)
                {
                    actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
                }

            }

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

@Override
public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
    viewPager.setCurrentItem(tab.getPosition());
}

当一个选项卡被取消选中时，setCustomView(null) 将其布局改回原来的黑色。所以只有选定的标签会改变颜色。取消选择选项卡会将其布局更改为原始形式。

@Override
public void onTabUnselected(ActionBar.Tab tab,     android.support.v4.app.FragmentTransaction fragmentTransaction) {

        if(tab.getPosition() == 0)
        {
            actionBar.getTabAt(0).setCustomView(null);

        }else if(tab.getPosition() == 1)
        {
            actionBar.getTabAt(1).setCustomView(null);

        }else if(tab.getPosition() == 2)
        {
            actionBar.getTabAt(2).setCustomView(null);
        }
    } 
}

要删除设置自定义视图时出现的不必要的填充，我们应该在styles.xml 中使用此代码。

<style name="Custom.ActionBar.TabView.Empty" parent="@android:style/Widget.ActionBar.TabView">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:background">#000000</item>
</style>

<style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
    <item name="android:actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
</style>

不要忘记在您的活动中将这段代码添加到 setcontentview 上方。

settheme(R.styles.CustomActionbartab);

标签的自定义布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/red">

<TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="RED"
    android:textStyle="bold"
    android:gravity="center"
    android:textColor="#ffffff"/>
</RelativeLayout>

Answer 2

有教程Styling tabs in the Android action bar。您可以选择 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"?>
<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>

[更新]

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

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

然后setCustomeView(customView) 添加标签到ActionBar。在您的标签/页面更改监听器中：

Tab selectedTab = yourActionBar.getSelectedTab();
View 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>
</style>

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

希望对您有所帮助！

Answer 3

我遇到了类似的问题。在我的例子中，我想在用户点击导航抽屉中的一个片段时更改操作栏的颜色。

这是我用来解决此问题的代码。

由于您无法从片段访问操作栏，因此您必须在主菜单中创建它。这是我使用的方法。

public void restoreActionBar(int parsedColor) {
        this.parsedColor = parsedColor;
        ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
        actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));

    } 

public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
            restoreActionBar(parsedColor);
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

现在在扩展片段的类中：

public void onAttach(Activity activity) {
            super.onAttach(activity);

            ((MainActivityTrekkly)activity).onSectionAttached(4);
            MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());

            mA.restoreActionBar(Color.parseColor("#028482"));
        }

我已将它与导航抽屉一起使用，因此您可能需要调整此代码。

这有帮助吗？