今天項目新換上了 BottomNavigationBar ，畢竟官方效果還炫酷：
GIF.gif
簡單的使用方法網上一搜一大堆，就不細說了，今天來講一下如何設置小紅點和 itembar 的動畫
shift_static.gif
shift_ripple.gif
fixed_ripple.gif
fixed_static.gif
但是!！這炫酷的效果很多都是沒什么軟用。
201705222145400892.jpg
首先，依賴一下：（已經更新了2.X，內容基本不變結尾有注明）
compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
在初始化控件，設置背景色、點擊顏色、分格啊等待
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
mBottomNavigationBar.setInActiveColor(R.color.line_bg_color);
mBottomNavigationBar.setActiveColor(R.color.mainColor);
mBottomNavigationBar.setBarBackgroundColor(R.color.white);
初始化 BadgeItem ，也就是小紅點
mBadgeItem = new BadgeItem()
.setBorderWidth(4)
.setAnimationDuration(200)
.setBackgroundColorResource(R.color.red)
.setHideOnSelect(false)
.setText("0");
mBadgeItem2 = new BadgeItem()
.setBorderWidth(4)
.setAnimationDuration(200)
.setBackgroundColorResource(R.color.red)
.setHideOnSelect(true)
.setText("0");
然后添加item，在第三和第四按鈕中添加小紅點：
List<BottomNavigationItem> items = new ArrayList<>();
items.add(getItem(R.mipmap.icon_home, R.string.main_home));
items.add(getItem(R.mipmap.icon_type, R.string.main_type));
items.add(getItem(R.mipmap.icon_sc, R.string.main_shop_car).setBadgeItem(mBadgeItem));
items.add(getItem(R.mipmap.icon_mine, R.string.main_mine).setBadgeItem(mBadgeItem2));
for (BottomNavigationItem item : items) {
mBottomNavigationBar.addItem(item);
}
mBottomNavigationBar.setFirstSelectedPosition(0);
mBottomNavigationBar.initialise();
private BottomNavigationItem getItem(int icon, int string) {
return new BottomNavigationItem(icon, string);
}
這是切換顯示 Fragment 的方法
public void getFragment() {
mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
switch (position) {
case 0:
showFragment(0);
break;
case 1:
showFragment(1);
break;
case 2:
showFragment(2);
break;
case 3:
showFragment(3);
break;
default:
break;
}
}
@Override
public void onTabUnselected(int position) { }
@Override
public void onTabReselected(int position) { }
});
}
最后在button點擊中調用小紅點刷新數據：
/**
* 設置tab數字提示加縮放動畫
*/
private void setBadgeNum(int num) {
mBadgeItem.setText(String.valueOf(num));
mBadgeItem2.setText(String.valueOf(num));
if (num == 5) {
mBadgeItem.hide();
mBadgeItem2.hide();
} else {
mBadgeItem.show();
mBadgeItem2.show();
}
}
GIF.gif
此時發現我們根據系統提供的一系列方法我們只能做到這些，那自然是不夠的：
怎么辦呢，當然是看源碼，BottomNavigationBar 的 initialise（）方法：
image.png
initialise() 中創建了一個FixedBottomNavigationTab，這就是我們要的，先看它怎么被調用的
public void initialise() {
//這就是開頭初始化設置的模式
if (mMode == MODE_FIXED) {
if (!mBottomNavigationItems.isEmpty()) {
mTabContainer.removeAllViews();
if (mMode == MODE_DEFAULT) {
if (mBottomNavigationItems.size() <= MIN_SIZE) {
mMode = MODE_FIXED;
} else {
mMode = MODE_SHIFTING;
}
}
//這是我們現在用的模式
if (mMode == MODE_FIXED) {
int[] widths = BottomNavigationHelper.getMeasurementsForFixedMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable);
int itemWidth = widths[0];
//遍歷所有item
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
//創建了一個 FixedBottomNavigationTab 對象
FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth);
}
} else if (mMode == MODE_SHIFTING) {
。。。。
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
ShiftingBottomNavigationTab bottomNavigationTab = new ShiftingBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemActiveWidth);
}
}
方法都指向 setUpTab，最后通過mTabContainer.addView(bottomNavigationTab);來添加 FixedBottomNavigationTab
private void setUpTab(BottomNavigationTab bottomNavigationTab, BottomNavigationItem currentItem, int itemWidth, int itemActiveWidth) {
//初始化顏色和寬度，positon
bottomNavigationTab.setInactiveWidth(itemWidth);
bottomNavigationTab.setActiveWidth(itemActiveWidth);
bottomNavigationTab.setPosition(mBottomNavigationItems.indexOf(currentItem));
bottomNavigationTab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
BottomNavigationTab bottomNavigationTabView = (BottomNavigationTab) v;
selectTabInternal(bottomNavigationTabView.getPosition(), false, true);
}
});
mBottomNavigationTabs.add(bottomNavigationTab);
BottomNavigationHelper.bindTabWithData(currentItem, bottomNavigationTab, this);
bottomNavigationTab.initialise(mBackgroundStyle == BACKGROUND_STYLE_STATIC);
//mTabContainer 是個 Linearlayout
mTabContainer.addView(bottomNavigationTab);
}
init() 初始化方法中創建的 mTabContainer，根據名字來看就是它就是itembar的根布局：
private void init() {getContext().getResources().getDimension(R.dimen.bottom_navigation_top_margin_correction), 0, 0);
{
LayoutInflater inflater = LayoutInflater.from(getContext());
View parentView = inflater.inflate(R.layout.bottom_navigation_bar_container, this, true);
mBackgroundOverlay = (FrameLayout) parentView.findViewById(R.id.bottom_navigation_bar_overLay);
mContainer = (FrameLayout) parentView.findViewById(R.id.bottom_navigation_bar_container);
setLayoutParams(new ViewGroup.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)));
//mTabContainer 是itembar的根布局
mTabContainer = (LinearLayout) parentView.findViewById(R.id.bottom_navigation_bar_item_container);
}
所以 FixedBottomNavigationTab 才是我們想要的那個控件
image.png
方法很少就簡單了，通過 init 方法就能找到每個控件的id
@Override
void init() {
paddingTopActive = (int) getResources().getDimension(R.dimen.fixed_height_top_padding_active);
paddingTopInActive = (int) getResources().getDimension(R.dimen.fixed_height_top_padding_inactive);
LayoutInflater inflater = LayoutInflater.from(getContext());
//這是父布局layout
View view = inflater.inflate(R.layout.fixed_bottom_navigation_item, this, true);
//這是根布局 ID
containerView = view.findViewById(R.id.fixed_bottom_navigation_container);
//通過根布局查找控件，依次是：標題、圖片、小紅點
labelView = (TextView) view.findViewById(R.id.fixed_bottom_navigation_title);
iconView = (ImageView) view.findViewById(R.id.fixed_bottom_navigation_icon);
badgeView = (TextView) view.findViewById(R.id.fixed_bottom_navigation_badge);
labelScale = getResources().getDimension(R.dimen.fixed_label_active) / getResources().getDimension(R.dimen.fixed_label_inactive);
super.init();
}
這個就是我們最終想要的控件通過它的ID 查找：
iconView = (ImageView) view.findViewById(R.id.fixed_bottom_navigation_icon);
返回我們的 MainActivity
//獲取 bar 的 所對應的子 view 控件，方便擴展動畫
LayoutInflater inflater = LayoutInflater.from(this);
//父布局就是我們的 mBottomNavigationBar
View parentView = inflater.inflate(com.ashokvarma.bottomnavigation.R.layout.bottom_navigation_bar_container, mBottomNavigationBar, true);
//mTabContainer 是放置itembar 的線性布局，item id 就是我們剛才找了半天找到的
LinearLayout mTabContainer = (LinearLayout) parentView.findViewById(com.ashokvarma.bottomnavigation.R.id.bottom_navigation_bar_item_container);
//mTabContainer 是個ViewGroup，通過getChildAt 就能獲取對應的子 view
mIconView = (ImageView)
//購物車item 的小紅點圖片
mTabContainer.getChildAt(2).findViewById(com.ashokvarma.bottomnavigation.R.id.fixed_bottom_navigation_icon);
//我的item 的小紅點圖片
mIconView2 = (ImageView) mTabContainer.getChildAt(3).findViewById(com.ashokvarma.bottomnavigation.R.id.fixed_bottom_navigation_icon);
最后加入動畫,一個平移，一個縮放，兩種寫法都可以
private void setBadgeNum(int num) {
...
Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_view_badge);
ObjectAnimator.ofFloat(mIconView, "translationX",2000,0).start();
mIconView2.startAnimation(animation);
}
}
GIF.gif
以上都是在當前 Activity 中刷新小紅點數據的-----------------------
Demo加入觀察者模式代碼，可以方便開發者在其他界面更新小紅點（比如 Fragment中）
GIF.gif
最新版本已經2.0了，但是本博客任然適用
2.X將 BadgeItem 重新做了
image.png
只需要更換一下 BadgeItem 即可
TextBadgeItem mBadgeItem = new TextBadgeItem()
官方鏈接：https://github.com/Ashok-Varma/BottomNavigation
DEMO GitHub 鏈接
轉載請標明出處：http://www.lxweimin.com/p/9be7ac6d8486
