Question

如何更改Tabs的颜色？当我单击/滑动到绿色或任何其他选项卡时，选项卡颜色应更改为适当的颜色，其他选项卡颜色应更改为黑色。我怎样才能做到这一点？我正在使用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

我有类似的问题。就我而言，只要用户点击导航栏中的一个片段，我就想更改操作栏的颜色。

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

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

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"));
        }

我使用了导航抽屉，因此您可能需要调整此代码。

这有帮助吗？

Answer 3

有教程Styling tabs in the Android action bar。对于API＆gt; = 3，您可以选择parent theme作为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>

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

希望这有帮助！

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

3 个答案: