Android 底部TabActivity（2）——ActivityGroup

浏览数：153 / 时间：2015年06月11日

今天这篇文章记述一下页面顶部底部上下均有Tab标签页的特殊需求！使用了过时的ActivityGroup。

再看一下整个Project的结构，如下

下面逐一介绍一下实现过程，一贯风格，具体实现还是看注释吧，代码也不是很多，就不啰嗦了。

step1：首先是主界面MainActivity.java

package sun.geoffery.tabtopbottom;

import android.app.ActivityGroup;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Window;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TabWidget;
import android.widget.TextView;

/**
 * All rights Reserved, Designed By GeofferySun
 * 
 * @Title: MainActivity.java
 * @Package sun.geoffery.tabtopbottom
 * @Description:上下都有Tab的界面
 * @author: GeofferySun
 * @date: 2014-12-9 下午3:41:04
 * @version V1.0
 */
public class MainActivity extends ActivityGroup {
	// 定义一个TabHost控件
	private TabHost mTabHost;

	public void onCreate(Bundle savedInstanceState) {
		
		// 设置隐藏标题栏
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		// 获取TabHost布局
		mTabHost = (TabHost) findViewById(R.id.tabhost);
		mTabHost.setup(this.getLocalActivityManager());

		TabSpec _tab;
		
		_tab = mTabHost.newTabSpec("home");
		_tab.setIndicator("首页", getResources().getDrawable(R.drawable.ic_launcher));
		_tab.setContent(new Intent(this, HomeActivity.class));
		mTabHost.addTab(_tab);

		_tab = mTabHost.newTabSpec("order");
		_tab.setIndicator("订单", getResources().getDrawable(R.drawable.ic_launcher));
		_tab.setContent(new Intent(this, OrderActivity.class));
		mTabHost.addTab(_tab);

		_tab = mTabHost.newTabSpec("wallet");
		_tab.setIndicator("钱包", getResources().getDrawable(R.drawable.ic_launcher));
		_tab.setContent(new Intent(this, WalletActivity.class));
		mTabHost.addTab(_tab);

		// 设置第一个标签页被选中
		mTabHost.setCurrentTab(0);

		TabWidget tabWidget = mTabHost.getTabWidget();
		
		for (int i = 0; i < tabWidget.getChildCount(); i++) {
			TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
			tv.setTextColor(Color.LTGRAY);// 设置Tab栏字体的颜色
		}
	}
}

step2：主页面对应的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 选项卡布局必须要用TabHost -->
    <TabHost
        android:id="@+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" >

            <!-- 帧布局 -->
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            
            <!-- TabWidget是Tab标签的使用 -->
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0" 
                android:background="#404040"/>
        </LinearLayout>
    </TabHost>

</LinearLayout>

step3：普通的单独页面HomeActivity.java（和WalletActivity.java），什么也没做，只加载了个简单的布局！

package sun.geoffery.tabtopbottom;

import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple);
    }
}

step4：普通的单独页面HomeActivity.java（和WalletActivity.java）的布局文件activity_simple.xml，什么也也没有！

<?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:background="#FFCC00"
    android:orientation="vertical" >
    
</LinearLayout>

step5：重点来了，顶部也要加上Tab标签的页面OrderActivity.java。

package sun.geoffery.tabtopbottom;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;

/**
 * All rights Reserved, Designed By GeofferySun 
 * @Title: 	OrderActivity.java 
 * @Package sun.geoffery.tabtopbottom 
 * @Description:顶部Tab页面
 * @author:	GeofferySun   
 * @date:	2014-12-9 下午5:31:00 
 * @version	V1.0
 */
public class OrderActivity extends Activity {
	private TabHost mTabHost;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        
        mTabHost = (TabHost) findViewById(R.id.mytabhost);
        mTabHost.setup();
		
		TabWidget tabWidget = mTabHost.getTabWidget();
		mTabHost.addTab(mTabHost.newTabSpec("待服务").setIndicator("待服务").setContent(R.id.page0));
		mTabHost.addTab(mTabHost.newTabSpec("已完成").setIndicator("已完成").setContent(R.id.page1));
		mTabHost.addTab(mTabHost.newTabSpec("已取消").setIndicator("已取消").setContent(R.id.page2));
		
		int height =120; 
//      int width =45;  
		
		for(int i=0;i<tabWidget.getChildCount();i++){
			// 设置高度、宽度，由于宽度设置为fill_parent，在此对它没效果
			tabWidget.getChildAt(i).getLayoutParams().height=height;
			// 设置tab中标题文字的颜色，不然默认为黑色 
			final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
			tv.setTextColor(Color.LTGRAY);
		}
	}
}

step6：顶部Tab页面对应的布局文件activity_tab.xml。

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#404040" />

        <!-- 注意FrameLayout/TabWidget标签的位置 -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <TextView
                android:id="@+id/page0"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#6699FF"
                android:text="待服务页面" >
            </TextView>

            <TextView
                android:id="@+id/page1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FF9900"
                android:text="已完成页面" >
            </TextView>

            <TextView
                android:id="@+id/page2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#99cc33"
                android:text="已取消页面" >
            </TextView>
        </FrameLayout>
    </LinearLayout>

</TabHost>

step7：最后是清单文件Manifest.xml。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sun.geoffery.tabtopbottom"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".OrderActivity"></activity>
        <activity android:name=".HomeActivity"></activity>
        <activity android:name=".WalletActivity"></activity>
    </application>

</manifest>

到此为止，全部代码就可以玩了！