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

如果本文幫助到你糠亩,本人不勝榮幸虐骑,如果浪費(fèi)了你的時(shí)間,本人深感抱歉赎线。
希望用最簡(jiǎn)單的大白話來幫助那些像我一樣的人廷没。如果有什么錯(cuò)誤,請(qǐng)一定指出垂寥,以免誤導(dǎo)大家颠黎、也誤導(dǎo)我另锋。
本文來自:http://www.reibang.com/users/320f9e8f7fc9/latest_articles
感謝您的關(guān)注。

**此項(xiàng)目已更新2.0狭归,
新的文章地址為:
**【BottomBar】Android炫酷的底部切換效果V2.0


不過1.0的也可以用夭坪,
1.0 的項(xiàng)目地址:https://github.com/roughike/BottomBar/tree/v1

本文是1.0的介紹!9怠室梅!

顯示效果圖:

底部可收回
底部可收回
底部畫面
在平板上顯示會(huì)是這個(gè)效果
screenshot_tablet.png

特別炫酷,有木有疚宇?
代碼寫起來非常非常簡(jiǎn)單亡鼠,超級(jí)簡(jiǎn)單哦。
跟著代碼來實(shí)現(xiàn)第二張圖的效果灰嫉。也就是上面地址中的代碼拆宛。


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

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

Maven:

<dependency>
  <groupId>com.roughike</groupId>
  <artifactId>bottom-bar</artifactId>
  <version>1.3.9</version>
  <type>pom</type>
</dependency>
注意:
  1. 最低支持版本是 api 11
  2. 圖標(biāo)必須是完全不透明的讼撒,純色浑厚,24dp和無填充。
    <br />

我們來實(shí)現(xiàn)第二張圖

還是先上步驟:

  1. 創(chuàng)建一個(gè)res/menu/bottombar_menu.xml:(也可以用代碼來創(chuàng)建)
  1. 在Activity中設(shè)置menu根盒,設(shè)置點(diǎn)擊切換的顏色钳幅。
1. 創(chuàng)建一個(gè)res/menu/bottombar_menu.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/bb_menu_recents"
        android:icon="@drawable/ic_recents"
        android:title="Recents" />
    <item
        android:id="@+id/bb_menu_favorites"
        android:icon="@drawable/ic_favorites"
        android:title="Favorites" />
    <item
        android:id="@+id/bb_menu_nearby"
        android:icon="@drawable/ic_nearby"
        android:title="Nearby" />
    <item
        android:id="@+id/bb_menu_friends"
        android:icon="@drawable/ic_friends"
        android:title="Friends" />
    <item
        android:id="@+id/bb_menu_food"
        android:icon="@drawable/ic_restaurants"
        android:title="Food" />
</menu>
2. 把下面代碼復(fù)制進(jìn)MainActivity
public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);

        mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.setItems(R.menu.bottombar_menu);
        mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {
                //單擊事件 menuItemId 是 R.menu.bottombar_menu 中 item 的 id
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                //重選事件,當(dāng)前已經(jīng)選擇了這個(gè)炎滞,又點(diǎn)了這個(gè)tab敢艰。微博點(diǎn)擊首頁刷新頁面
            }
        });
                                
        // 當(dāng)點(diǎn)擊不同按鈕的時(shí)候,設(shè)置不同的顏色
        // 可以用以下三種方式來設(shè)置顏色.
        mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
        mBottomBar.mapColorForTab(1, 0xFF5D4037);
        mBottomBar.mapColorForTab(2, "#7B1FA2");
        mBottomBar.mapColorForTab(3, "#FF5252");
        mBottomBar.mapColorForTab(4, "#FF9800");
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        //保存BottomBar的狀態(tài)
        mBottomBar.onSaveInstanceState(outState);
    }
}

對(duì)沒有看錯(cuò)册赛,setContentView 屏掉了钠导,也可以顯示出來的。

然后直接去運(yùn)行一下森瘪,就可以看到上面第二張圖的效果了牡属。
真的是不要太簡(jiǎn)單,好嗎扼睬?

而且逮栅,他還有一些更強(qiáng)大的功能。

<br />


為Tab添加標(biāo)簽

像這樣:


// 為tab設(shè)置一個(gè)標(biāo)簽窗宇,“信息”提示的數(shù)字
// 參數(shù)分別是:第幾個(gè)tab措伐;小圓圈的顏色;顯示的數(shù)字
BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 13);

// 設(shè)置顯示或隱藏
unreadMessages.show();
unreadMessages.hide();

// 設(shè)置顯示的數(shù)字
unreadMessages.setCount(4);

// 設(shè)置顯示/消失動(dòng)畫的延遲時(shí)間
unreadMessages.setAnimationDuration(200);

// 如果不點(diǎn)它军俊,它一直顯示
unreadMessages.setAutoShowAfterUnSelection(true);

<br />


定制Tab的一些屬性

// 最開始的第三張圖侥加,是平板所顯示的,是不是挺丑的粪躬?
// 添加這個(gè)之后担败,在手機(jī)端 跟平板顯示的是一樣的矗蕊。
// 千萬注意:這個(gè)方法要用在 setItemsFromMenu 之前,也就是tab還沒有設(shè)置之前要先調(diào)用氢架,不然會(huì)報(bào)錯(cuò)。
mBottomBar.noTabletGoodness();

// 始終顯示標(biāo)題文字朋魔,在 setItems() 之前調(diào)用
mBottomBar.useFixedMode();

// 使用暗色背景岖研,之前設(shè)置的顏色全部失效
mBottomBar.useDarkTheme();

// 為tab設(shè)置顏色;(當(dāng)tabs超過三個(gè)時(shí)警检,忽略)
mBottomBar.setActiveTabColor("#009688");

// 為title文字設(shè)置樣式
mBottomBar.setTextAppearance(R.style.MyTextAppearance);

// 使用自定義的字體孙援,/src/main/assets
// 如果設(shè)置樣式,先設(shè)置樣式
mBottomBar.setTypeFace("MyFont.ttf");

<br />


設(shè)置 滾動(dòng)消失

開始的第一張圖扇雕,底部滾動(dòng)消失是不是很方便呢拓售?
來看看是怎么實(shí)現(xiàn)得到。

在 activity_main.xml 中加入這個(gè)

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myCoordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

    <!-- 滾動(dòng)的內(nèi)容在這 -->

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

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

MainActivity.java:

// 用attachShy()代替attach()镶奉,其余都一樣
mBottomBar = BottomBar.attachShy((CoordinatorLayout)findViewById(R.id.myCoordinator),findViewById(R.id.myScrollingContent),savedInstanceState);

是不是挺簡(jiǎn)單的础淤?

<br />


代碼中添加menu

在剛開始是創(chuàng)建了一個(gè) res/menu/bottombar_menu.xml ,當(dāng)時(shí)說了也可以在代碼中創(chuàng)建哨苛,也就是這樣鸽凶。

mBottomBar.setItems(
  new BottomBarTab(R.drawable.ic_recents, "Recents"),
  new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
  new BottomBarTab(R.drawable.ic_nearby, "Nearby")
);


mBottomBar.setOnTabClickListener(new OnTabClickListener() {
    @Override
    public void onTabSelected(int position) {
      // 單擊, position 是點(diǎn)擊的位置
    }

    @Override
    public void onTabReSelected(int position) {
      // 重選
    }
});

千萬注意建峭,這兩種添加方式的監(jiān)聽事件是不太一樣的玻侥。

  1. 用xml添加時(shí),mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener())亿蒸;
    回調(diào)參數(shù)的 menuItemId 是 xml 中的 id
  2. 在代碼中創(chuàng)建對(duì)象添加時(shí)凑兰,mBottomBar.setOnTabClickListener(new OnTabClickListener());
    回調(diào)參數(shù) position 是用戶當(dāng)前所點(diǎn)擊的icon在列表中的位置

<br />


因?yàn)榇a边锁,都特別簡(jiǎn)單姑食,我就不再傳自己的項(xiàng)目了。
基本都是這個(gè)項(xiàng)目的內(nèi)容:https://github.com/roughike/BottomBar
我只是翻譯了一遍砚蓬。

這么炫酷的效果矢门,這么簡(jiǎn)單的實(shí)現(xiàn),是不是有種立馬想試一試的沖動(dòng)呢灰蛙?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末祟剔,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子摩梧,更是在濱河造成了極大的恐慌物延,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仅父,死亡現(xiàn)場(chǎng)離奇詭異叛薯,居然都是意外死亡浑吟,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門耗溜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來组力,“玉大人,你說我怎么就攤上這事抖拴×亲郑” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵阿宅,是天一觀的道長(zhǎng)候衍。 經(jīng)常有香客問我,道長(zhǎng)洒放,這世上最難降的妖魔是什么蛉鹿? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮往湿,結(jié)果婚禮上妖异,老公的妹妹穿的比我還像新娘。我一直安慰自己煌茴,他們只是感情好随闺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蔓腐,像睡著了一般矩乐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上回论,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天散罕,我揣著相機(jī)與錄音,去河邊找鬼傀蓉。 笑死欧漱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的葬燎。 我是一名探鬼主播误甚,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼谱净!你這毒婦竟也來了窑邦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤壕探,失蹤者是張志新(化名)和其女友劉穎冈钦,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體李请,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瞧筛,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年厉熟,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片较幌。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡揍瑟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乍炉,到底是詐尸還是另有隱情月培,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布恩急,位于F島的核電站,受9級(jí)特大地震影響纪蜒,放射性物質(zhì)發(fā)生泄漏衷恭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一纯续、第九天 我趴在偏房一處隱蔽的房頂上張望随珠。 院中可真熱鬧,春花似錦猬错、人聲如沸窗看。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽显沈。三九已至,卻和暖如春逢唤,著一層夾襖步出監(jiān)牢的瞬間拉讯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工鳖藕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留魔慷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓著恩,卻偏偏與公主長(zhǎng)得像院尔,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喉誊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 如果本文幫助到你邀摆,本人不勝榮幸,如果浪費(fèi)了你的時(shí)間裹驰,本人深感抱歉隧熙。希望用最簡(jiǎn)單的大白話來幫助那些像我一樣的人。如果...
    Wing_Li閱讀 14,503評(píng)論 25 84
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,789評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫幻林、插件贞盯、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評(píng)論 4 62
  • 遇到這個(gè)問題可能是多種原因造成的音念,從以下兩種情況查找: 1. 檢查IP地址是否正確 依次打開: 管理-全局設(shè)定-網(wǎng)...
    Devid閱讀 38,088評(píng)論 19 1
  • 還記得高一下學(xué)期那年,我們要分班了躏敢。我班上一部分同學(xué)選擇了文科留在了本班闷愤,一部分選擇理科走了,還有一部分去了別的文...
    啾三歲閱讀 208評(píng)論 0 1