BottomBar的用法

 

 

 

先導包，在Gradle 加上這個：

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

咱們來實現第二張圖
先上步驟：

1. 建立一個res/xml/bottombar_menu.xml;
2. 在 layout/activity_main.xml 中設置 BottomBar;
3. 在 Activity 中設置點擊以後的操做。

1. 建立一個res/xml/bottombar_menu.xml

<?xml version="1.0" encoding="utf-8"?> <tabs> <tab id="@+id/tab_recents" title="Recents" icon="@mipmap/ic_recents" barColorWhenSelected="#FE3D81" /> <tab id="@+id/tab_favorites" title="Favorites" icon="@mipmap/ic_favorites" barColorWhenSelected="#5D3C35" /> <tab id="@+id/tab_nearby" title="Nearby" icon="@mipmap/ic_nearby" barColorWhenSelected="#7B1FA2" /> <tab id="@+id/tab_friends" title="Friends" icon="@mipmap/ic_friends" barColorWhenSelected="#FF5252" /> <tab id="@+id/tab_restaurants" title="Restaurants" icon="@mipmap/ic_restaurants" barColorWhenSelected="#FF9800" /> </tabs>

2. 在 layout/activity_main.xml 中設置 BottomBar

<?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" 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_behavior="shifting" app:bb_tabXmlResource="@xml/bottombar_menu"/> </RelativeLayout>

3. 在 Activity 中設置點擊以後的操做

public class MainActivity extends AppCompatActivity { private BottomBar bottomBar; private BottomBarTab nearby; @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) { // 選擇指定 id 的標籤 nearby = bottomBar.getTabWithId(R.id.tab_nearby); nearby.setBadgeCount(5); } } }); bottomBar.setOnTabReselectListener(new OnTabReselectListener() { @Override public void onTabReSelected(@IdRes int tabId) { if (tabId == R.id.tab_favorites) { // 已經選擇了這個標籤，又點擊一次。即重選。 nearby.removeBadge(); } } }); } }

到此，最基本的顯示就已經實現了。
打包運行，就能夠看到第二張圖的效果。

而後還有一些其餘的功能。

---

設置滾動隱藏，也就是第一張圖的效果

<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"> <!-- 你要顯示的內容 --> </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_three" app:bb_behavior="shy"/> </android.support.design.widget.CoordinatorLayout>

使用了 CoordinatorLayout 和 NestedScrollView 佈局。
其他的用法是同樣的。

---

設置平板模式

平板模式也就是第三圖的樣子。

<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"> <!-- This could be your fragment container, or something --> <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_three" app:bb_tabletMode="true" /> </RelativeLayout>

---

屬性詳解

 

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 資源標識，在 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。

 

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 的背景色，就是右上角顯示數字那個。

這次筆記摘要大神之手，僅供學習