1. 程式人生 > >bottonTabBar實現底部導航

bottonTabBar實現底部導航


 
  

超簡單,幾行程式碼搞定Android底部導航欄-----補充 應專案需求以及小夥伴的留言,新加了兩個方法:

  • 設定底部導航欄背景圖片
  • 新增底部導航欄選項卡切換監聽事件

底部導航欄的實現也不難,就是下邊是幾個Tab切換,上邊一般是一個FrameLayout,然後FrameLayout中切換fragment。

網上有不少關於Android底部導航欄的文章,不過好像都只是關於下邊Tab切的,沒有實現Tab與fragment的聯動,用的時候還要自己手寫這部分程式碼,對我這個比較懶(據說,懶是程式設計師的一種美德_#)得程式設計師來說,這是不能忍的。

下邊就來說說我的BottomTabBar吧。

BottomTabBar.png

這就是我以前封裝過的BottomTabBar的效果圖,現在就從這張效果圖開始,先分析一下,都需要設定那些引數吧。

1、BottomTabBar的整體背景

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

2、圖片

這裡不僅要傳入一個圖片,還要做圖片做一些設定:

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

與圖片類似,文字也需要做一些設定:

  • 文字的大小
  • 文字也是需要設定居中的,也像圖片一樣固定寫死
4、 顏色

文字和圖片的顏色都是隻有兩種,一種是選中狀態下的,一種是未選中的,我們可以在這裡統一設定,提供一個方法就可以了

5、邊距

這裡需要設定三個地方的邊距:

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

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

7、fragment

我這個BottomTabBar既然是要與fragment聯動的,所以必須要傳入一個fragment

大體的引數就是需要這些了,下面上程式碼:

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="http://schemas.android.com/apk/res-auto"

下面就開始詳細的解釋一下每個引數的含義以及用法:

引數名 涵義
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 未選中的顏色
這些引數可以指接在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() )方法一定要第一個呼叫,沒有這個初始化,後邊什麼也做不了。

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

下邊是一些方法的使用,都加了註釋了

    /**
     * 設定圖片的尺寸
     * <p>
     * 此方法必須在addTabItem()之前呼叫
     *
     * @param width  寬度 px
     * @param height 高度 px
     * @return
     */
    setImgSize(float width, float height)

    /**
     * 設定文字的尺寸
     * <p>
     * 此方法必須在addTabItem()之前呼叫
     *
     * @param textSize 文字的尺寸 sp
     * @return
     */
    setFontSize(float textSize)

    /**
     * 設定Tab的padding值
     * <p>
     * 此方法必須在addTabItem()之前呼叫
     *
     * @param top    上邊距 px
     * @param middle 文字圖片的距離 px
     * @param bottom 下邊距 px
     * @return
     */
    setTabPadding(float top, float middle, float bottom)

    /**
     * 設定選中未選中的顏色
     * <p>
     * 此方法必須在addTabItem()之前呼叫
     *
     * @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()之前呼叫,如果放在addTabItem()之後呼叫的話,就沒有任何的效果了。

正確用法如下:
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);


作者:古月金子皿
連結:https://www.jianshu.com/p/ade8485a16be
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。