注意:

本文主要介绍安卓自定义底部导航栏（iOS中成为TabBar）；写的不尽如人意的地方，请见谅~

概述如下：

• 环境 ：Android Studio 1.4 for Mac
• 语言 ：如果我没猜错的话，应该是Java
• 特点 ：简单、直接、暴力，绝对让你有快感！！！

展示

1.效果展示

tabbar_01.gif

2.工程目录结构

tabbar_prj_01.png

tabbar_prj_02.png

简要说明

主要用到的文件已为大家用绿色的方框标出来了；

- Java类
MainActivity：还用解释？
ShowTabbarActivity：展示自定义Tabbar的类（iOS中可以理解为在ViewController中调用）
TestFragment1 - 4：每个底部按钮的控制器

- 布局
activity_main：不解释
activity_showtabbar.xml：ShowTabbarActivity.java绑定的页面
fragment_test1.xml - fragment_test4.xml：自定义TabbarItem（就是每个按钮的页面）的布局页面

- 资源（我觉得这么叫就是对的！！！）:主要用于存放按钮图片和点击状态
tabbar_ruiku_selector.xml
tabbar_yuyue_selector.xml
tabbar_xiaoxi_selector.xml
tabbar_wode_selector.xml

1.开始写布局

1.1 -- 主页面

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>

简要说明

就是一个按钮而已

1.2 -- Tabbar布局页面

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

<!-- 睿库 -->
      <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="睿库"
                                    android:textColor="#7597B3"/>
              </LinearLayout>
      </RelativeLayout>

<!-- 预约 -->
      <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="预约"
                                    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>

简要说明

自我感觉FrameLayout类似于iOS中的frame，在Android中给这个tabbar的frame绑定id，设置frame的属性；

然后，给一个线性布局，给个高度和颜色，如果你们UI给了背景图，就直接上；

四个按钮我使用的是相对布局包线性布局，为什么要这样？仅仅是我喜欢而已，布局多种多样，看你自己了；你看，我在imageView中的layout_marginTop = -10，是因为只有这个位置是我想要的（其实你懂，我就是卖弄一下~）

OK，这个页面就不说了~

1.3 -- fragment_test.xml布局页面

<?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="睿库Fragment"/>
</LinearLayout>

简要说明

其实1-4的页面都是一样的，只是背景色和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>

简要说明

其实四个资源的xml内容是一样的，区别是图片，里面的属性，你可以放肆大胆的百度！绝不拦着~

2.开始写代码

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();                         /// 点击事件
      }

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

      /*** * 按钮点击事件 */
      public void selectorMethod()
      {
            // 展示自定义Tabbar
            tabbar_btn.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View view) {
                  System.out.println("展示自定义Tabbar");
                  // 跳转页面
                  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);           // 绑定页面
            
            initView();

            fragmentManager = getSupportFragmentManager();          // 开启一个事物        

            // 默认加载某一个tabbarItem（第一个按钮）
            TestFragment1 testFragment1 = new TestFragment1();

            // 启动Activity时使第一个按钮的图标为选中状态（投机取巧）
            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();          // 清空选择
      }

      /*** 
        * 重写点击事件 -- 根据 implements View.OnClickListener 来的
        * @param v 当前视图 
        */
      @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();      // 既然是点击选择，那么在点的时候就应该清除一下上一个索引

            // 重置选项+隐藏所有的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();
      }

      /*** 
        * 定义一个重置所有选项的方法
        * /
      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都设置为隐藏状态
        * @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);
            }
      }
}

简要说明

逻辑简单明了，顺着读就行~

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;
      }
}

简要说明

TestFragment1 - 4是一样的，没有区别

icon资源地址
链接：https://share.weiyun.com/68dd317dc115efebd34ec4a2a99b3e8c （密码：S2HZTS）

总结

希望大家喜欢我写的东西，转发收藏什么的，多多益善~
后面有时间的话，我会在这篇文章中加上相对完整和人性化的东西.比如再加个按钮，让这个按钮有动画，或所有按钮添加动画效果

最后，如果你有更好的，请回复我，并粘贴你的资料地址。
有事私信
WangJun 20161228