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

来源：互联网发布：淘宝助手官方网站编辑：程序博客网时间：2024/05/16 11:39

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

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

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

step1：首先是主界面MainActivity.java

[java] view plaincopy
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：主页面对应的布局文件

[html] view plaincopy
<?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），什么也没做，只加载了个简单的布局！

[java] view plaincopy
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，什么也也没有！

[html] view plaincopy
<?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。

[java] view plaincopy
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。

[html] view plaincopy
<?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。

[html] view plaincopy
<?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>  

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

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

0 0