寻找适用于 Android、HTC Sense、Samsung 等皮肤的通用 TabHost 样式

Question

Android TabHost 的默认样式适用于普通 Android 系统。然而，在 HTC Sense 上，他们在深色背景上使用深色文本，这是不可读的。

让 TabHost 在所有不同风格的 Android 皮肤中显示可见文本的最简单方法是什么？如果可能的话，我宁愿不必制作完全定制的外观和感觉。

我的 targetSDK 是 10，我的 minSDK 是 7。

Answer 1

我将建议您完全独立于 TabWidget 并创建自己的导航，您可以根据需要自定义导航，而不必为僵硬的 TabWidget 烦恼。我并不是要扔掉很棒的 TabHost，因为使用 TabHost 进行自定义导航很容易：

首先将 TabWidget 设置为消失：

<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>

然后创建您自己的导航来代替它。您还可以创建一个菜单（使用硬件菜单按钮）或类似的内容：

<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>
        <!-- content of your tabs-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@id/slider_stub"
            android:background="@color/overview_banner_bg_down"/>
        <!-- custom slider with horizontal scrollable radio buttons-->
        <com.example.WrappingSlidingDrawer
            android:id="@+id/tab_slider"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:handle="@+id/tab_slider_handle"
            android:content="@+id/tab_scroller">
            <RelativeLayout
                android:id="@+id/tab_slider_handle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/def_slider">
            </RelativeLayout>
            <HorizontalScrollView
                android:id="@+id/tab_scroller"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fadeScrollbars="false"
                android:scrollbarAlwaysDrawHorizontalTrack="true"
                android:scrollbarTrackHorizontal="@drawable/scrollbar_horizontal_track"
                android:scrollbarThumbHorizontal="@drawable/scrollbar_horizontal_thumb"
                android:fillViewport="true"
                android:scrollbarSize="3dip"
                android:fadingEdgeLength="80dp"
                android:background="#343534">
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">
                    <RadioGroup
                        android:id="@+id/custom_tabs"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:orientation="horizontal"
                        android:checkedButton="@+id/tab_overview">
                        <RadioButton
                            android:id="@+id/tab_overview"
                            android:layout_height="55dp"
                            android:layout_width="55dp"
                            android:button="@null"
                            android:background="@drawable/def_checktab_overview"/>
                        <RadioButton
                            android:id="@+id/tab_news"
                            android:layout_height="55dp"
                            android:layout_width="55dp"
                            android:button="@null"
                            android:background="@drawable/def_checktab_news"/>
                            .....etc....your tabs......
                    </RadioGroup>
                </RelativeLayout>
            </HorizontalScrollView>
        </com.example.WrappingSlidingDrawer>
    </RelativeLayout>
</TabHost>

您现在必须在代码中做什么：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_tab_layout);

    setTabs();

    RadioGroup tabs = (RadioGroup) findViewById(R.id.custom_tabs);

    tabs.setOnCheckedChangeListener(new OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.tab_overview:
                getTabHost().setCurrentTab(0);
                break;
            case R.id.tab_news:
                getTabHost().setCurrentTab(1);
                break;
            ....etc.....
            }
        }
    });
}

/**
 * Delegate tab creation and adding.
 */
private void setTabs() {
    // add the necessary tabs
    addTab(R.string.tab_overv_tag, OverviewActivityGroup.class);
    addTab(R.string.tab_news_tag, NewsActivityGroup.class);
            .....etc.....
}

/**
 * Create a tab with an Activity and add it to the TabHost
 *  
 * @param tagId
 *            resource id of the string representing the tag for finding the tab    
 * @param activity
 *            the activity to be added
 */
private void addTab(int tagId, Class<? extends ActivityGroup> activity) {
    // create an Intent to launch an Activity for the tab (to be reused)
    Intent intent = new Intent().setClass(this, activity);
    // initialize a TabSpec for each tab and add it to the TabHost
    TabHost.TabSpec spec = usedTabHost.newTabSpec(getString(tagId));
    // use layout inflater to get a view of the tab to be added
    View tabIndicator = getLayoutInflater().inflate(R.layout.tab_indicator, getTabWidget(), false);
    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    usedTabHost.addTab(spec);
}

顺便说一句，不需要整个指示器的东西。^^ 在您的 ActivityGroups 中，您必须设置适当的 Activity 等. 你知道这些东西。

您可以使用任何内容进行导航，并且仍然可以利用 TabHost 的优势。只是不再为那个 TabWidget 烦恼了。 ;)

Answer 2

经过一些研究，我认为最好的选择是使用 ActionBar 的选项卡式界面，因为它看起来更容易设计样式。 ActionBarSherlock 为从 Android 1.6 开始的设备提供 ActionBar 兼容层。 在这里您可以查看示例，了解使用该库可以获得什么。