【Android UI设计与开发】第06期：底部菜单栏（一）使用TabActivity实现底部菜单栏

转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/8989063      

        从这一篇文章开始，我们将进入到一个应用程序主界面UI的开发和设计中了，底部菜单栏在Android的应用开发当中占有非常重要的地位。几乎所有的手机应用程序都有底部菜单栏这样的控件，主要是因为手机的屏幕大小有限，这样一种底部菜单栏实现起来的效果可以很方便的为用户切换自己所需要的界面，具有更强的交互性。底部菜单栏的样式和效果也是五花八门，多的数不胜数，但是实现的基本原理都是一样的。

        这个专题的几篇文章将更加详细的介绍几种大家比较常见的和效果比较炫的实例来进行讲解。话不多说，进入正题。

一、TabActivity之感叹

 

1、TabActivity的现状

 

       打开Google的API文档搜索TabActivity，在介绍这个类时会发现有这么一句话，

       大概的意思是说：这个类已经在Android4.0的系统中被弃用了，新的应用程序应该使用Fragment来代替该类的开发大家可以查看：Google开发文档

2、TabActivity是否还有存在的必要性

 

    其实谷歌有此举动，我们也应该早就想到了，为什么会这么说呢？那就要从TabActivity的原理开始说起了。

    做个假定先： 比如我们最外面的Activity是MainActivity, 第一个tab是FirstActivty, 第二个tab是SecondActivity。

相信大家都用过TabActivity, 它是一个特殊的Activity,它特殊的地方在哪里？有以下几点为证：     

    <1> 它看起来违反了Activity的单一窗口的原则。因为它可以同时加载几个activity， 当用户点击它上面的tab时，就会跳到相应的Activity上面去。

    <2> 用户首先进去FirstActivity，然后进去SecondActivity,再点击返回键的时候。它返回的界面不是FirstActivity,而是退出我们的应用程序。

    <3> 当用户在FirstActivity按返回键的时候，如果MainActivity和FirstActivity通过重写onKeyDown()方法，那么收到事件回调的只有FirstActivity。

3、谷歌当时的困扰

 

  <1> 首先我们要明白一点，android系统是单窗口系统，不像windows是多窗口的(比如在windows系统上，我们可以一边聊QQ，一边斗地主等等)。也就是说，在一个时刻，android里面只有一个activity可以显示给用户。这样就大大降低了操作系统设计的复杂性(包括事件派发等等)。

  <2> 但是像TabActivity那种效果又非常必要，用户体验也比较好。所以我觉得当时google开发人员肯定很纠结,于是，一个畸形的想法产生了，就是在单窗口系统下加载多个activity，它就是TabActivity。

4、TabActivity实现加载多个Activity原理

     我们都知道，想启动一个Activity，一般是调用startActivty(Intent i)方法，然后这个方法会辗转调用到ams(ActivityManagerService)来启动目标activity，所以，TabActivity实现的要点有两个：

     <1> 找到一个入口，这个入口可以访问到ActivityThread类(这个类是隐藏的，应用程序是访问不到的)，然后调用ActivityThread里面的启动activity方法

     <2> 绕开ams，就是我们TabActivity加载的FirstActivity和SecondActivity是不能让ams知道的。

     所以，一个新的类诞生了 ---- LocalActivityManager , 它的作用如下：

     <1> 这个类和ActivityThread处于一个包内，所以它有访问ActivityThread的权限。

     <2> 这个类提供了类似Ams管理Activity的方法，比如调用activity的onCreate方法，onResume()等等，维护了activity生命周期。

    也正如其名字一样，它是本地的activity管理。就是说它运行的进程和它管理的Activity是在一个进程里面。所以，当TabActivity要启动一个activity的时候，会调用到LocalActivityManager的创建activity方法，然后调用ActivityThread.startActivityNow()，这个方法绕过了ams，就是说ams此时根本不知道LocalActivityManager已经在暗渡陈仓的启动了一个activity(所以ams的task列表里面没有新启动activity的记录，所以用户按back键就直接退出我们的应用)。然后和正常启动activity一样，初始化activity，在初始化activity的时候，有个方法非常重要：activity.attch()

final void attach(...){
....
mWindow.setCallback(this);  
.....
}

mWindow.setCallback(this)这个方法非常重要，它设置了window的回调接口，这是我们activity能够接受到key事件的关键所在！因为在DecorView在接受到事件的时候，会回调这个接口，如

 final Callback cb = getCallback();
 final boolean handled = cb != null && mFeatureId < 0 ? cb.dispatchKeyEvent(event) : super.dispatchKeyEvent(event);

当我们启动FirstActivity的时候，我们设置FirstActivity为PhoneWindow的回调实现，所以，按back键的时候，调用的是FirstActivity的onKeyDown方法。

5、TabActivity小结

 

    从以上的种种分析来看，TabActivity只是一个怪胎而已。所以，在后面的发展中肯定会被代替，只是没想到会被替代的这么快。不经让我有了一种英雄暮路，美人辞暮的感觉，至少TabActivity曾经在Android2.2/2.3版本那么显赫一时，不过终究还是逃不过被谷歌遗弃的命运。

 

二、TabActivity实现方法

 

    说了这么多，那就让我们来看看它当年到底是怎样的叱咤风云，我们将使用两种不同的方式来实现，但是最终的效果都是一样的，

如下图所示：

三、程序的目录结构

 

 

四、具体的编码实现

 

（1）第一种实现方式：自定义TabWidget

 

1、首先创建一个TabWidget的布局文件，main_tab_layout1.xml：

<?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="fill_parent"
    android:layout_height="fill_parent">
    
    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">

        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent" 
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />
            
        <TabWidget 
            android:id="@android:id/tabs" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:padding="2dip"
            android:background="@drawable/tab_widget_background"
            android:layout_weight="0.0"/>
            
    </LinearLayout>
    
</TabHost>

注意： 

     <1> 不管你是使用TabActivity 还是自定义TabHost，都要求以TabHost作为XML布局文件的根；

     <2> 将FrameLayout的属性值layout_weight设置为了1.0，这样就可以把TabWidget的组件从顶部挤了下来变成了底部菜单栏。

     <3> <TabWidger> 和<FrameLayout>的Id 必须使用系统id，分别为android:id/tabs 和 android：id/tabcontent 。因为系统会使用者两个id来初始化TabHost的两个实例变量（mTabWidget 和 mTabContent）。

 

2、然后在定义一个tab_item_view.xml布局文件，这个布局文件在后面初始化Tab按钮的时候会用到

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

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:padding="3dp" >
    </ImageView>

    <TextView
        android:id="@+id/textview"
        style="@style/tab_item_text_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TextView>

</LinearLayout>

3、这里我为了方便Tab按钮字体和背景格式的统一，在styles.xml数据文件中还添加了以下内容：

    <style name="tab_item_text_style">
        <item name="android:textSize">10.0dip</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>       
        <item name="android:singleLine">true</item>
    </style>
    
    <style name="tab_item_background">
        <item name="android:textAppearance">@style/tab_item_text_style</item>       
        <item name="android:gravity">center_horizontal</item>  
        <item name="android:background">@drawable/selector_tab_background2</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>         
        <item name="android:drawablePadding">3.0dip</item>
        <item name="android:layout_weight">1.0</item>
    </style>

4、定义一个自定义Tab按钮资源文件，selector_tab_background.xml：

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

    <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_item_d" android:state_selected="true"/>

</selector>

5、最后在定义几个用来存放Tab选项卡内容的activity布局文件，由于几个布局文件的内容都差不多，所以这里就列出一个给读者参考，有需要的话可以直接下载源码，activity1_layout.xml：

<?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" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian01" >
    </ImageView>

</LinearLayout>

6、布局完毕，接下来讲解java代码，定义一个常量工具类，Constant.java：

package com.yangyu.mycustomtab01;

/**
 * @author yangyu
 *    功能描述：常量工具类
 */
public class Constant {

    
    public static final class ConValue{
        
        /**
         * Tab选项卡的图标
         */
        public static int   mImageViewArray[] = {R.drawable.tab_icon1,
                             R.drawable.tab_icon2,
                             R.drawable.tab_icon3,
                             R.drawable.tab_icon4,
                             R.drawable.tab_icon5};

        /**
         * Tab选项卡的文字
         */
        public static String mTextviewArray[] = {"主页", "关于", "设置", "搜索", "更多"};
        
        
        /**
         * 每一个Tab界面
         */
        public static Class mTabClassArray[]= {Activity1.class,
                               Activity2.class,
                               Activity3.class,
                               Activity4.class,
                               Activity5.class};
    }
}

7、定义自定义Tab选项卡Activity类，在这个类中我们可以采用两种方法编写标签页：

<1> 第一种是继承TabActivity ,然后使用getTabHost()获取TabHost对象；

<2> 第二种方法是使用自定的TabHost在布局文件上<TabHost>的自定义其ID，然后通过findViewById()，方法获得TabHost对象。

 

本文中采用是继承TabActivity的方法，CustomTabActivity1.java：

package com.yangyu.mycustomtab01;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

import com.yangyu.mycustomtab01.Constant.ConValue;

/**
 * @author yangyu
 *  功能描述：第一种实现方法,自定义TabHost
 */
public class CustomTabActivity1 extends TabActivity{
    
    //定义TabHost对象
    private TabHost    tabHost;
    
    //定义一个布局
    private LayoutInflater layoutInflater;
        
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout1);
        
        initView();
    }
     
    /**
     * 初始化组件
     */
    private void initView(){
        //实例化TabHost对象，得到TabHost
        tabHost = getTabHost();
        
        //实例化布局对象
        layoutInflater = LayoutInflater.from(this);
        
        //得到Activity的个数
        int count = ConValue.mTabClassArray.length;    
                
        for(int i = 0; i < count; i++){    
            //为每一个Tab按钮设置图标、文字和内容
            TabSpec tabSpec = tabHost.newTabSpec(ConValue.mTextviewArray[i]).setIndicator(getTabItemView(i)).setContent(getTabItemIntent(i));
            //将Tab按钮添加进Tab选项卡中
            tabHost.addTab(tabSpec);
            //设置Tab按钮的背景
            tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
        }
    }
            
    /**
     * 给Tab按钮设置图标和文字
     */
    private View getTabItemView(int index){
        View view = layoutInflater.inflate(R.layout.tab_item_view, null);
    
        ImageView imageView = (ImageView) view.findViewById(R.id.imageview);

        if (imageView != null){
            imageView.setImageResource(ConValue.mImageViewArray[index]);
        }        
        TextView textView = (TextView) view.findViewById(R.id.textview);
        
        textView.setText(ConValue.mTextviewArray[index]);
    
        return view;
    }
    
    /**
     * 给Tab选项卡设置内容（每个内容都是一个Activity）
     */
    private Intent getTabItemIntent(int index){
        Intent intent = new Intent(this, ConValue.mTabClassArray[index]);
        
        return intent;
    }
}

这段代码比较复杂，我们需要详细分析一下：

  <1> 首先需要做的是获取TabHost对象，可以通过TabActivtiy里的getTabHsot()方法；

  <2> 接着向TabHost添加tabs.即调用tabHost.addTab(TabSpec) 方法。TabSpec主要包含了setIndicator 和 setContent 方法，通过这两个方法来指定Tab 和 TanContent；

  <3> TabSpec 通过 .newTabSpec(String tag)来创建实例。实例化后对其属性进行设置。setIndicator()设置tab,它有3个重载的函数：

• public TabHost.TabSpec  setIndicatior(CharSwquence label,Drawable icon).指定tab的标题和图标。
• public TabHost.TabSpec (View view)通过View来自定义tab
• public TabHost.TabSpec(CharSequence label) 指定tab的标题，此时无图标。

  <4> setContent 指定tab的展示内容，它也有3种重载：

• public TabHost.TabSpec setContent(TabHost.TabContentFactory )
• public TabHost.TabSpec setContent(int ViewId)
• public TabHost.TabSpec setContent(Intent intent)

　　

     后两种方法比较后理解一个是通过 ViewId指定显示的内容，如.setContent(R.id.Team_EditText)，第三种则是直接通过Intent加载一个新的Activity页。如.setContent(new Intent(this, MeetingActivity.class)));

 

 

8、最后再定义Tab选项卡内容的Activity，这里只列出一个，Activity1.java：

package com.yangyu.mycustomtab01;

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

public class Activity1 extends Activity{

    private final static String TAG = "Activity1";
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity1_layout);
        
        Log.i(TAG, "=============>onCreate");
    }

    @Override
    protected void onResume() {
        super.onResume();    
         Log.i(TAG, "=============>onResume");
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();    
         Log.i(TAG, "=============>onDestroy");
    }        
}

（二）第二中实现方式：隐藏TabWidget，通过RadioGroup和RadioButton实现底部菜单栏

 

这种方式更漂亮，也更灵活，大部分的应用程序基本都是使用这种方式，通过setCurrentTabByTag()方法来切换不同的选项卡。

1、首先创建一个布局界面，main_tab_layout2.xml：

<?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="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="0.0dip"
            android:layout_weight="1.0" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

        <RadioGroup
            android:id="@+id/main_radiogroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/tab_widget_background"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="2dip" >

            <RadioButton
                android:id="@+id/RadioButton0"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon1"
                android:text="主页" />

            <RadioButton
                android:id="@+id/RadioButton1"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon2"
                android:text="关于" />

            <RadioButton
                android:id="@+id/RadioButton2"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon3"
                android:text="设置" />

            <RadioButton
                android:id="@+id/RadioButton3"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon4"
                android:text="搜索" />

            <RadioButton
                android:id="@+id/RadioButton4"
                style="@style/tab_item_background"
                android:drawableTop="@drawable/tab_icon5"
                android:text="更多" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

2、然后在定义几个用来存放Tab选项卡内容的activity布局文件，这里只列出一个activity1_layout.xml：

<?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" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/xianjian01" >
    </ImageView>

</LinearLayout>

3、最后再定义一个自定义Tab按钮的资源文件，selector_tab_background2.xml：

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

    <item android:drawable="@drawable/tab_item_p" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_item_d" android:state_checked="true"/>

</selector>

4、布局界面讲解完毕，接下来详细讲解java代码

package com.yangyu.mycustomtab01;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

import com.yangyu.mycustomtab01.Constant.ConValue;

/**
 * @author yangyu
 *    功能描述：第二种实现方式，自定义RadioGroup
 */
public class CustomTabActivity2 extends TabActivity{
    
    //定义TabHost对象
    private TabHost tabHost;
    
    //定义RadioGroup对象
    private RadioGroup radioGroup;
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout2);
        
        initView();
        
        initData();
    }
    
    /**
     * 初始化组件
     */
    private void initView(){
        //实例化TabHost，得到TabHost对象
        tabHost = getTabHost();
        
        //得到Activity的个数
        int count = ConValue.mTabClassArray.length;                
                
        for(int i = 0; i < count; i++){    
            //为每一个Tab按钮设置图标、文字和内容
            TabSpec tabSpec = tabHost.newTabSpec(ConValue.mTextviewArray[i]).setIndicator(ConValue.mTextviewArray[i]).setContent(getTabItemIntent(i));
            //将Tab按钮添加进Tab选项卡中
            tabHost.addTab(tabSpec);
        }
        
        //实例化RadioGroup
        radioGroup = (RadioGroup) findViewById(R.id.main_radiogroup);
    }
    
    /**
     * 初始化组件
     */
    private void initData() {
        // 给radioGroup设置监听事件
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.RadioButton0:
                    tabHost.setCurrentTabByTag(ConValue.mTextviewArray[0]);
                    break;
                case R.id.RadioButton1:
                    tabHost.setCurrentTabByTag(ConValue.mTextviewArray[1]);
                    break;
                case R.id.RadioButton2:
                    tabHost.setCurrentTabByTag(ConValue.mTextviewArray[2]);
                    break;
                case R.id.RadioButton3:
                    tabHost.setCurrentTabByTag(ConValue.mTextviewArray[3]);
                    break;
                case R.id.RadioButton4:
                    tabHost.setCurrentTabByTag(ConValue.mTextviewArray[4]);
                    break;
                }
            }
        });
        ((RadioButton) radioGroup.getChildAt(0)).toggle();
    }
    
    /**
     * 给Tab选项卡设置内容（每个内容都是一个Activity）
     */
    private Intent getTabItemIntent(int index){
        Intent intent = new Intent(this, ConValue.mTabClassArray[index]);    
        return intent;
    }
}

5、最后再定义Tab选项卡内容的Activity，这里只列出一个Activity1.java：

package com.yangyu.mycustomtab01;

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

public class Activity1 extends Activity{

    private final static String TAG = "Activity1";
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity1_layout);
        
        Log.i(TAG, "=============>onCreate");
    }

    @Override
    protected void onResume() {
        super.onResume();    
         Log.i(TAG, "=============>onResume");
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();    
         Log.i(TAG, "=============>onDestroy");
    }        
}

三）这里为了演示方便，我把两种效果放到了一个应用程序里

 

   1、效果图所示：

2、主布局界面activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background" >

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button1"
        android:layout_below="@+id/button1"
        android:background="@drawable/selector_btn"
         android:padding="10dp"
        android:text="RadioGroup"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="186dp"
        android:background="@drawable/selector_btn"
        android:padding="10dp"
        android:text="CustomTab" />

</RelativeLayout>

3、然后定义一个自定义按钮资源文件，selector_btn.xml：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_press" android:state_pressed="true"/>
    <item android:drawable="@drawable/btn_background"/>

</selector>

4、最后是主界面Activity类，MainActivity.java：

package com.yangyu.mycustomtab01;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

    //定义Button按钮对象
    private Button btn1,btn2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        initView();
    }

    /**
     * 初始化组件
     */
    private void initView(){
        //实例化按钮对象
        btn1 = (Button)findViewById(R.id.button1);
        btn2 = (Button)findViewById(R.id.button2);

        //设置监听，进入CustomTab界面
        btn1.setOnClickListener(new OnClickListener() {            
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,CustomTabActivity1.class));
            }
        });
        
        //设置监听，进入RadioGroup界面
        btn2.setOnClickListener(new OnClickListener() {            
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,CustomTabActivity2.class));
            }
        });
    }
}

 今天就写到这里吧，下一篇继续给大家带来底部菜单栏的实例讲解，希望大家可以继续支持，晚安了

源码下载地址