android开发步步为营之31：TabActivity的用法Tab显示在底部

Tab标签页是一个非常常用的控件，.net里面就有multipage+tabstrip组合通过标签的切换实现页面的切换，同理html里面我们常用frameset来实现，android里面我们则通过使用FrameLayout+TabWidget, FrameLayout里面装载xml页面，TabWidget显示标签，点击标签跳转到相关的activity或者view。
public class TabActivity extends ActivityGroup的详细继承关系如下：
     java.lang.Object
   ? android.content.Context
     ? android.content.ContextWrapper
       ? android.view.ContextThemeWrapper
         ? android.app.Activity
           ? android.app.ActivityGroup
             ? android.app.TabActivity
     可以看到，TabActivity是继承自Activity，包含了一个TabHost组件。TabHost组件则是继承自FrameLayout的ViewGroup。 TabHost组件本身的id必须是@android:id/tabhost，它必须包含一个FrameLayout，并且该FrameLayout的id必须是@android:id/tabcontent，此外还要包含一个TabWidget，id是@android:id/tabs。 FrameLayout可以放置每个单独的Activity，而TabWidget则是每个Tab页签。默认第一个页签对应的Activity，会首先显示在FrameLayout里。然后每次点击其他的Tab页签，对应的Activity就会切换显示到FrameLayout里。这个有点类似html中的frameset的概念。
     好，理论知识就介绍这么多，开始我们的实践，我们要实现的效果是：页面底部放置一个TabWidget，页头显示一个logo和文字介绍，页体则显示具体的activity对应的页面。让tab显示在底部的设置很简单，只要将TabWidget 的属性android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
这样设置即可，要显示在顶部则反一下即可
android:layout_alignParentBottom="false"
android:layout_alignParentTop="true"
 
第一步：创建页面
主页面：tabactivityview.xml 包含页头head_line 页体 FrameLayout 页脚TabWidget
  <?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
    android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
 
    <RelativeLayout android:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
 
        <include android:id="@+id/head_line" layout="@layout/head_line"
            android:layout_width="fill_parent" android:layout_height="wrap_content" />
 
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_below="@id/head_line" android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:layout_weight="1.0" />
 
        <TabWidget android:id="@android:id/tabs"
            android:layout_gravity="bottom" android:layout_height="60.0dip"
            android:layout_width="fill_parent" android:fadingEdge="none"
            android:fadingEdgeLength="0.0px" android:paddingLeft="0.0dip"
            android:paddingTop="2.0dip" android:paddingRight="0.0dip"
            android:paddingBottom="0.0dip" android:layout_alignParentBottom="false"
            android:layout_alignParentTop="true" />
 
    </RelativeLayout>
 
</TabHost>
 
页头：head_line.xml  包含图标和文字
 
  <RelativeLayout
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_height="wrap_content" android:src="@drawable/icon" android:layout_width="wrap_content" android:id="@+id/imageView1" android:layout_alignParentTop="true" android:layout_alignLeft="@+id/top_btn_left"></ImageView>
    <TextView android:gravity="center_horizontal" android:text="better pay,better life" android:layout_height="wrap_content" android:textSize="22.0sp" android:layout_width="wrap_content" android:layout_alignWithParentIfMissing="true" android:singleLine="true" android:id="@+id/top_title" android:ellipsize="middle" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></TextView>
 
</RelativeLayout>
 
标签：tab_item.xml 包含图标和文字
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/tab_item_imageview"
        android:layout_width="fill_parent" android:layout_height="32.0dip"
        android:scaleType="fitCenter" />
    <TextView android:id="@+id/tab_item_textview"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="center" android:singleLine="true"
        android:marqueeRepeatLimit="1" android:textSize="11.0sp"
        android:ellipsize="marquee" />
</LinearLayout>
 
第二步、创建Activity MyTabActivity.java
/**
 *
 */
package com.figo.helloworld;
 
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
 
/**
 * @author zhuzhifei
 *
 */
public class MyTabActivity extends TabActivity {
 
    private TabHost tabHost;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabactivityview);//设置显示的页面
        tabHost = getTabHost();//获取tabHost
        createTab();//创建tab集合
 
    }
 
    /**
     * 组装tab控件
     */
    private void createTab() {
 
        Resources res = getResources();
        createTabItem(R.drawable.icon,
                res.getString(R.string.pay), new Intent(this,
                        HelloWorldActivity.class));
        createTabItem(R.drawable.icon,
                res.getString(R.string.transact), new Intent(this,
                        ListViewActivity.class));
        createTabItem(R.drawable.icon,
                res.getString(R.string.account), new Intent(this,
                        HelloWorldActivity.class));
        createTabItem(R.drawable.icon,
                res.getString(R.string.message), new Intent(this,
                        HelloWorldActivity.class));
        createTabItem(R.drawable.icon,
                res.getString(R.string.tip), new Intent(this,
                        HelloWorldActivity.class));
 
    }
 
    /**
     * 生成tab_item
     *
     * @param imageResourceSelector
     *            图片选择器
     * @param text
     *            文本
     * @param intent
     *            intent
     */
    private void createTabItem(int imageResourceSelector, String text,
            Intent intent) {
 
        View view = View.inflate(this, R.layout.tab_item, null);// 拼装view
        ((ImageView) view.findViewById(R.id.tab_item_imageview))
                .setImageResource(imageResourceSelector);
        ((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);
 
        TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)
                .setContent(intent);// 将view注入spec,setContent有多个重载方法供使用
        tabHost.addTab(spec);
 
    }
}
 
 
第三步、AndroidManifest.xml注册Activity
        <activity android:name=".MyTabActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
第四步、运行效果
选中第一个tab
 

选中第二个tab