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 放在 horizontalscroll 中。

现在为选项卡背景创建布局（我创建为 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>

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

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

Answer 2

在 oncreate() 方法中调用此方法

setupTabHost();

然后使用它来设置选项卡名称，因为在我的例子中它是 A2Z 字符

for (ch = 'A'; ch <= 'Z'; ch++) {
            charToString = String.valueOf(ch);
            setupTab(new TextView(this), charToString);
        }

终于在 oncreate 之外使用了它；

// TODO Auto-generated method stub
 private void setupTabHost() {
        // TODO Auto-generated method stub
        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup();
    }              



                private void setupTab(final View view, final String tag) {
// TODO Auto-generated method stub
View tabview = createTabView(mTabHost.getContext(), tag);

TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview)
        .setContent(new TabContentFactory() {
            public View createTabContent(String tag) {
                return view;
            }
        });
mTabHost.addTab(setContent);

}

private View createTabView(final Context context, final String text) {
        // TODO Auto-generated method stub
        View view = getLayoutInflater().inflate(R.layout.tabs_bg, null);
        tabTextView = (TextView) view.findViewById(R.id.tabsText);
        tabTextView.setText(text);
        return view;
    }

可能对您有所帮助。

Android 使用 XML 自定义 TabHosts

Android Customize TabHosts Using XML

android

android-layout

android-tabhost

android-xml