注意:

本文主要介紹安卓自定義底部導(dǎo)航欄（iOS中成為T(mén)abBar）；寫(xiě)的不盡如人意的地方，請(qǐng)見(jiàn)諒~

概述如下：

• 環(huán)境 ：Android Studio 1.4 for Mac
• 語(yǔ)言 ：如果我沒(méi)猜錯(cuò)的話，應(yīng)該是Java
• 特點(diǎn) ：簡(jiǎn)單、直接、暴力熙含，絕對(duì)讓你有快感！ＭХ摹怎静！

展示

1.效果展示

tabbar_01.gif

2.工程目錄結(jié)構(gòu)

tabbar_prj_01.png

tabbar_prj_02.png

簡(jiǎn)要說(shuō)明

主要用到的文件已為大家用綠色的方框標(biāo)出來(lái)了邮弹；

- Java類
MainActivity：還用解釋？
ShowTabbarActivity：展示自定義Tabbar的類（iOS中可以理解為在ViewController中調(diào)用）
TestFragment1 - 4：每個(gè)底部按鈕的控制器

- 布局
activity_main：不解釋
activity_showtabbar.xml：ShowTabbarActivity.java綁定的頁(yè)面
fragment_test1.xml - fragment_test4.xml：自定義TabbarItem（就是每個(gè)按鈕的頁(yè)面）的布局頁(yè)面

- 資源（我覺(jué)得這么叫就是對(duì)的ｒ酒浮ｋ缦纭！）:主要用于存放按鈕圖片和點(diǎn)擊狀態(tài)
tabbar_ruiku_selector.xml
tabbar_yuyue_selector.xml
tabbar_xiaoxi_selector.xml
tabbar_wode_selector.xml

1.開(kāi)始寫(xiě)布局

1.1 -- 主頁(yè)面

activity_main.xml

<LinearLayout    
              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"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              android:paddingBottom="@dimen/activity_vertical_margin"
              tools:context=".MainActivity">

      <Button
              android:id="@+id/tabbar_btn"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="展示TabBar"
              android:background="#f1d605"/>

</LinearLayout>

簡(jiǎn)要說(shuō)明

就是一個(gè)按鈕而已

1.2 -- Tabbar布局頁(yè)面

activity_showtabbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
              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"
              android:orientation="vertical">
      <FrameLayout
              android:id="@+id/content"
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="1"/>

<!-- Tabbar背景色 -->
      <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="55dp"
              android:background="#FFFFFF">

<!-- 睿庫(kù) -->
      <RelativeLayout
              android:id="@+id/ruiku_layout"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1">
              <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:orientation="vertical">
                        <ImageView
                                    android:id="@+id/ruiku_iv"
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:layout_marginBottom="-10dip"
                                    android:layout_marginTop="-10dip"
                                    android:layout_gravity="center_horizontal"
                                    android:src="@drawable/tabbar_ruiku_selector"/>
                        <TextView
                                    android:id="@+id/ruiku_tv"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_horizontal"
                                    android:text="睿庫(kù)"
                                    android:textColor="#7597B3"/>
              </LinearLayout>
      </RelativeLayout>

<!-- 預(yù)約 -->
      <RelativeLayout
              android:id="@+id/yuyue_layout"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1">
              <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:orientation="vertical">
                        <ImageView
                                    android:id="@+id/yuyue_iv"
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:layout_marginBottom="-10dip"
                                    android:layout_marginTop="-10dip"
                                    android:layout_gravity="center_horizontal"
                                    android:src="@drawable/tabbar_yuyue_selector"/>
                        <TextView
                                    android:id="@+id/yuyue_tv"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_horizontal"
                                    android:text="預(yù)約"
                                    android:textColor="#7597B3"/>
              </LinearLayout>
      </RelativeLayout>

<!-- 消息 -->
      <RelativeLayout
              android:id="@+id/xiaoxi_layout"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1">
              <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:orientation="vertical">
                        <ImageView
                                    android:id="@+id/xiaoxi_iv"
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:layout_marginBottom="-10dip"
                                    android:layout_marginTop="-10dip"
                                    android:layout_gravity="center_horizontal"
                                    android:src="@drawable/tabbar_xiaoxi_selector"/>
                        <TextView
                                    android:id="@+id/xiaoxi_tv"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_horizontal"
                                    android:text="消息"
                                    android:textColor="#7597B3"/>
              </LinearLayout>
      </RelativeLayout>

<!-- 我的 -->
      <RelativeLayout
              android:id="@+id/wode_layout"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1">
              <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:orientation="vertical">
                        <ImageView
                                    android:id="@+id/wode_iv"
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:layout_marginBottom="-10dip"
                                    android:layout_marginTop="-10dip"
                                    android:layout_gravity="center_horizontal"
                                    android:src="@drawable/tabbar_wode_selector"/>
                        <TextView
                                    android:id="@+id/wode_tv"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_horizontal"
                                    android:text="我的"
                                    android:textColor="#7597B3"/>
              </LinearLayout>
      </RelativeLayout>

簡(jiǎn)要說(shuō)明

自我感覺(jué)FrameLayout類似于iOS中的frame夜牡，在Android中給這個(gè)tabbar的frame綁定id与纽，設(shè)置frame的屬性；

然后氯材，給一個(gè)線性布局渣锦，給個(gè)高度和顏色，如果你們UI給了背景圖氢哮，就直接上；

四個(gè)按鈕我使用的是相對(duì)布局包線性布局型檀，為什么要這樣冗尤？?jī)H僅是我喜歡而已，布局多種多樣胀溺，看你自己了裂七；你看，我在imageView中的layout_marginTop = -10仓坞，是因?yàn)橹挥羞@個(gè)位置是我想要的（其實(shí)你懂背零，我就是賣(mài)弄一下~）

OK，這個(gè)頁(yè)面就不說(shuō)了~

1.3 -- fragment_test.xml布局頁(yè)面

<?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="#FAECD8">

            <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="睿庫(kù)Fragment"/>
</LinearLayout>

簡(jiǎn)要說(shuō)明

其實(shí)1-4的頁(yè)面都是一樣的无埃，只是背景色和TextView的text不一樣

1.4 -- 資源

tabbar_ruiku_selector.xml
tabbar_yuyue_selector.xml
tabbar_xiaoxi_selector.xml
tabbar_wode_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/btn_ku_s"/>            
    <item android:state_pressed="false" android:drawable="@drawable/btn_ku_s"/>            
    <item android:drawable="@drawable/btn_ku_n"/>
</selector>

簡(jiǎn)要說(shuō)明

其實(shí)四個(gè)資源的xml內(nèi)容是一樣的徙瓶，區(qū)別是圖片，里面的屬性嫉称，你可以放肆大膽的百度侦镇！絕不攔著~

2.開(kāi)始寫(xiě)代碼

2.1 MainActivity.java

public class MainActivity extends AppCompatActivity
{
      private Button tabbar_btn;                  /// 展示自定義Tabbar

      @Override
      protected void onCreate(Bundle savedInstanceState)
      {
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.activity_main);
            setTitle("做著玩的");

            initView();                               /// 初始化控件
            selectorMethod();                         /// 點(diǎn)擊事件
      }

      /*** * 初始化控件 */
      public void initView()
      {
            tabbar_btn = (Button) findViewById(R.id.tabbar_btn);
      }

      /*** * 按鈕點(diǎn)擊事件 */
      public void selectorMethod()
      {
            // 展示自定義Tabbar
            tabbar_btn.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View view) {
                  System.out.println("展示自定義Tabbar");
                  // 跳轉(zhuǎn)頁(yè)面
                  Intent intent = new Intent(MainActivity.this, ShowTabbarActivity.class);
                  startActivity(intent);
                  }
            });
      }
}

2.2 ShowTabbarActivity.java

public class ShowTabbarActivity extends FragmentActivity implements View.OnClickListener
{
      private FrameLayout flayout;

      private RelativeLayout ruiku_layout;
      private ImageView ruiku_iv;
      private TextView ruiku_tv;

      private RelativeLayout yuyue_layout;
      private ImageView yuyue_iv;
      private TextView yuyue_tv;
      
      private RelativeLayout xiaoxi_layout;
      private ImageView xiaoxi_iv;
      private TextView xiaoxi_tv;

      private RelativeLayout wode_layout;
      private ImageView wode_iv;
      private TextView wode_tv;

      private int whirt = 0xFFFFFFFF;
      private int gray = 0xFF7597B3;
      private int blue =0xFF0AB2FB;

      private TestFragment1 testFragment1;
      private TestFragment2 testFragment2;
      private TestFragment3 testFragment3;
      private TestFragment4 testFragment4;

      FragmentManager fragmentManager;

      @Override
      protected void onCreate(Bundle savedInstanceState)
      {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_showtabbar);           // 綁定頁(yè)面
            
            initView();

            fragmentManager = getSupportFragmentManager();          // 開(kāi)啟一個(gè)事物        

            // 默認(rèn)加載某一個(gè)tabbarItem（第一個(gè)按鈕）
            TestFragment1 testFragment1 = new TestFragment1();

            // 啟動(dòng)Activity時(shí)使第一個(gè)按鈕的圖標(biāo)為選中狀態(tài)（投機(jī)取巧）
            ruiku_iv.setImageResource(R.drawable.btn_ku_s);
            getSupportFragmentManager().beginTransaction().add(R.id.content,testFragment1).commit();
      }

      /***
        * 初始化控件 
        */
      public void initView()
      {
            ruiku_layout = (RelativeLayout) findViewById(R.id.ruiku_layout);
            ruiku_iv = (ImageView) findViewById(R.id.ruiku_iv);
            ruiku_tv = (TextView) findViewById(R.id.ruiku_tv);

            yuyue_layout = (RelativeLayout) findViewById(R.id.yuyue_layout);
            yuyue_iv = (ImageView) findViewById(R.id.yuyue_iv);
            yuyue_tv = (TextView) findViewById(R.id.yuyue_tv);

            xiaoxi_layout = (RelativeLayout) findViewById(R.id.xiaoxi_layout);
            xiaoxi_iv = (ImageView) findViewById(R.id.xiaoxi_iv);
            xiaoxi_tv = (TextView) findViewById(R.id.xiaoxi_tv);

            wode_layout = (RelativeLayout) findViewById(R.id.wode_layout);
            wode_iv = (ImageView) findViewById(R.id.wode_iv);
            wode_tv = (TextView) findViewById(R.id.wode_tv);

            ruiku_layout.setOnClickListener(this);
            yuyue_layout.setOnClickListener(this);
            xiaoxi_layout.setOnClickListener(this);
            wode_layout.setOnClickListener(this);

            clearChioce();          // 清空選擇
      }

      /*** 
        * 重寫(xiě)點(diǎn)擊事件 -- 根據(jù) implements View.OnClickListener 來(lái)的
        * @param v 當(dāng)前視圖 
        */
      @Override
      public void onClick(View v) {
            switch (v.getId()) {
                  case R.id.ruiku_layout:
                        setChioceItem(0);
                        break;
                  case R.id.yuyue_layout:
                        setChioceItem(1);
                        break;
                  case R.id.xiaoxi_layout:
                        setChioceItem(2);
                        break;
                  case R.id.wode_layout:
                        setChioceItem(3);
                        break;
                  default:
                        break;
            }
      }

      /*** 
        * 定義選中后的控制器
        * @param index index
        */
      public void setChioceItem(int index)
      {
            clearChioce();      // 既然是點(diǎn)擊選擇，那么在點(diǎn)的時(shí)候就應(yīng)該清除一下上一個(gè)索引

            // 重置選項(xiàng)+隱藏所有的Fragment
            FragmentTransaction transaction = fragmentManager.beginTransaction();

            hideFragments(transaction);

            switch (index) {
                  case 0:
                        ruiku_iv.setImageResource(R.drawable.tabbar_ruiku_selector);
                        ruiku_tv.setTextColor(blue);
                        if (testFragment1 == null) {
                              testFragment1 = new TestFragment1();
                              transaction.add(R.id.content,testFragment1);
                        } else {
                              transaction.show(testFragment1);
                        }
                        break;

                  case 1:
                        yuyue_iv.setImageResource(R.drawable.tabbar_yuyue_selector);
                        yuyue_tv.setTextColor(blue);
                        if (testFragment2 == null) {
                              testFragment2 = new TestFragment2();
                              transaction.add(R.id.content,testFragment2);
                        } else {
                              transaction.show(testFragment2);
                        }
                        break;

                  case 2:
                        xiaoxi_iv.setImageResource(R.drawable.tabbar_xiaoxi_selector);
                        xiaoxi_tv.setTextColor(blue);
                        if (testFragment3 == null) {
                              testFragment3 = new TestFragment3();
                              transaction.add(R.id.content,testFragment3);
                        } else {
                              transaction.show(testFragment3);
                        }
                        break;

                  case 3:
                        wode_iv.setImageResource(R.drawable.tabbar_wode_selector);
                        wode_tv.setTextColor(blue);
                        if (testFragment4 == null) {
                              testFragment4 = new TestFragment4();
                              transaction.add(R.id.content,testFragment4);
                        } else {
                              transaction.show(testFragment4);
                        }
                        break;
            }
            transaction.commit();
      }

      /*** 
        * 定義一個(gè)重置所有選項(xiàng)的方法
        * /
      public void clearChioce()
      {
            ruiku_iv.setImageResource(R.drawable.btn_ku_n);
            ruiku_layout.setBackgroundColor(whirt);
            ruiku_tv.setTextColor(gray);

            yuyue_iv.setImageResource(R.drawable.btn_book_n);
            yuyue_layout.setBackgroundColor(whirt);
            yuyue_tv.setTextColor(gray);

            xiaoxi_iv.setImageResource(R.drawable.btn_ms_n);
            xiaoxi_layout.setBackgroundColor(whirt);
            xiaoxi_tv.setTextColor(gray);

            wode_iv.setImageResource(R.drawable.btn_ps_n);
            wode_layout.setBackgroundColor(whirt);
            wode_tv.setTextColor(gray);
      }

      /*** 
        * 將所有的Fragment都設(shè)置為隱藏狀態(tài)
        * @param transaction 事物
        * /
      private void hideFragments(FragmentTransaction transaction)
      {
            if (testFragment1 != null) {
                  transaction.hide(testFragment1);
            }
            if (testFragment2 != null) {
                  transaction.hide(testFragment2);
            }
            if (testFragment3 != null) {
                  transaction.hide(testFragment3);
            }
            if (testFragment4 != null) {
                  transaction.hide(testFragment4);
            }
      }
}

簡(jiǎn)要說(shuō)明

邏輯簡(jiǎn)單明了织阅，順著讀就行~

2.3 TestFragment1.java

public class TestFragment1 extends Fragment
{
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_test1, container,false);
            return view;
      }
}

簡(jiǎn)要說(shuō)明

TestFragment1 - 4是一樣的壳繁，沒(méi)有區(qū)別

icon資源地址
鏈接：https://share.weiyun.com/68dd317dc115efebd34ec4a2a99b3e8c （密碼：S2HZTS）

總結(jié)

希望大家喜歡我寫(xiě)的東西，轉(zhuǎn)發(fā)收藏什么的荔棉，多多益善~
后面有時(shí)間的話闹炉，我會(huì)在這篇文章中加上相對(duì)完整和人性化的東西.比如再加個(gè)按鈕，讓這個(gè)按鈕有動(dòng)畫(huà)润樱，或所有按鈕添加動(dòng)畫(huà)效果

最后渣触，如果你有更好的，請(qǐng)回復(fù)我祥国，并粘貼你的資料地址昵观。
有事私信
WangJun 20161228