超簡(jiǎn)單,幾行代碼搞定Android底部導(dǎo)航欄

咳咳汪诉,答應(yīng)過(guò)年增加新功能的废恋,沒(méi)想到拖到現(xiàn)在,延遲了一個(gè)來(lái)月扒寄,尷尬鱼鼓,尷尬
那個(gè),我們先忽略這尷尬的事情吧该编,進(jìn)入正題才是最重要滴

老規(guī)矩迄本,先上效果圖:


BottomTabBar.png

跟原來(lái)的圖有個(gè)很明顯的區(qū)別,你們也一定都發(fā)現(xiàn)了课竣,對(duì)不對(duì)嘉赎。那么顯眼的小紅點(diǎn),一定都看到了吧于樟。

當(dāng)然除了這個(gè)公条,還增加了一項(xiàng)功能,雖然不是很明顯迂曲,但相信也有小伙伴發(fā)現(xiàn)了吧靶橱,截圖的這倆手機(jī)屏幕明顯大小不同,但是底部導(dǎo)航欄的大小還是相差不大滴。

是的关霸,你們沒(méi)有看多传黄,這次不僅增加了小紅點(diǎn)功能,還增加了底部導(dǎo)航欄的適配队寇,你沒(méi)有聽(tīng)錯(cuò)膘掰,以后底部導(dǎo)航欄也不用那些dp、sp了佳遣,都按照UI妹子們標(biāo)注的px來(lái)就可以了识埋,再也不用為了底部導(dǎo)航欄去跟UI妹子解釋啥叫dp了。

好了苍日,效果圖展示完了,現(xiàn)在該進(jìn)入枯燥的使用介紹了窗声。


由于這次改動(dòng)有點(diǎn)大相恃,所以,先介紹下上個(gè)穩(wěn)定版本的用法笨觅,到底是用最新的拦耐,還是用原來(lái)的,就看各位小伙伴的意愿了

上個(gè)穩(wěn)定版本是1.1.3的见剩,引用方式如下
compile 'com.hjm:BottomTabBar:1.1.3'

具體用法如下(備注都加好了杀糯,我也就不多廢話(huà)了):

    <com.hjm.bottomtabbar.BottomTabBar
        android:id="@+id/bottom_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  
        hjm:tab_bar_background="#FFFFFF"                     //BottomTabBar的整體背景顏色
        hjm:tab_divider_background="#FF0000"                 //分割線(xiàn)背景
        hjm:tab_divider_height="5dp"                         //分割線(xiàn)高度
        hjm:tab_font_size="6sp"                              //文字尺寸
        hjm:tab_img_font_padding="0dp"                       //圖片文字間隔
        hjm:tab_img_height="30dp"                            //圖片高度
        hjm:tab_img_width="30dp"                             //圖片寬度
        hjm:tab_isshow_divider="true"                        //是否顯示分割線(xiàn)
        hjm:tab_padding_bottom="5dp"                         //下邊距
        hjm:tab_padding_top="8dp"                            //上邊距
        hjm:tab_selected_color="#000000"                     //選中的顏色
        hjm:tab_unselected_color="@color/colorPrimary"/>     //未選中的顏色
private BottomTabBar mBottomTabBar;

mBottomTabBar = (BottomTabBar) findViewById(R.id.bottom_tab_bar);

mBottomTabBar
    .init(getSupportFragmentManager())//初始化方法,必須第一個(gè)調(diào)用苍苞;傳入?yún)?shù)為V4包下的FragmentManager
    .setImgSize(50,50)//設(shè)置ICON圖片的尺寸
    .setFontSize(8)//設(shè)置文字的尺寸
    .setTabPadding(4,6,10)//設(shè)置ICON圖片與上部分割線(xiàn)的間隔固翰、圖片與文字的間隔、文字與底部的間隔
    .setChangeColor(Color.DKGRAY,Color.RED)//設(shè)置選中的顏色羹呵、未選中的顏色
    .addTabItem("第一項(xiàng)", R.mipmap.ic_launcher, OneFragment.class)//設(shè)置文字骂际、一張圖片、fragment
    .addTabItem("第二項(xiàng)", R.mipmap.erweima, R.mipmap.ic_launcher, TwoFragment.class)//設(shè)置文字冈欢、兩張圖片歉铝、fragment
    .isShowDivider(false)//設(shè)置是否顯示分割線(xiàn)
    .setTabBarBackgroundColor(Color.WHITE)//設(shè)置底部導(dǎo)航欄顏色
    .setTabBarBackgroundResource(R.mipmap.ic_launcher)//設(shè)置底部導(dǎo)航欄的背景圖片【與設(shè)置底部導(dǎo)航欄顏色方法不能同時(shí)使用,否則會(huì)覆蓋掉前邊設(shè)置的顏色】
    .setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {//添加選項(xiàng)卡切換監(jiān)聽(tīng)
        @Override
        public void onTabChange(int position, String name) {
            //這里不用說(shuō)凑耻,你們也都看的懂了
            //暫時(shí)就返回了這倆參數(shù)太示,如果還有什么用的比較多的參數(shù),歡迎留言告訴我香浩,我繼續(xù)添加上
            Log.i("TGA", "位置:" + position + "      選項(xiàng)卡的文字內(nèi)容:" + name);
        }
    })
    .setCurrentTab(0);//設(shè)置當(dāng)前選中的Tab类缤,從0開(kāi)始

最新版本是1.2.2的,引用方式如下
compile 'com.hjm:BottomTabBar:1.2.2'

    <com.hjm.bottomtabbar.BottomTabBar
        android:id="@+id/bottom_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  
        hjm:tab_bar_background="#FFFFFF"                     //BottomTabBar的整體背景顏色
        hjm:tab_divider_background="#FF0000"                 //分割線(xiàn)背景
        hjm:tab_font_size="14px"                             //文字尺寸
        hjm:tab_img_font_padding="0"                       //圖片文字間隔
        hjm:tab_img_height="70px"                            //圖片高度
        hjm:tab_img_width="70px"                            //圖片寬度
        hjm:tab_isshow_divider="true"                        //是否顯示分割線(xiàn)
        hjm:tab_padding_bottom="5px"                        //下邊距
        hjm:tab_padding_top="5px"                           //上邊距
        hjm:tab_selected_color="#000000"                     //選中的顏色
        hjm:tab_unselected_color="@color/colorPrimary"/>     //未選中的顏色
 mBottomBar = findViewById(R.id.bottom_bar);

        mBottomBar.init(getSupportFragmentManager(), 720, 1280)
//                .setImgSize(70, 70)
//                .setFontSize(14)
//                .setTabPadding(5, 0, 5)
//                .setChangeColor(Color.parseColor("#FF00F0"),Color.parseColor("#CCCCCC"))
                .addTabItem("第一項(xiàng)", R.mipmap.home_selected, R.mipmap.home, OneFragment.class)
                .addTabItem("第二項(xiàng)", R.mipmap.list, TwoFragment.class)
                .addTabItem("第三項(xiàng)", R.mipmap.user, ThreeFragment.class)
//                .isShowDivider(true)
//                .setDividerColor(Color.parseColor("#FF0000"))
//                .setTabBarBackgroundColor(Color.parseColor("#00FF0000"))
                .setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {
                    @Override
                    public void onTabChange(int position, String name, View view) {
                        if (position == 1)
                            mBottomBar.setSpot(1, false);
                    }
                })
                .setSpot(1, true)
                .setSpot(2, true);

其實(shí)1.2.0與1.1.3區(qū)別并不大邻吭,只有4點(diǎn)改動(dòng):

1呀非、去掉了原來(lái)對(duì)分割線(xiàn)高度的設(shè)置

現(xiàn)在默認(rèn)的,分割線(xiàn)高度都是設(shè)置的1個(gè)像素。這里以后也固定都用這個(gè)默認(rèn)的高度了岸裙,不再對(duì)外提供修改的方法猖败。

2、xml文件中降允,不再使用dp恩闻、sp,都需要改為px

這就是新增加的適配了剧董,多的也不說(shuō)了幢尚,你們都懂的

3、init方法中新增兩個(gè)變量:標(biāo)準(zhǔn)尺寸

標(biāo)準(zhǔn)尺寸翅楼,就是UI妹子給你提供的效果圖的屏幕尺寸尉剩,只要在init()方法里添加上標(biāo)準(zhǔn)尺寸,你就可以放肆的使用px了

4毅臊、新增方法setSpot(int index,boolean isShow)

這個(gè)方法就是控制小紅點(diǎn)顯示的方法了理茎,index就是需要顯示或者隱藏小紅點(diǎn)的TabItem,isShow是一個(gè)boolean類(lèi)型的參數(shù)管嬉,他是控制小紅點(diǎn)是否顯示的皂林,如果為true,就會(huì)顯示小紅點(diǎn)蚯撩;如果為false础倍,就會(huì)隱藏小紅點(diǎn)

1.2.2版本新增了兩個(gè)方法

  • init(FragmentManager manager),這里不需要傳入標(biāo)準(zhǔn)設(shè)計(jì)稿的寬高胎挎,然后setImgSize()沟启、setFontSize()、setTabPadding()就可以直接使用dp犹菇、sp進(jìn)行參數(shù)設(shè)置了
  • getTabBar()美浦,此方法返回值是CustomFragmentTabHost,就是底部的TabBar项栏,獲取TabBar之后浦辨,就可以對(duì)其進(jìn)行隱藏、顯示等操作了

介紹到這里沼沈,超簡(jiǎn)單的底部導(dǎo)航欄流酬,第二階段就可以告一段落了。以后還會(huì)持續(xù)優(yōu)化列另,完善的芽腾。
第三階段我打算封裝一下有中間凸起的底部導(dǎo)航欄,這個(gè)功能我本地已經(jīng)做了页衙,但是封裝進(jìn)去的時(shí)候摊滔,封裝的不理想阴绢,這次就沒(méi)有上線(xiàn),留作下次了艰躺。

最后呻袭,再上個(gè)GitHub地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市腺兴,隨后出現(xiàn)的幾起案子左电,更是在濱河造成了極大的恐慌,老刑警劉巖页响,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件篓足,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡闰蚕,警方通過(guò)查閱死者的電腦和手機(jī)栈拖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)没陡,“玉大人涩哟,你說(shuō)我怎么就攤上這事∈迹” “怎么了染簇?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵参滴,是天一觀(guān)的道長(zhǎng)强岸。 經(jīng)常有香客問(wèn)我,道長(zhǎng)砾赔,這世上最難降的妖魔是什么蝌箍? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮暴心,結(jié)果婚禮上妓盲,老公的妹妹穿的比我還像新娘。我一直安慰自己专普,他們只是感情好悯衬,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著檀夹,像睡著了一般筋粗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上炸渡,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天娜亿,我揣著相機(jī)與錄音,去河邊找鬼蚌堵。 笑死买决,一個(gè)胖子當(dāng)著我的面吹牛沛婴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播督赤,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼嘁灯,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了够挂?” 一聲冷哼從身側(cè)響起旁仿,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎孽糖,沒(méi)想到半個(gè)月后枯冈,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡办悟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年尘奏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片病蛉。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡炫加,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铺然,到底是詐尸還是另有隱情俗孝,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布魄健,位于F島的核電站赋铝,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏沽瘦。R本人自食惡果不足惜革骨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望析恋。 院中可真熱鬧良哲,春花似錦、人聲如沸助隧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)并村。三九已至巍实,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間橘霎,已是汗流浹背蔫浆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留姐叁,地道東北人瓦盛。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓洗显,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親原环。 傳聞我的和親對(duì)象是個(gè)殘疾皇子挠唆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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