ActionBar动态选项卡文本颜色更改

时间:2014-04-03 23:09:39

标签: android android-actionbar android-tabs

我需要动态更改标签文本颜色。选择选项卡时,文本应为黄色,未选中时应为黑色。我尝试了一些技巧,但我所取得的只是改变ActionBar标题颜色......

我的Java代码设置选项卡:

     private void setSortTabs() {
    //getting the action bar from the MainActivity
    final ActionBar actionBar = ((ActionBarActivity) getActivity()).getSupportActionBar();
    //adding tabs to the action bar
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    //tab sort by name
    ActionBar.Tab tabSortByName = actionBar.newTab();
    tabSortByName.setText(LABEL_BY_NAME_DESC);
    ActionBar.TabListener sortByNameTabListener = new ActionBar.TabListener() {
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByName(tab);
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByNameTabUnselected(tab);
        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByName(tab);
        }
    };
    tabSortByName.setTabListener(sortByNameTabListener);
    actionBar.addTab(tabSortByName);

    //tab sort by date
    ActionBar.Tab tabSortByDate = actionBar.newTab();
    tabSortByDate.setText(LABEL_BY_DATE_ASC);
    actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.BLUE));
    ActionBar.TabListener sortByDateTabListener = new ActionBar.TabListener() {
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDate(tab);
            //Toast.makeText(getActivity().getApplicationContext(),Integer.toString(tab.getPosition()), 1).show();
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDateTabUnselected(tab);

        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDate(tab);
        }
    };
    tabSortByDate.setTabListener(sortByDateTabListener);
    actionBar.addTab(tabSortByDate);
}

我的styles.xml代码:

    <style name="AppTheme"
    parent="Theme.Base.AppCompat.Light">
    <item name="android:actionBarStyle" tools:ignore="NewApi">@style/MyActionBar</item>
    <item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="android:actionBarTabStyle">@style/TabBackgroundStyle</item>
    <item name="android:actionBarTabBarStyle">@style/TabBarBackgroundStyle</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="actionBarTabStyle">@style/TabBackgroundStyle</item>
    <item name="actionBarTabBarStyle">@style/TabBarBackgroundStyle</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
    parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@color/actionBarBackgroundColor</item>
    <item name="android:icon">@android:color/transparent</item>

    <!-- Support library compatibility -->
    <item name="background">@color/actionBarBackgroundColor</item>
    <item name="icon">@android:color/transparent</item>
</style>

<style name="TabTextStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabText">
    <item name="android:textColor">@color/selected_tab_text_color</item>
    <item name="android:textSize">20sp</item>
</style>

<style name="TabBackgroundStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@color/gray_edit_text</item>
    <item name="android:gravity">center</item>
</style>

<style name="TabBarBackgroundStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabBar">
    <item name="android:background">@color/gray_edit_text</item>
</style>

当前外观与所需外观

Current look Should look

1 个答案:

答案 0 :(得分:0)

我对我的项目有同样的要求。以下代码通过为每个选项卡创建自定义视图来工作,您可以根据需要使用该选项卡设置/更改文本颜色(或执行其他格式更改)。无论选择哪个选项卡都有黄色文本,未选中的选项卡将显示黑色文本。

public void createTabs() {
    // Hardcoding for test purposes...
    String tabTitles[] = {"Tab0", "Tab1", "Tab2"};
    int numTabs = 3;
    int startingSelectedTab = 0;

    for (int i = 0; i < numTabs; i++) {             
        Boolean selected = (i == startingSelectedTab);

        Tab tab = mActionBar.newTab();
        tab.setTabListener(this);

        View view = createTabCustomView(tabTitles[i], selected);
        tab.setCustomView(view);

        mActionBar.addTab(tab, selected);
    }
}

public View createTabCustomView(String title, boolean isSelected)  {
    // XML file is below  
    RelativeLayout rootView = (RelativeLayout) getLayoutInflater().inflate(R.layout.action_bar_custom_tab, null);

    TextView textView = setTextColor(rootView, isSelected);
    textView.setText(title);

    return rootView;
}

public View setTabTextColor(Tab tab, boolean isSelected) {
    // Get view that was created in createTabCustomView()
    RelativeLayout rootView = (RelativeLayout) tab.getCustomView();

    setTextColor(rootView, isSelected);

    return rootView;
}

public TextView setTextColor(View rootView, boolean isTabSelected) {
    TextView textView = (TextView) rootView.findViewById(R.id.custom_tab_textview);

    if (isTabSelected) {
        textView.setTextColor(Color.YELLOW);
    } else {
        textView.setTextColor(Color.BLACK);
    }
    return textView;
}

@Override
// Implement ActionBar.TabListener 
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
    View view = setTabTextColor(tab, true);
    tab.setCustomView(view);
}

@Override
// Implement ActionBar.TabListener 
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
    View view = setTabTextColor(tab, false);
    tab.setCustomView(view);
}

@Override
// Implement ActionBar.TabListener 
public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {      
}   

action_bar_custom_tab.xml:

<?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:layout_margin="0dp"
    android:padding="0dp">

    <TextView
        android:id="@+id/custom_tab_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:gravity="center|center_horizontal"
        android:textStyle="bold"/>

</RelativeLayout>