学习-TabHost选项卡简单使用

2016-03-19 / 7 阅读 / Android

选项卡TabHost是一种非常实用的组件,比如qq,淘宝的app中都使用了tab布局。TabHost可以很方便的在同一块窗口放上多个标签页,并且可以切换。例如手机上的通讯录,包括“未接电话”,“已接电话”等...
使用TabHost使用时可以继承TabActivity,不过现在谷歌也不提倡这样使用了,而且也不太灵活,所以我只尝试了另一种方式。

配合组件:
TabWidget:选项卡的标签条
FrameLayout:用来显示各个标签页

整体布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TabHost
        android:id="@android:id/tabhost"
        android:background="#9c73ff"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TabWidget
                android:id="@android:id/tabs"
                android:background="#ff3cb0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <FrameLayout
                    android:id="@+id/tab1"
                    android:background="#81ab4e"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <TextView
                        android:textColor="#ff0000"
                        android:text="Tab1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
                </FrameLayout>
                <FrameLayout
                    android:id="@+id/tab2"
                    android:background="#666666"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <TextView
                        android:textColor="#ff0000"
                        android:text="Tab2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
                </FrameLayout>
                <FrameLayout
                    android:id="@+id/tab3"
                    android:background="#888888"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <TextView
                        android:textColor="#ff0000"
                        android:text="Tab3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
                </FrameLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

这边几个Id也必须使用系统自带的。组件的方法会用到,设成自己的系统就找不到了。

@android:id/tabhost

@android:id/tabs

@android:id/tabcontent

        mytab.setup();

        mytab.addTab(mytab.newTabSpec("tab1").setIndicator("未读").setContent(R.id.tab1));
        mytab.addTab(mytab.newTabSpec("tab2").setIndicator("已读").setContent(R.id.tab2));
        mytab.addTab(mytab.newTabSpec("tab3").setIndicator("标记").setContent(R.id.tab3));

效果:

相关推荐