超簡單的幾行代碼搞定Android底部導航欄功能

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

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

超簡單，幾行代碼搞定Android底部導航欄—–應項目需求以及小伙伴的留言，新加了兩個方法：

設置底部導航欄背景圖片
添加底部導航欄選項卡切換監(jiān)聽事件

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

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

下邊就來說說我的BottomTabBar吧。

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

1、BottomTabBar的整體背景

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

2、圖片

這里不僅要傳入一個圖片，還要做圖片做一些設置：

圖片的寬高尺寸（這個也需要對外設置一個方法）
圖片得設置居中，這個直接固定寫死就好了，我見過的應用都是設置居中的，沒見過別的情況，個人感覺，不設置居中也不美觀啊

3、文字

與圖片類似，文字也需要做一些設置：

文字的大小
文字也是需要設置居中的，也像圖片一樣固定寫死

4、顏色

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

5、邊距

這里需要設置三個地方的邊距：

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

6、分割線

上邊說到了，圖片上邊需要設置分割線，當然，這只是部分使用者需要設置的，所以我們需要提供一個方法，用來設置是否顯示分割線。此外還要設置分割線的高度以及其背景顏色

7、fragment

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

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

GitHub代碼連接

用法也簡單，就像標題說的幾行代碼就可以搞定：

引用方式：

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

簡單吧，就這么一個控件就可以了。

當然，你要是想進行一些屬性設置的話，需要加上命名空間

xmlns:hjm="

下面就開始詳細的解釋一下每個參數(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文件里設置

<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("第一項", R.mipmap.ic_launcher, OneFragment.class)
   .addTabItem("第二項", R.mipmap.ic_launcher, TwoFragment.class)
   .addTabItem("第三項", R.mipmap.ic_launcher, ThreeFragment.class)
   .addTabItem("第四項", R.mipmap.ic_launcher, FourFragment.class);

也很簡單，是吧。

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

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

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

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

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

正確用法如下：

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

總結

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