【Android UI設計與開發】第06期：底部選單欄（一）使用TabActivity實現底部選單欄
阿新 • • 發佈：2018-12-23
轉載請註明出處：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);
.....
} final Callback cb = getCallback();
final boolean handled = cb != null && mFeatureId < 0 ? cb.dispatchKeyEvent(event) : super.dispatchKeyEvent(event);
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>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> <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><?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><?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>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};
}
}
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;
}
}
- public TabHost.TabSpec setIndicatior(CharSwquence label,Drawable icon).指定tab的標題和圖示。
- public TabHost.TabSpec (View view)通過View來自定義tab
- public TabHost.TabSpec(CharSequence label) 指定tab的標題，此時無圖示。
- public TabHost.TabSpec setContent(TabHost.TabContentFactory )
- public TabHost.TabSpec setContent(int ViewId)
- public TabHost.TabSpec setContent(Intent intent)
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");
}
}
這種方式更漂亮，也更靈活，大部分的應用程式基本都是使用這種方式，通過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><?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><?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>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;
}
}
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><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>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));
}
});
}
}
今天就寫到這裡吧，下一篇繼續給大家帶來底部選單欄的例項講解，希望大家可以繼續支援，晚安了。