Android 開發之 Bottom Navigation 初嘗試

一直覺得 Material Design 設計很是好看，尤其是底部的導航欄，簡約的圖標以及透明的背景。決定自己體驗一把。

Material Design 是由 Google 推出的全新的設計語言，谷歌表示，這種設計語言旨在為手機、平板電腦、桌面電腦和 “其他平台” 提供更一致、更廣泛的 “外觀和感覺”。

Material Design 的一些重要功能包括系統字體 Roboto 的升級版本，同時顏色更鮮豔，動畫效果更突出。谷歌的想法是讓谷歌平台上的開發者掌握這個新框架，從而讓所有應用就有統一的外觀，就像是蘋果向開發者提出的設計原則一樣。

组件介绍#

Bottom Navigation 經常用於底部導航欄。不過它所包含的標籤頁不應過多也不應該過少，谷歌官方文檔中表示，標籤頁的個數在 3-5 個左右合適。

如何實現#

在 Module 的 build.gradle 中添加如下代碼

compile 'com.roughike:bottom-bar:2.0.2'

實現 Bottom Navigation 功能，比較好用的是第三方的 BottomBar 庫，截止 2017.1.8，最新的版本是 2.0.2，如果需要最新版，請訪問 BottomBar 的 Github Repository

在 res 下新建類型為 xml 的 xml 文件夾

在 xml 文件夾下新建 bottombar_tabs.xml 文件

res/xml/bottombar_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <tabs>
        <tab
            id="@+id/tab_one"
            icon="@drawable/ic_3d_rotation_white_24dp"
            title="財務"
            barColorWhenSelected="#865242"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_two"
            icon="@drawable/ic_account_balance_white_24dp"
            title="群組"
            barColorWhenSelected="#268434"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_three"
            icon="@drawable/ic_accessibility_white_24dp"
            title="朋友"
            barColorWhenSelected="#8b2099"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
    </tabs>
</PreferenceScreen>

barColorWhenSelected屬性控制著當這個 Tab 被選擇時，BottomBar 的整體顏色。inActiveColor屬性是這個 Tab 未激活時圖片的顏色。與之相對應的activeColor屬性，則是控制著激活時的圖片顏色。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="me.luzhoumin.bottomnavigation.MainActivity">

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs"
        app:bb_behavior="underNavbar"
        app:bb_inActiveTabAlpha="0.6"
        app:bb_activeTabAlpha="1"
        app:bb_showShadow="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="Hello World!"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="51dp" />

</RelativeLayout>

app:bb_tabXmlResource指向的是第三步建的 xml 文件，裡面有每個 Tab 的屬性。

MainActivity.java

import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.BottomBarTab;
import com.roughike.bottombar.OnTabReselectListener;
import com.roughike.bottombar.OnTabSelectListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取Bottom Bar組件
        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        //獲取用來顯示的TextView組件
        final TextView tv = (TextView) findViewById(R.id.textview);
        //設置Bottom Bar的選擇監聽器
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one 被點擊");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_group 被點擊");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three 被點擊");
                }
            }
        });
        //設置Bottom Bar的重複選擇監聽器
        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
            @Override
            public void onTabReSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one 再次被點擊");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_two 再次被點擊");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three 再次被點擊");
                }
            }
        });
        //設置Tab的Badge
        BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_two);
        nearby.setBadgeCount(5);
    }
}

修改主題樣式

res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <!--修改主題為無ActionBar-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--添加-->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

BottomBar API#

For the BottomBar

<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    app:bb_tabXmlResource="@xml/bottombar_tabs_three"
    app:bb_tabletMode="true"
    app:bb_behavior="shifting|shy|underNavbar"
    app:bb_inActiveTabAlpha="0.6"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabColor="#222222"
    app:bb_activeTabColor="@color/colorPrimary"
    app:bb_titleTextAppearance="@style/MyTextAppearance"
    app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"
    app:bb_showShadow="true" />

bb_tabXmlResource

這是你的標籤的 XML 資源 ID，位於 values/xml/ 中。

bb_tabletMode

如果你希望 BottomBar 在平板上有不同的行為。樣本項目中有這方面的示例！

bb_behavior
- shifting: 選中的標籤比其他標籤寬。
- shy: 將 BottomBar 放入 CoordinatorLayout 中，並在滾動時自動隱藏！
- underNavbar: 在 navBar 下繪製 BottomBar！
bb_inActiveTabAlpha

未激活標籤的透明度值，用於標籤圖標和標題。

bb_activeTabAlpha

激活標籤的透明度值，用於標籤圖標和標題。

bb_inActiveTabColor

未激活標籤的顏色，用於標籤圖標和標題。

bb_activeTabColor

激活標籤的顏色，用於標籤圖標和標題。

bb_badgeBackgroundColor

此 BottomBar 中任何徽章的背景顏色。

bb_titleTextAppearance

標題的自定義文本外觀。

bb_titleTypeFace

自定義字體文件的路徑，例如fonts/MySuperDuperFont.ttf。在這種情況下，你的字體路徑應該是src/main/assets/fonts/MySuperDuperFont.ttf，但你只需要提供fonts/MySuperDuperFont.ttf，因為資源文件夾會自動填充。

bb_showShadow

控制陰影是否顯示或隱藏，默認為 true。

For the tabs

<tab
    id="@+id/tab_recents"
    title="最近"
    icon="@drawable/empty_icon"
    inActiveColor="#00FF00"
    activeColor="#FF0000"
    barColorWhenSelected="#FF0000"
    badgeBackgroundColor="#FF0000" />

inActiveColor

未激活標籤的顏色，用於標籤圖標和標題。

activeColor

激活標籤的顏色，用於標籤圖標和標題。

barColorWhenSelected

當選擇此標籤時，整個 BottomBar 的顏色。

badgeBackgroundColor

此標籤中任何徽章的背景顏色。

需要注意的地方#

Tab 的圖標必須是全透明、純黑、24dp、Padding = 0dp，而且最好所有分辨密度的圖片都要有，否則圖標會很大或者很小，影響顯示效果。
如果想保持在螢幕最底部，記得在佈局 xml 的<com.roughike.bottombar.BottomBar>標籤中添加屬性android:layout_alignParentBottom="true"，並且做好第六步工作。

半米牙的笔记