Android實現底部導航欄

字數 1058

閱讀 13296

喜歡 49

超簡單，幾行**搞定android底部導航欄-----補充

底部導航欄的實現也不難，就是下邊是幾個tab切換，上邊一般是乙個framelayout，然後framelayout中切換fragment。

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

下邊就來說說我的bottomtabbar吧。

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

1、bottomtabbar的整體背景

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

3、文字

4、顏色

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

5、邊距

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

6、分割線

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

7、fragment

我這個bottomtabbar既然是要與fragment聯動的，所以必須要傳入乙個fragment

大體的引數就是需要這些了，下面上**：

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

引用方式：

compile 'com.hjm:bottomtabbar:1.0.0'

1. 首先是xml檔案**：

簡單吧，就這麼乙個控制項就可以了。

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

xmlns:hjm=""

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

引數名涵義

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檔案裡設定

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的時候需要注意一下。

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

/** * 設定的尺寸 * * 此方法必須在addtabitem()之前呼叫 ** @param width 寬度 px * @param height 高度 px * @return */setimgsize(float width, float height) /*** 設定文字的尺寸 * * 此方法必須在addtabitem()之前呼叫 ** @param textsize 文字的尺寸 sp * @return */setfontsize(float textsize) /*** 設定tab的padding值 * * 此方法必須在addtabitem()之前呼叫 ** @param top 上邊距 px * @param middle 文字的距離 px * @param bottom 下邊距 px * @return */settabpadding(float top, float middle, float bottom) /*** 設定選中未選中的顏色 * * 此方法必須在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);

Android實現底部導航欄

vue 實現底部導航欄

Flutter底部導航欄的實現

底部導航欄帶紅點實現問題總結

Android實現底部導航欄

vue 實現底部導航欄

Flutter底部導航欄的實現

底部導航欄帶紅點實現問題總結

相關推薦