BottomNavigationBar實現底部標題欄

 一、新增依賴

andriod studio gradle載入新增依賴：

//底部導航欄樣式BottomNavigationBar
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'

二、正文

/** * setMode() 內的引數有三種模式型別：

 MODE_DEFAULT 自動模式：導航欄Item的個數<=3 用 MODE_FIXED 模式，否則用 MODE_SHIFTING 模式

 MODE_FIXED 固定模式：未選中的Item顯示文字，無切換動畫效果。

 MODE_SHIFTING 切換模式：未選中的Item不顯示文字，選中的顯示文字，有切換動畫效果。 

/** * setBackgroundStyle() 內的引數有三種樣式

 BACKGROUND_STYLE_DEFAULT: 預設樣式 如果設定的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC

如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。

 BACKGROUND_STYLE_STATIC: 靜態樣式 點選無波紋效果

 BACKGROUND_STYLE_RIPPLE: 波紋樣式 點選有波紋效果 

2.1、MainActivity.java 檔案

public class MainActivity extends AppCompatActivity {
    private BottomNavigationBar mBottomNavigationBar;
    private TextBadgeItem textBadgeItem;
    private ShapeBadgeItem shapeBadgeItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setView();
    }

    /**
     * 初始化控制元件
     */
    private void initView() {
        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        textBadgeItem = new TextBadgeItem();

        //顯示資訊提示數字
        textBadgeItem.setBorderWidth(4)
                .setBackgroundColor(R.color.colorAccent)
                .setAnimationDuration(200)
                .setText("3").
                setHideOnSelect(false);

        //顯示資訊提示圖形
        shapeBadgeItem = new ShapeBadgeItem();
        shapeBadgeItem.setShapeColorResource(R.color.colorPrimary)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(false);
    }

    /**
     * 配置控制元件
     */
    private void setView() {
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar.setActiveColor(R.color.light_blue);

        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_tabbar_home_press, "工具箱")
                .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_home_nor))
                .setBadgeItem(textBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_timetable_press, "課程表")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_timetable_nor)))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_message_press, "小紙條")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_message_nor))
                        .setBadgeItem(shapeBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_my_press, "我")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_my_nor)))
                .setFirstSelectedPosition(0)//設定第一個選單為選中狀態
                .initialise();//必須呼叫該方法，才會生效
        //設定第一個要顯示的Fragment
        replace(new UtilFragment());
        //BottomNavigationBar選項卡，選擇事件
        mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {//未選中 -> 選中
                switch (position) {
                    case 0:
                        replace(new UtilFragment());
                        break;
                    case 1:
                        replace(new ClassScheduleFragment());
                        break;
                    case 2:
                        replace(new MessageFragment());
                        break;
                    case 3:
                        replace(new MyFragment());
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onTabUnselected(int position) {//選中 -> 未選中

            }

            @Override
            public void onTabReselected(int position) {//選中 -> 選中

            }
        });
    }

    /**
     * 切換Fragment
     *
     * @param fragment Fragment
     */
    private void replace(Fragment fragment) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.frameContent, fragment);
        transaction.commit();
    }

    /**
     * 啟動Activity
     *
     * @param context 上下文
     */
    public static void startActivity(Context context) {
        Intent intent = new Intent();
        intent.setClass(context, MainActivity.class);
        context.startActivity(intent);
    }
}

2.2、activity_main佈局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/frameContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />
</LinearLayout>

Fragment自行定義即可，然後把文中的Fragment替換成自己的Fragment