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
大體的引數就是需要這些了,下面上程式碼:
用法也簡單,就像標題說的幾行程式碼就可以搞定:
引用方式:
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
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。