android fragment 底部菜单栏,一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager...
現在大多數App都會用到底部導航欄，比如常見的聊天工具QQ、微信、購物App等等，有了底部導航欄，用戶可以隨時切換界面，查看不同的內容。它的實現方式也很多，以前大多使用TabHost來實現，但是現在我們有很多更好的選擇。
常見的底部導航欄實現方式：
1.使用LinearLayout + TextView實現了底部導航欄的效果
2.使用RadioGroup + RadioButton實現了底部導航欄的效果
3.利用BottomNavigationBar實現底部導航欄
.......
實現方式有很多，不過好像都只是關于下邊Tab切換而已，沒有實現Tab與界面的聯動，用的時候還要自己手寫這部分代碼，麻煩不麻煩？
作為一名注定要改變世界的程序猿，你讓我天天寫這個？這是不能忍的。
更高，更快，更強
就不能有個東西，能夠一句話搞定Android底部導航欄，一鍵綁定Fragment、ViewPager嗎？
所以，這個BottomTabBar產生了。GitHub項目地址
先來看下效果：
簡陋的演示.gif
How to use：
Step 1. Add the JitPack repository to your build file
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
compile 'com.github.zhaolei9527:UseBottomTabBar:v1.0.4'
}
XML布局文件代碼：
android:id="@+id/BottomTabBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
控件可設置參數：
參數名
描述
tab_bar_background
BottomTabBar的整體背景顏色
tab_img_width
圖片寬度
tab_img_height
圖片高度
tab_font_size
文字尺寸
tab_img_font_padding
圖片文字間隔
tab_padding_top
上邊距
tab_padding_bottom
下邊距
tab_isshow_divider
是否顯示分割線
tab_divider_height
分割線高度
tab_divider_background
分割線背景
tab_selected_color
選中的顏色
tab_unselected_color
未選中的顏色
Activity文件代碼：
導包：import sakura.bottomtabbar.BottomTabBar;
綁定Fragment的:(一句話搞定有木有？)
BottomTabBar.initFragmentorViewPager(getSupportFragmentManager())
.addReplaceLayout(R.id.fl_content)
.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round), FragmentA.class)
.addTabItem("鳳梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round), FragmentB.class)
.addTabItem("櫻桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round), FragmentC.class)
.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round), FragmentD.class)
.commit();
綁定ViewPager的:(一句話搞定有木有？)
BottomTabBar.initFragmentorViewPager(viewpager)
.setChangeColor(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorPrimary))
.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round))
.addTabItem("鳳梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round))
.addTabItem("櫻桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round))
.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round))
.commit();
代碼可配置參數方法：
參數名
描述
setImgSize
設置圖片的尺寸
setFontSize
設置文字的尺寸
setTabPadding
設置Tab的padding值
setChangeColor
設置選中未選中的顏色
setTabBarBackgroundColor
設置BottomTabBar的整體背景顏色
setTabBarBackgroundResource
設置BottomTabBar的整體背景圖片
isShowDivider
是否顯示分割線
setDividerHeight
設置分割線的高度
setDividerColor
設置分割線的顏色
很簡單，對不對，你想干什么，我都替你干。
劃重點，這個initFragmentorViewPager ( getSupportFragmentManager() | ViewPager)方法一定要第一個調用，沒有這個初始化，后邊什么也做不了。
另外，上述實例的addTabItem是支持選中狀態圖片切換的方法，在此之外，還支持不需要切換圖片的模式。
/**
* 添加TabItem
* @param name 文字
* @param imgId 圖片id
* @return
*/
public BottomTabBar addTabItem(String name, int imgId)｛...｝
/**
* 添加TabItem
* @param name 文字
* @param imgId 圖片id
* @param Fragmentclazz Fragment類
* @return
*/
public BottomTabBar addTabItem(String name, int imgId, Class Fragmentclazz)｛...｝
另外，考慮到在底部導航欄點擊切換界面的需求之外的其他需求，BottomTabBar提供了點擊事件的回調。
((BottomTabBar) findViewById(R.id.BottomTabBar))
.initFragmentorViewPager(getSupportFragmentManager())
.addReplaceLayout(R.id.fl_content)
.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round), FragmentA.class)
.addTabItem("鳳梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round), FragmentB.class)
.addTabItem("櫻桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round), FragmentC.class)
.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round), FragmentD.class)
.setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {
@Override
public void onTabChange(int position, View V) {
Toast.makeText(FragmentActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();
}
})
.commit();
項目代碼概覽：
獲取xml配置樣式 ：
public BottomTabBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.BottomTabBar);
if (attributes != null) {
//圖片寬度
imgWidth = attributes.getDimension(R.styleable.BottomTabBar_tab_img_width, dp2px(30));
//圖片高度
imgHeight = attributes.getDimension(R.styleable.BottomTabBar_tab_img_height, dp2px(30));
//文字尺寸
fontSize = attributes.getDimension(R.styleable.BottomTabBar_tab_font_size, 14);
//上邊距
paddingTop = attributes.getDimension(R.styleable.BottomTabBar_tab_padding_top, dp2px(2));
//圖片文字間隔
fontImgPadding = attributes.getDimension(R.styleable.BottomTabBar_tab_img_font_padding, dp2px(3));
//下邊距
paddingBottom = attributes.getDimension(R.styleable.BottomTabBar_tab_padding_bottom, dp2px(5));
//分割線高度
dividerHeight = attributes.getDimension(R.styleable.BottomTabBar_tab_divider_height, dp2px(1));
//是否顯示分割線
isShowDivider = attributes.getBoolean(R.styleable.BottomTabBar_tab_isshow_divider, false);
//選中的顏色
selectColor = attributes.getColor(R.styleable.BottomTabBar_tab_selected_color, Color.parseColor("#F1453B"));
//未選中的顏色
unSelectColor = attributes.getColor(R.styleable.BottomTabBar_tab_unselected_color, Color.parseColor("#626262"));
//BottomTabBar的整體背景
tabBarBackgroundColor = attributes.getColor(R.styleable.BottomTabBar_tab_bar_background, Color.parseColor("#FFFFFF"));
//分割線背景
dividerBackgroundColor = attributes.getColor(R.styleable.BottomTabBar_tab_divider_background, Color.parseColor("#CCCCCC"));
attributes.recycle();
}
}
初始化View ：
private void initView() {
mLayout = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.bottom_tab_bar, null);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
mLayout.setLayoutParams(layoutParams);
mLayout.setBackgroundColor(tabBarBackgroundColor);
addView(mLayout);
mDivider = mLayout.findViewById(R.id.mDivider);
mTabContent = (LinearLayout) mLayout.findViewById(R.id.mTabContent);
if (isShowDivider) {
LayoutParams dividerParams = new LayoutParams(LayoutParams.MATCH_PARENT, (int) dividerHeight);
mDivider.setLayoutParams(dividerParams);
mDivider.setBackgroundColor(dividerBackgroundColor);
mDivider.setVisibility(VISIBLE);
} else {
mDivider.setVisibility(GONE);
}
}
ViewPager模式添加Tab ：
public BottomTabBar addTabItem(final String name, Drawable selectdrawable, Drawable unselectdrawable) {
selectdrawableList.add(selectdrawable);
unselectdrawableList.add(unselectdrawable);
LinearLayout TabItem = (LinearLayout) View.inflate(context, R.layout.tab_item, null);
TabItem.setGravity(Gravity.CENTER);
//設置TabItem標記
TabItem.setTag(name);
//添加標記至集合以作辨別
tabIdList.add(String.valueOf(TabItem.getTag()));
TabItem.setOnClickListener(this);
//Tab圖片樣式及內容設置
ImageView tab_item_img = (ImageView) TabItem.findViewById(R.id.tab_item_img);
tab_item_imgparams = new LayoutParams((int) imgWidth, (int) imgHeight);
tab_item_imgparams.topMargin = (int) paddingTop;
tab_item_imgparams.bottomMargin = (int) fontImgPadding;
tab_item_img.setLayoutParams(tab_item_imgparams);
//Tab文字樣式及內容設置
TextView tab_item_tv = (TextView) TabItem.findViewById(R.id.tab_item_tv);
tab_item_tvparams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
tab_item_tvparams.bottomMargin = (int) paddingBottom;
tab_item_tv.setLayoutParams(tab_item_tvparams);
tab_item_tv.setTextSize(fontSize);
tab_item_tv.setText(name);
if (tabIdList.size() == 1) {
tab_item_tv.setTextColor(selectColor);
tab_item_img.setBackground(selectdrawable);
} else {
tab_item_tv.setTextColor(unSelectColor);
tab_item_img.setBackground(unselectdrawable);
}
TabItem.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));
mTabContent.addView(TabItem);
return this;
}
Fragment模式添加Tab ：
public BottomTabBar addTabItem(final String name, Drawable selectdrawable, Drawable unselectdrawable, Class fragmentClass) {
selectdrawableList.add(selectdrawable);
unselectdrawableList.add(unselectdrawable);
Class> clazz = null;
try {
clazz = Class.forName(fragmentClass.getName());
Fragment fragment = (Fragment) clazz.newInstance();
} catch (Exception e) {
e.printStackTrace();
}
FragmentList.add(fragmentClass);
LinearLayout TabItem = (LinearLayout) View.inflate(context, R.layout.tab_item, null);
TabItem.setGravity(Gravity.CENTER);
//設置TabItem標記
TabItem.setTag(name);
//添加標記至集合以作辨別
tabIdList.add(String.valueOf(TabItem.getTag()));
TabItem.setOnClickListener(this);
//Tab圖片樣式及內容設置
ImageView tab_item_img = (ImageView) TabItem.findViewById(R.id.tab_item_img);
tab_item_imgparams = new LayoutParams((int) imgWidth, (int) imgHeight);
tab_item_imgparams.topMargin = (int) paddingTop;
tab_item_imgparams.bottomMargin = (int) fontImgPadding;
tab_item_img.setLayoutParams(tab_item_imgparams);
//Tab文字樣式及內容設置
TextView tab_item_tv = (TextView) TabItem.findViewById(R.id.tab_item_tv);
tab_item_tvparams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
tab_item_tvparams.bottomMargin = (int) paddingBottom;
tab_item_tv.setLayoutParams(tab_item_tvparams);
tab_item_tv.setTextSize(fontSize);
tab_item_tv.setText(name);
if (tabIdList.size() == 1) {
tab_item_tv.setTextColor(selectColor);
tab_item_img.setBackground(selectdrawable);
} else {
tab_item_tv.setTextColor(unSelectColor);
tab_item_img.setBackground(unselectdrawable);
}
TabItem.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));
mTabContent.addView(TabItem);
return this;
}
Fragment切換處理 ：
private void relaceFrament(int i) {
Class aClass = FragmentList.get(i);
Class> clazz = null;
try {
clazz = Class.forName(aClass.getName());
Fragment Fragment = (Fragment) clazz.newInstance();
android.support.v4.app.FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
fragmentTransaction.replace(mReplaceLayout, Fragment);
fragmentTransaction.commit();
} catch (Exception e) {
e.printStackTrace();
}
}
Tab點擊事件處理 :
@Override
public void onClick(View v) {
for (int i = 0; i < tabIdList.size(); i++) {
if (tabIdList.get(i).equals(v.getTag())) {
if (mViewpager != null) {
//綁定ViewPager
mViewpager.setCurrentItem(i);
}
if (mFragmentManager != null) {
if (mReplaceLayout == 0) {
throw new IllegalStateException(
"Must input ReplaceLayout of mReplaceLayout");
}
relaceFrament(i);
changeTab(i);
}
//綁定點擊監聽回調
listener.onTabChange(i, v);
}
}
}
Tab選中更改樣式 ：
private void changeTab(int position) {
if (position + 1 > mTabContent.getChildCount()) {
throw new IndexOutOfBoundsException("onPageSelected:" + (position + 1) +
"，of Max mTabContent ChildCount:" + mTabContent.getChildCount());
}
for (int i = 0; i < mTabContent.getChildCount(); i++) {
View TabItem = mTabContent.getChildAt(i);
if (i == position) {
((TextView) TabItem.findViewById(R.id.tab_item_tv)).setTextColor(selectColor);
if (!selectdrawableList.isEmpty())
TabItem.findViewById(R.id.tab_item_img).setBackground(selectdrawableList.get(i));
} else {
((TextView) TabItem.findViewById(R.id.tab_item_tv)).setTextColor(unSelectColor);
if (!selectdrawableList.isEmpty())
TabItem.findViewById(R.id.tab_item_img).setBackground(unselectdrawableList.get(i));
}
}
}
總結
代碼整體滿足了一句話搞定Android底部導航欄，一鍵綁定Fragment、ViewPager的功能，當然，
有了需求才有了功能，有了想法才有了創作，你的反饋會是使我進步的最大動力。
覺得還不夠方便？還想要什么功能？告訴我！歡迎反饋，歡迎Star。源碼入口：UseBottomTabBar-GitHub項目地址
總結
以上是生活随笔為你收集整理的android fragment 底部菜单栏,一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初级软考-程序员 复习笔记
- 下一篇： android include 点击事件