【BottomBar】Android炫酷的底部切換效果V2.0

如果本文幫助到你，本人不勝榮幸，如果浪費(fèi)了你的時(shí)間，本人深感抱歉。
希望用最簡單的大白話來幫助那些像我一樣的人。如果有什么錯(cuò)誤，請一定指出，以免誤導(dǎo)大家、也誤導(dǎo)我。
本文來自：http://www.itdecent.cn/users/320f9e8f7fc9/latest_articles
感謝您的關(guān)注。

項(xiàng)目地址為：https://github.com/roughike/BottomBar
新版本與老版本用法區(qū)別較大，所以重寫。

注意：此庫最低支持版本是 api 11

顯示效果圖：

滾動(dòng)隱藏
底部畫面
在平板上顯示會(huì)是這個(gè)效果

特別炫酷，有木有？
代碼寫起來也并不難。
跟著代碼來實(shí)現(xiàn)第二張圖的效果。

圖標(biāo)必須完全不透明，純黑色，24dp ，沒有填充。

先導(dǎo)包，在Gradle 加上這個(gè)：

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

我們來實(shí)現(xiàn)第二張圖
先上步驟：

  1. 創(chuàng)建一個(gè)res/xml/bottombar_menu.xml;
  1. 在 layout/activity_main.xml 中設(shè)置 BottomBar;
  2. 在 Activity 中設(shè)置點(diǎn)擊之后的操作。
1. 創(chuàng)建一個(gè)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 中設(shè)置 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"/>

    <!-- 參數(shù)詳細(xì)解釋 稍后會(huì)有 -->

    <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 中設(shè)置點(diǎn)擊之后的操作
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 的標(biāo)簽
                    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) {
                    // 已經(jīng)選擇了這個(gè)標(biāo)簽，又點(diǎn)擊一次。即重選。
                    nearby.removeBadge();
                }
            }
        });
        
        bottomBar.setTabSelectionInterceptor(new TabSelectionInterceptor() {
            @Override
            public boolean shouldInterceptTabSelection(@IdRes int oldTabId, @IdRes int newTabId) {
                // 點(diǎn)擊無效
                if (newTabId == R.id.tab_restaurants ) {
                    // ......
                    // 返回 true 。代表：這里我處理了，你不用管了。
                    return true;
                }

                return false;
            }
        });
    }
}

到此，最基本的顯示就已經(jīng)實(shí)現(xiàn)了。
打包運(yùn)行，就可以看到第二張圖的效果。

然后還有一些其他的功能。
<br />

設(shè)置滾動(dòng)隱藏，也就是第一張圖的效果

<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">

        <!-- 你要顯示的內(nèi)容 -->

    </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 布局。
其余的用法是一樣的。
<br />

設(shè)置平板模式

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

<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>

屬性詳解

<br />

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：
設(shè)置標(biāo)簽的 xml 資源標(biāo)識(shí)，在 res/xml/ 目錄下。
bb_tabletMode：
是否是平板模式。true：是；false：不是。
bb_behavior：（三種模式）
shifting: 選定的標(biāo)簽比其他的更寬。
shy: 將 Bottombar 放在 Coordinatorlayout 它會(huì)自動(dòng)隱藏在滾動(dòng)?。ㄐ枰囟ǖ牟季郑?br> underNavbar: 正常模式（默認(rèn)）。
bb_inActiveTabAlpha：
沒選中時(shí)標(biāo)簽的透明度，icon 和 titiles 有用。（取值：0-1）
bb_activeTabAlpha：
選中時(shí)標(biāo)簽的透明度，與上一個(gè)相對應(yīng)。（取值：0-1）
bb_inActiveTabColor：
沒選時(shí)標(biāo)簽的顏色，icon 和 titiles 有用。
bb_activeTabColor：
選中時(shí)標(biāo)簽的顏色，與一個(gè)相對應(yīng)。
bb_badgeBackgroundColor：
設(shè)置 Badges 的背景色，就是右上角顯示數(shù)字那個(gè)。
bb_badgesHideWhenActive：
小紅點(diǎn)是否隱藏，默認(rèn)為 true 隱藏。就是右上角顯示數(shù)字那個(gè)。
bb_titleTextAppearance：
利用 style 重新設(shè)置自定的格式，例如：大小、加粗等。
bb_titleTypeFace：
設(shè)置自定的字體, 例： app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"。
將字體放在 src/main/assets/fonts/MySuperDuperFont.ttf 路徑下，
只需要寫 fonts/MySuperDuperFont.ttf 即可，將自動(dòng)填充。
bb_showShadow：
控制陰影是否顯示或隱藏，類似于蒙板，默認(rèn)為true。

<br />

Tabs

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

inActiveColor：
未被選擇時(shí)，標(biāo)簽的顏色，作用于 icon 和 title。
activeColor：
被選擇時(shí)，標(biāo)簽的顏色，作用于 icon 和 title，與上面相對應(yīng)。
barColorWhenSelected：
當(dāng)該標(biāo)簽被選擇時(shí)，整個(gè) BottomBar 的背景色。（就是一點(diǎn)，整個(gè)底部漸變的那個(gè)顏色）
badgeBackgroundColor：
設(shè)置 Badges 的背景色，就是右上角顯示數(shù)字那個(gè)。
badgeHidesWhenActive：
選擇此選項(xiàng)卡時(shí)是否應(yīng)該隱藏徽章，默認(rèn)為true。

<br />

改版之后的優(yōu)點(diǎn)：

  1. API 變得更簡單；
  2. 所有 屬性 和 行為 都在 xml 中被定義。

確實(shí)方便了不少，而且更容易被理解了。

原項(xiàng)目在文章剛開始的時(shí)候已經(jīng)放上了。
這里我寫了一個(gè)最基本的項(xiàng)目，也就是本文中的代碼。
地址：
https://github.com/Wing-Li/AndroidPractice/tree/master/BottomBar2.0

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容