【BottomBar】Android炫酷的底部切換效果V2.0
本文轉自：http://www.jianshu.com/p/2bafd1bbb21b，，，感謝支援
注意：此庫最低支援版本是 api 11
顯示效果圖：
底部可收回
底部畫面
在平板上顯示會是這個效果
特別炫酷，有木有？
程式碼寫起來也並不難。
跟著程式碼來實現第二張圖的效果。
先導包，在Gradle 加上這個：
compile 'com.roughike:bottom-bar:2.0.2'我們來實現第二張圖
先上步驟：
- 建立一個res/xml/bottombar_menu.xml;
- 在 layout/activity_main.xml 中設定 BottomBar;
- 在 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" 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_tabs"/>
</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 的背景色，就是右上角顯示數字那個。
改版之後的優點：
- API 變得更簡單；
- 所有 屬性 和 行為 都在 xml 中被定義。
確實方便了不少，而且更容易被理解了。
文／Wing_Li（簡書作者）
原文連結：http://www.jianshu.com/p/2bafd1bbb21b
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。