初識BottomBar

這個是開源的鏈接：https://github.com/roughike/BottomBar

要使用BottomBar首先要添加

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

我使用的是這個版本，注意版本不同，有些功能是不能使用的。

接下來我把要使用的圖片導入，爲了適配模擬器，我們需要在多個包中存放使用的圖片。

否則會出現這樣的效果：

---

正常的效果如圖：

創建佈局

創建xml文件夾：

在xml文件夾下面創建bottombar_tabs.xml

---

bottombar_tabs.xml的內容爲：

<?xml version="1.0" encoding="utf-8"?>
<tabs>
    <tab
        id="@+id/tab_recents"
        title="最近"
        icon="@drawable/ic_recents"
        />
    <tab
        id="@+id/tab_favorites"
        title="喜好"
        icon="@drawable/ic_favorites"

        />
    <tab
        id="@+id/tab_nearby"
        title="附近"
        icon="@drawable/ic_nearby"

        />
    <tab
        id="@+id/tab_friends"
        title="朋友"
        icon="@drawable/ic_friends"
        />
    <tab
        id="@+id/tab_restaurants"
        title="餐館"
        icon="@drawable/ic_restaurants"
        />
</tabs>

activity_main.xml佈局爲：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/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"
        />
</RelativeLayout>

此時運行的效果如下：

我們可以給每個Tab設置監聽事件：

public class MainActivity extends AppCompatActivity {

    private BottomBar bottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_favorites) {
                    Toast.makeText(MainActivity.this,"你點擊了喜好",Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

爲了實現下面的效果

我們爲每個Tab添加barColorWhenSelected

<tab
        id="@+id/tab_recents"
        title="最近"
        icon="@drawable/ic_recents"
        barColorWhenSelected="#FE3D81"
        />

增加app：bb_behavior=”shifting”

 <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="shifting"
        />

改變佈局，來實現tablet的效果：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/bottomBar" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs"
        app:bb_tabletMode="true" />

</RelativeLayout>

隱藏BottomBar的效果，這裏使用到了CoordinatorLayout和NestedScrollView。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/myScrollingContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="20sp"
            android:text="@string/content"
            />

    </android.support.v4.widget.NestedScrollView>

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"

        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        app:bb_tabXmlResource="@xml/bottombar_tabs"
        app:bb_behavior="shy"/>

</android.support.design.widget.CoordinatorLayout>

在Tabs中

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

inActiveColor：
未被選擇時，標籤的顏色，作用於 icon 和 title。
activeColor：
被選擇時，標籤的顏色，作用於 icon 和 title，與上面相對應。
barColorWhenSelected：
當該標籤被選擇時，整個 BottomBar 的背景色。（就是一點，整個底部漸變的那個顏色）
badgeBackgroundColor：
設置 Badges 的背景色，就是右上角顯示數字那個。

---

在BottomBar佈局裏：

bb_tabXmlResource：
設置標籤的 xml 資源標識，在 res/xml/ 目錄下。
bb_tabletMode：
是否是平板模式。true：是；false：不是。
bb_behavior：（三種模式）
shifting: 選定的標籤比其他的更寬。
shy: 將 Bottombar 放在 Coordinatorlayout 它會自動隱藏在滾動！（需要特定的佈局）
underNavbar: 正常模式（默認）。
bb_inActiveTabAlpha：
沒選中時標籤的透明度，icon 和 titiles 有用。（取值：0-1）
bb_activeTabAlpha：
選中時標籤的透明度，與上一個相對應。（取值：0-1）
bb_inActiveTabColor：
沒選時標籤的顏色，icon 和 titiles 有用。
bb_activeTabColor：
選中時標籤的顏色，與一個相對應。
bb_badgeBackgroundColor：
設置 Badges 的背景色，就是右上角顯示數字那個。
bb_titleTextAppearance：
利用 style 重新設置自定的格式，例如：大小、加粗等。
bb_titleTypeFace：
設置自定的字體, 例： app:bb_titleTypeFace=”fonts/MySuperDuperFont.ttf”。
將字體放在 src/main/assets/fonts/MySuperDuperFont.ttf 路徑下，
只需要寫 fonts/MySuperDuperFont.ttf 即可，將自動填充。
bb_showShadow：
控制陰影是否顯示或隱藏，類似於蒙板，默認爲true。

參考：http://www.jianshu.com/p/2bafd1bbb21b
例子下載：http://download.csdn.net/detail/fessible_max/9855539