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

Question

我在我的应用程序中使用tabHost，要求是当选择任何选项卡时，选项卡指示器的颜色应该改变，我引用了这个例子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>

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

<?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>