Android 底部TabActivity（2）——ActivityGroup|顶部底部均有Tab标签之一

今天这篇文章记述一下页面顶部底部上下均有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  * @versionV1.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>

到此为止，全部代码就可以玩了！看一下最终效果。

虽然代码很简单，但还是提供个连接吧！

源码点击下载