快捷導(dǎo)航

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

更新時(shí)間：2018年03月06日 10:15:16 作者：AND_Devil

這篇文章主要介紹了超簡(jiǎn)單的幾行代碼搞定Android底部導(dǎo)航欄功能,需要的朋友可以參考下

超簡(jiǎn)單，幾行代碼搞定Android底部導(dǎo)航欄—–應(yīng)項(xiàng)目需求以及小伙伴的留言，新加了兩個(gè)方法：

設(shè)置底部導(dǎo)航欄背景圖片
添加底部導(dǎo)航欄選項(xiàng)卡切換監(jiān)聽(tīng)事件

底部導(dǎo)航欄的實(shí)現(xiàn)也不難，就是下邊是幾個(gè)Tab切換，上邊一般是一個(gè)FrameLayout，然后FrameLayout中切換fragment。

網(wǎng)上有不少關(guān)于Android底部導(dǎo)航欄的文章，不過(guò)好像都只是關(guān)于下邊Tab切的，沒(méi)有實(shí)現(xiàn)Tab與fragment的聯(lián)動(dòng)，用的時(shí)候還要自己手寫(xiě)這部分代碼，對(duì)我這個(gè)比較懶（據(jù)說(shuō)，懶是程序員的一種美德_#）得程序員來(lái)說(shuō)，這是不能忍的。

下邊就來(lái)說(shuō)說(shuō)我的BottomTabBar吧。

這就是我以前封裝過(guò)的BottomTabBar的效果圖，現(xiàn)在就從這張效果圖開(kāi)始，先分析一下，都需要設(shè)置那些參數(shù)吧。

1、BottomTabBar的整體背景

雖然一般這里都是用白色或者接近白色的淺色調(diào)作為背景，但我們也不能給他固定死，要提供這樣的一個(gè)方法，讓使用者可以把背景設(shè)置成任何的顏色。

2、圖片

這里不僅要傳入一個(gè)圖片，還要做圖片做一些設(shè)置：

圖片的寬高尺寸（這個(gè)也需要對(duì)外設(shè)置一個(gè)方法）
圖片得設(shè)置居中，這個(gè)直接固定寫(xiě)死就好了，我見(jiàn)過(guò)的應(yīng)用都是設(shè)置居中的，沒(méi)見(jiàn)過(guò)別的情況，個(gè)人感覺(jué)，不設(shè)置居中也不美觀啊

3、文字

與圖片類(lèi)似，文字也需要做一些設(shè)置：

文字的大小
文字也是需要設(shè)置居中的，也像圖片一樣固定寫(xiě)死

4、顏色

文字和圖片的顏色都是只有兩種，一種是選中狀態(tài)下的，一種是未選中的，我們可以在這里統(tǒng)一設(shè)置，提供一個(gè)方法就可以了

5、邊距

這里需要設(shè)置三個(gè)地方的邊距：

Top邊距，也就是圖片與上邊分割線的距離
middle邊距，也就是圖片與文字的距離
Bottom邊距，也就是文字與底部的距離

6、分割線

上邊說(shuō)到了，圖片上邊需要設(shè)置分割線，當(dāng)然，這只是部分使用者需要設(shè)置的，所以我們需要提供一個(gè)方法，用來(lái)設(shè)置是否顯示分割線。此外還要設(shè)置分割線的高度以及其背景顏色

7、fragment

我這個(gè)BottomTabBar既然是要與fragment聯(lián)動(dòng)的，所以必須要傳入一個(gè)fragment

大體的參數(shù)就是需要這些了，下面上代碼：

GitHub代碼連接

用法也簡(jiǎn)單，就像標(biāo)題說(shuō)的幾行代碼就可以搞定：

引用方式：

compile 'com.hjm:BottomTabBar:1.0.0'

1. 首先是XML文件代碼：

<com.hjm.bottomtabbar.BottomTabBar
  android:id="@+id/bottom_tab_bar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

簡(jiǎn)單吧，就這么一個(gè)控件就可以了。

當(dāng)然，你要是想進(jìn)行一些屬性設(shè)置的話，需要加上命名空間

xmlns:hjm="

下面就開(kāi)始詳細(xì)的解釋一下每個(gè)參數(shù)的含義以及用法：

參數(shù)名	涵義
tab_bar_background	BottomTabBar的整體背景顏色
tab_img_width	圖片寬度
tab_img_height	圖片高度
tab_font_size	文字尺寸
tab_padding_top	上邊距
tab_img_font_padding	圖片文字間隔
tab_padding_bottom	下邊距
tab_isshow_divider	是否顯示分割線
tab_divider_height	分割線高度
tab_divider_background	分割線背景
tab_selected_color	選中的顏色
tab_unselected_color	未選中的顏色

這些參數(shù)可以指接在XML文件里設(shè)置

<com.hjm.bottomtabbar.BottomTabBar
  android:id="@+id/bottom_tab_bar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  hjm:tab_divider_background="#FF0000"
  hjm:tab_divider_height="5dp"
  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"
  hjm:tab_padding_bottom="5dp"
  hjm:tab_padding_top="8dp"
  hjm:tab_selected_color="#000000"  hjm:tab_unselected_color="@color/colorPrimary" />

2. Activity文件代碼：

mBottomTabBar = (BottomTabBar) findViewById(R.id.bottom_tab_bar);
mBottomTabBar.init(getSupportFragmentManager())
   .addTabItem("第一項(xiàng)", R.mipmap.ic_launcher, OneFragment.class)
   .addTabItem("第二項(xiàng)", R.mipmap.ic_launcher, TwoFragment.class)
   .addTabItem("第三項(xiàng)", R.mipmap.ic_launcher, ThreeFragment.class)
   .addTabItem("第四項(xiàng)", R.mipmap.ic_launcher, FourFragment.class);

也很簡(jiǎn)單，是吧。

這里簡(jiǎn)單的提一句，這個(gè)init ( getSupportFragmentManager() )方法一定要第一個(gè)調(diào)用，沒(méi)有這個(gè)初始化，后邊什么也做不了。

或許大家也看出來(lái)了，這個(gè)init()方法里，我們需要傳入一個(gè)FragmentManager，而且還是V4包下的，所以，在使用Activity的時(shí)候需要注意一下。

下邊是一些方法的使用，都加了注釋了

 /**
   * 設(shè)置圖片的尺寸
   * <p>
   * 此方法必須在addTabItem()之前調(diào)用
   *
   * @param width 寬度 px
   * @param height 高度 px
   * @return
   */
  setImgSize(float width, float height)
  /**
   * 設(shè)置文字的尺寸
   * <p>
   * 此方法必須在addTabItem()之前調(diào)用
   *
   * @param textSize 文字的尺寸 sp
   * @return
   */
  setFontSize(float textSize)
  /**
   * 設(shè)置Tab的padding值
   * <p>
   * 此方法必須在addTabItem()之前調(diào)用
   *
   * @param top  上邊距 px
   * @param middle 文字圖片的距離 px
   * @param bottom 下邊距 px
   * @return
   */
  setTabPadding(float top, float middle, float bottom)
  /**
   * 設(shè)置選中未選中的顏色
   * <p>
   * 此方法必須在addTabItem()之前調(diào)用
   *
   * @param selectColor  選中的顏色
   * @param unSelectColor 未選中的顏色
   * @return
   */
  setChangeColor(@ColorInt int selectColor, @ColorInt int unSelectColor)
  /**
   * 設(shè)置BottomTabBar的整體背景
   *
   * @param color 背景顏色
   * @return
   */
  setTabBarBackgroundColor(@ColorInt int color) 
  /**
   * 是否顯示分割線
   *
   * @param isShowDivider
   * @return
   */
  isShowDivider(boolean isShowDivider)
  /**
   * 設(shè)置分割線的高度
   *
   * @param height
   * @return
   */
  setDividerHeight(float height)
  /**
   * 設(shè)置分割線的顏色
   *
   * @param color
   * @return
   */
  setDividerColor(@ColorInt int color) 
  /**
   * 添加TabItem
   *
   * @param name     文字
   * @param drawable   圖片
   * @param fragmentClass fragment
   * @return
   */
  addTabItem(String name, Drawable drawable, Class fragmentClass)

值得注意的是前四個(gè)方法必須在addTabItem()之前調(diào)用，如果放在addTabItem()之后調(diào)用的話，就沒(méi)有任何的效果了。

正確用法如下：

mBottomTabBar.init(getSupportFragmentManager())
   .setImgSize(50,50)
   .setFontSize(8)
   .setTabPadding(4,6,10)
   .setChangeColor(Color.DKGRAY,Color.RED)
   .addTabItem("第一項(xiàng)", R.mipmap.ic_launcher, OneFragment.class)
   .addTabItem("第二項(xiàng)", R.mipmap.ic_launcher, TwoFragment.class)
   .addTabItem("第三項(xiàng)", R.mipmap.ic_launcher, ThreeFragment.class)
   .addTabItem("第四項(xiàng)", R.mipmap.ic_launcher, FourFragment.class)
   .setTabBarBackgroundColor(Color.WHITE)
   .isShowDivider(false);

總結(jié)

以上所述是小編給大家介紹的超簡(jiǎn)單的幾行代碼搞定Android底部導(dǎo)航欄功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！