Android中TabHost主界面实现

App 主界面常用底部选项卡（Tab）做入口。本篇讲较古老的一套：TabActivity + TabHost：布局三区、系统页卡、再用自定义 View 换图标和文字选中态。FragmentActivity 方案另文再写。

一、Tab 主界面长什么样

先看一个底部页卡的 App 主界面：点不同 Tab 切到不同内容页。

屏幕通常分成三块：标题区、页卡内容区、页卡区。

二、布局：TabHost + TabWidget + FrameLayout

TabWidget 是页卡条，FrameLayout（@android:id/tabcontent）是内容区。底部 Tab 用 layout_alignParentBottom，内容区 layout_above 顶在 Tab 上面。

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@android:color/white" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@android:id/tabs" >
        </FrameLayout>
    </RelativeLayout>

</TabHost>

三、代码：newTabSpec + Intent 内容页

getTabHost() 拿到 Host，每个页卡一个 TabSpec：setIndicator 设标题，setContent(Intent) 指向对应 Activity。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_tab1_layout);

    TabHost tabHost = getTabHost();

    TabSpec tabSpec1 = tabHost.newTabSpec("tab1");
    tabSpec1.setIndicator("页卡1");
    tabSpec1.setContent(new Intent(context, RadioButtonActivity.class));

    TabSpec tabSpec2 = tabHost.newTabSpec("tab2");
    tabSpec2.setIndicator("页卡2");
    tabSpec2.setContent(new Intent(context, LinerLayoutAcitiy.class));

    TabSpec tabSpec3 = tabHost.newTabSpec("tab3");
    tabSpec3.setIndicator("页卡3");
    tabSpec3.setContent(new Intent(context, SimpleListActivity.class));

    tabHost.addTab(tabSpec1);
    tabHost.addTab(tabSpec2);
    tabHost.addTab(tabSpec3);
}

这样出来的是系统默认页卡。要图标+选中色，改用 setIndicator(View) 塞自定义 View。

四、自定义页卡 View 与 selector

inflate 页卡布局，按 Tab 常量填标题和图标 selector：

private View createIndicatorView(int tab) {
    View view = mLayoutInflater.inflate(R.layout.view_tab_item_layout, null);

    TextView titleTxt = (TextView) view.findViewById(R.id.tab_title);
    ImageView iconImg = (ImageView) view.findViewById(R.id.tab_icon);

    switch(tab){
    case HOME_TAB:
        titleTxt.setText("首页");
        iconImg.setImageResource(R.drawable.selector_drawable_home_tab);
        break;
    case CONTENT_TAB:
        titleTxt.setText("商家");
        iconImg.setImageResource(R.drawable.selector_drawable_content_tab);
        break;
    case MORE_TAB:
        titleTxt.setText("更多");
        iconImg.setImageResource(R.drawable.selector_drawable_set_tab);
        break;
    }

    return view;
}

页卡图标 selector（pressed / selected 用亮图，默认暗图）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_menu_more_on" android:state_pressed="true"></item>
    <item android:drawable="@drawable/ic_menu_more_on" android:state_selected="true"></item>
    <item android:drawable="@drawable/ic_menu_more_off"></item>

</selector>

页卡文字颜色 selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="@color/green_tab"></item>
    <item android:state_selected="true" android:color="@color/green_tab"></item>
    <item android:color="@color/darker_gray_tab"></item>

</selector>

页卡 item 布局（文字颜色、图标都指向 selector）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingTop="3dp"
    android:paddingBottom="3dp">

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/selector_color_home_tab"
        android:text="首页" />

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/selector_drawable_home_tab"/>

</LinearLayout>

实现效果：

一句话总结：TabHost 主界面 = 底部 TabWidget + 上面 tabcontent；系统页卡用 setIndicator(文字)，好看的页卡用自定义 View + selector 换图标和选中色。