本專案使用了相對佈局和單選按鈕實現了安卓app常見的底部導航欄（帶有訊息圓點指示器），效果如果所示

一、佈局程式碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >


    <!-- Fragment顯示內容的容器 -->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/nav_layout" />
    
    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/nav_layout"
        android:background="@color/line_bg" />


    <LinearLayout
    android:id="@+id/nav_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">
    <!-- 首頁 -->
   <RelativeLayout
       android:id="@+id/rlHomePage"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:padding="2dp"
       android:background="@drawable/selector_nav_rl"
       android:layout_weight="2">


       <RadioButton
           android:id="@+id/rbtnHomePage"
           style="@style/nav_radio_style"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:checked="true"
           android:drawableTop="@drawable/selector_home_page"
           android:text="首頁"
           android:textColor="@color/nav_selector_text_color" />
       <!-- 訊息提示圓點 -->


       <TextView
           android:id="@+id/tvHomePageIndicator"
           android:layout_width="9dp"
           android:layout_height="9dp"
           android:layout_alignRight="@id/rbtnHomePage"
           android:layout_alignTop="@id/rbtnHomePage"
           android:layout_gravity="right"
           android:background="@drawable/shape_message_indicator"
           android:clickable="false"
           android:gravity="center" />
       
    </RelativeLayout>
   
   <!-- 養生 -->


   <RelativeLayout
       android:id="@+id/rlHealthPage"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:padding="2dp"
       android:background="@drawable/selector_nav_rl"
       android:layout_weight="2" >


       <RadioButton
           android:id="@+id/rbtnHealth"
           style="@style/nav_radio_style"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:drawableTop="@drawable/selector_health_page"
           android:text="養生"
           android:textColor="@color/nav_selector_text_color" />
       <!-- 訊息提示圓點 -->


       <TextView
           android:id="@+id/tvNoticeIndicator"
           android:layout_width="17dp"
           android:layout_height="17dp"
           android:layout_alignRight="@id/rbtnHealth"
           android:layout_alignTop="@id/rbtnHealth"
           android:layout_gravity="right"
           android:layout_marginRight="-5dp"
           android:background="@drawable/shape_message_indicator"
           android:gravity="center"
           android:text="99+"
           android:textColor="@color/white"
           android:textSize="8sp"
           android:textStyle="bold" />


    </RelativeLayout>
   
   <!-- 訊息 -->


   <RelativeLayout
       android:id="@+id/rlMessagePage"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:padding="1dp"
       android:background="@drawable/selector_nav_rl"
       android:layout_weight="2" >


       <RadioButton
           android:id="@+id/rbtnMessage"
           style="@style/nav_radio_style"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:drawableTop="@drawable/seletor_message_page"
           android:text="訊息"
           android:textColor="@color/nav_selector_text_color" />
       <!-- 訊息提示圓點 -->


       <TextView
           android:id="@+id/tvRelatedToMeIndicator"
           android:layout_width="17dp"
           android:layout_height="17dp"
           android:layout_alignRight="@id/rbtnMessage"
           android:layout_alignTop="@id/rbtnMessage"
           android:layout_gravity="right"
           android:background="@drawable/shape_message_indicator"
           android:clickable="false"
           android:gravity="center"
           android:text="99+"
           android:textColor="@color/white"
           android:textSize="8sp"
           android:textStyle="bold" />


    </RelativeLayout>
   
   <!-- 個人中心 -->


   <RelativeLayout
       android:id="@+id/rlMinePage"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:padding="2dp"
       android:background="@drawable/selector_nav_rl"
       android:layout_weight="2" >


       <RadioButton
           android:id="@+id/rbtnMine"
           style="@style/nav_radio_style"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:drawableTop="@drawable/selector_mine_page"
           android:text="個人中心"
           android:textColor="@color/nav_selector_text_color" />
        <!-- 訊息提示圓點 -->


       <TextView
           android:id="@+id/tvPersonalIndicator"
           android:layout_width="9dp"
           android:layout_height="9dp"
           android:layout_alignRight="@id/rbtnMine"
           android:layout_alignTop="@id/rbtnMine"
           android:layout_gravity="right"
           android:layout_marginRight="7dp"
           android:background="@drawable/shape_message_indicator"
           android:clickable="false"
           android:gravity="center" />
       
    </RelativeLayout>
   
   </LinearLayout>

</RelativeLayout>

整體的父佈局是相對佈局，底部導航欄使用了橫向的線性佈局，每個導航項又使用了相對佈局，在裡面放置相應的控制元件。相對佈局的特點就是要找好參照物，效能要比其他佈局好很多，控制元件的位置也比較好控制。用它來實現導航佈局是比較方便的。

導航項的狀態切換是通過單選按鈕的checked屬性來實現的。這裡使用了一個selector（選擇器），每一個導航項都有一個自己的選擇器。選擇器根據checked的屬性值來改變單選的背景和文字顏色，從而實現視覺效果的改變，效果很不錯。單選按鈕這一塊，需要注意的地方是要讓單選按鈕的”android:clickable“屬性為false，即讓單選按鈕不可以點選，否則在MainActivity切換fragment的時候會出現切換不成功的現象。

二、fragment的簡介

本專案的頁面切換使用了fragment。使用fragment佈局的好處之一就是可以動態地在Activity中進行新增、刪除和替換，這一特性使得fragment被廣泛應用，用於建立多個UI面板，靈活而且方便。每一個頁面都要建立一個Fragment類，重寫類中的onCreateView方法，載入對應的佈局檔案，以及對控制元件進行初始化。

在本專案中，我建立了一個BaseFragment基類，用於派生類的繼承。之前做專案的時候，發現所用到的fragment類有很多類似的程式碼段，例如Context、View物件，還有一些個人習慣的方法（findView、initView等），現在寫這個專案的時候，我進行程式碼重構，把它們都放到了fragment基類當中，複用程式碼，減少工作量。大家在寫專案當中多注意下這方面，學會優化程式碼。copy雖然很方便，但是它的壞處是顯而易見的，如果一處地方修改，其它地方可能也要隨之改變，到時候的工作量會讓你崩潰。所以，學會程式碼重構是一個程式設計師的進階過程。

三、fragment的切換

實現fragment的切換需要用到FragmentManager物件（fragment管理器）和FragmentTransaction（fragment事物管理物件）。實現fragment切換的過程如下：

（1）先新增所有的fragment物件到fragment事物管理物件當中，並提交事物。

（2）隱藏所有的fragment物件，然後顯示預設的fragment。

（3）在點選導航項切換fragment的時候也是隱藏所有的fragment物件，然後顯示預設的fragment。

（4）切換fragment的時候要改變單選按鈕的狀態，更新狀態。

兩個方法的程式碼如下：

/**
* 顯示指定的fragment
* 
* @param fragment
*/
private void showFragment(Fragment fragment) {
FragmentManager fm = getFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.show(fragment);
ft.commit();
}


/**
* 隱藏所有Fragment
*/
private void hideAllFragment() {
// 獲取Fragment管理器
FragmentManager fm = getFragmentManager();
// 獲取Fragment事物物件
FragmentTransaction ft = fm.beginTransaction();
for (Fragment fragment : mFragmentList) {
ft.hide(fragment);
}
// 提交事物
ft.commit();
}

demo原始碼地址下載:  http://download.csdn.net/detail/qq_33721382/9893220