Android 使用 XML 自定义 TabHosts

Question

我想在选中和取消选中时更改选项卡的背景颜色。此外，我希望向 TabHost 添加一些功能，例如边框。我已经创建了选项卡并具有当前内容。

更具体地说，我将上传一张我希望拥有的照片。它显示三个选项卡，其中选择了第二个选项卡。

Answer 1

首先使用 tabhost 创建 tabwidget。

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

            <HorizontalScrollView
                android:id="@+id/tabsHorizontalScrollView"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:scrollbars="none" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="0dip"
                    android:layout_marginRight="0dip"
                    android:fadingEdge="none"
                    android:showDividers="none" />
            </HorizontalScrollView>

            <!-- <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="#EFEFEF" /> -->

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

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

在我的案例中，我将我的 tabwidget 放在 horizo​​ntalscroll 中。

现在为选项卡背景创建布局(我创建为 tab_bg.xml)并粘贴此 xml 文件。

tab_bg.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/tab_bg_selector"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/horizontal_scroll_padding_topbottom"
    android:paddingLeft="@dimen/horizontal_scroll_padding_leftright"
    android:paddingRight="@dimen/horizontal_scroll_padding_leftright"
    android:paddingTop="@dimen/horizontal_scroll_padding_topbottom" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/tab_text_selector"
        android:textSize="@dimen/tab_txt_view_txt_size" />

</LinearLayout>

您可以根据自己的喜好更改颜色。

您再次创建 4 个 xml 文件并将其放入 drawable 文件夹中。

在我的例子中，我使用了 <1> tab_bg_selecter.xml

 <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

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

<2> tab_bg_selected.xml

<?xml version="1.0" encoding="UTF-8"?>

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >

        <gradient
            android:angle="-90"
            android:centerColor="#6EBD52"
            android:endColor="#6EBD52"
            android:startColor="#6EBD52" />

    </shape>

<3> tab_bg_unselected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="-90"
        android:centerColor="#ffffff"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

</shape>

<4> tab_text_selecter.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/black" />
    <item android:state_focused="true" android:color="@android:color/black" />
    <item android:state_pressed="true" android:color="@android:color/black" />
    <item android:color="#C7C7CC" />
</selector>

如果您想在选择标签时更改标签文本。

这个答案很长，但完全是定制的，希望对您有用。