android - 如何更改选项卡指示器的颜色

Question

I am using tabHost in my application and the requirement is that when any tab is selected the color of tab indicator should change ,I referred this example How to set Tab View Indicator background color in Android但我不明白这是我的代码:

    TabHost tabHost = getTabHost();  // The activity TabHost

            TabHost.TabSpec spec;  // Reusable TabSpec for each tab
            Intent intent;  // Reusable Intent for each tab

            // Create an Intent to launch an Activity for the tab (to be reused)
            intent = new Intent().setClass(this, HomePage.class);
            // Initialize a TabSpec for each tab and add it to the TabHost
            spec = tabHost.newTabSpec("tabOne");  
            spec.setContent(intent);  
            spec.setIndicator("Home");  
            tabHost.addTab(spec);
            // Squash the tab a little bit horizontally
            tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;
            tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 50;

            // Bump the text size upll.getChildAt(0);

            // Do the same for the other tabs
            intent = new Intent().setClass(this, MoteIt.class);
            spec = tabHost.newTabSpec("tabTwo");  
            spec.setContent(intent);  
            spec.setIndicator("moteit");

            tabHost.addTab(spec);
            tabHost.getTabWidget().getChildAt(1).getLayoutParams().height = 40;


            intent = new Intent().setClass(this, Lifeline.class);
            spec = tabHost.newTabSpec("tabThree");  
            spec.setContent(intent);  
            spec.setIndicator("lifeline");
            tabHost.addTab(spec);
            tabHost.getTabWidget().getChildAt(2).getLayoutParams().height = 40;


            intent = new Intent().setClass(this, CircleOfTrust.class);
            spec = tabHost.newTabSpec("tabfour");  
            spec.setContent(intent);  
            spec.setIndicator("Cot");
            tabHost.addTab(spec);
            tabHost.getTabWidget().getChildAt(3).getLayoutParams().height = 40;

            intent = new Intent().setClass(this, Search.class);
            spec = tabHost.newTabSpec("tabFive");  
            spec.setContent(intent);  
            spec.setIndicator("Search");
            tabHost.addTab(spec);
            tabHost.getTabWidget().getChildAt(4).getLayoutParams().height = 40;
            tabHost.getTabWidget().setStripEnabled(true);
            tabHost.setCurrentTab(0);

提前致谢

Answer 1

这个解决方案适用于我，也适用于 2.1+ android，它创建自定义选项卡布局

代码:

private TabHost mTabHost;

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

    setupTabHost();
    mTabHost.getTabWidget().setDividerDrawable(R.drawable.fake_divider);

    setupTab(new TextView(this), "123", R.id.tab1);
    setupTab(new TextView(this), "abc", R.id.tab2);
    setupTab(new TextView(this), "fav", R.id.tab3);

    mTabHost.setCurrentTab(0);
}

private void setupTabHost() {
    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup();
}

private void setupTab(final View view, final String tag, final int res) {
    View tabview = createTabView(mTabHost.getContext(), tag);
    TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(res);
    mTabHost.addTab(setContent);
}

private static View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.tabwidget_bg, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}

在 main.xml 中:

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_divider" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:measureAllChildren="true" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:baselineAligned="true"
                android:orientation="vertical" >
        ... etc

自定义布局 tabwidget_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tab_bg_selector"
    android:gravity="center"
    android:padding="10dp"
    android:layout_margin="0dp" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="15sp" />

</LinearLayout>

现在您可以自定义您的自定义选项卡布局，以及 Activity 选项卡的颜色和 tab_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Active tab -->
    <item android:drawable="@drawable/tab_bg_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
    <!-- Inactive tab -->
    <item android:drawable="@drawable/tab_bg_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <!-- Pressed tab -->
    <item android:drawable="@drawable/tab_bg_active" android:state_pressed="true"/>
    <!-- Selected tab (using d-pad) -->
    <item android:drawable="@drawable/tab_bg_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

</selector>