Android使用XML自定义TabHosts

时间:2015-12-21 18:25:06

标签: android android-layout android-tabhost android-xml

我想在选中和取消选中时更改标签的背景颜色。另外,我希望像TabHost一样添加一些功能。 我已经创建了标签并使用了当前的内容。

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

TabHost Layout

2 个答案:

答案 0 :(得分: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文件并将其放入可绘制文件夹中。

在我的情况下,我使用&lt; 1&gt; 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>

&LT 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>

&LT 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>

&LT 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>

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

这个答案冗长但完全定制,希望它对你有用。

答案 1 :(得分:0)

在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;
    }

它可能对您有所帮助。