示例代码上传在我的repo Widget中，并长期更新一些有意思的小组件或者功能。
Android底部导航栏的实现方式特别多，例如TabHost，TabLayout，或者TextView等，都可以实现底部导航栏的效果，Google添加到Material design中的底部导航栏BottomNavigationBar也是一种实现方式。demo传送门
在MainActivity中添加了Material design风格的底部导航栏：BottomNavigation
但是在引入过程中发现，单个tab点击的时候都有放大效果，这不符合我的设计风格，作者并没有添加控制点击动画的API，于是自己动手，下载源码开始修改。
- 首先我们在BottomNavigationBar类中发现初始化过程：
public void initialise() {
mSelectedPosition = DEFAULT_SELECTED_POSITION;
mBottomNavigationTabs.clear();
if (!mBottomNavigationItems.isEmpty()) {
mTabContainer.removeAllViews();
if (mMode == MODE_DEFAULT) {
if (mBottomNavigationItems.size() <= MIN_SIZE) {
mMode = MODE_FIXED;
} else {
mMode = MODE_SHIFTING;
}
}
if (mBackgroundStyle == BACKGROUND_STYLE_DEFAULT) {
if (mMode == MODE_FIXED) {
mBackgroundStyle = BACKGROUND_STYLE_STATIC;
} else {
mBackgroundStyle = BACKGROUND_STYLE_RIPPLE;
}
}
if (mBackgroundStyle == BACKGROUND_STYLE_STATIC) {
mBackgroundOverlay.setVisibility(View.GONE);
mContainer.setBackgroundColor(mBackgroundColor);
}
int screenWidth = Utils.getScreenWidth(getContext());
if (mMode == MODE_FIXED) {
int[] widths = BottomNavigationHelper.getMeasurementsForFixedMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable);
int itemWidth = widths[0];
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth);
}
} else if (mMode == MODE_SHIFTING) {
int[] widths = BottomNavigationHelper.getMeasurementsForShiftingMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable);
int itemWidth = widths[0];
int itemActiveWidth = widths[1];
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
ShiftingBottomNavigationTab bottomNavigationTab = new ShiftingBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemActiveWidth);
}
}
if (mBottomNavigationTabs.size() > mFirstSelectedPosition) {
selectTabInternal(mFirstSelectedPosition, true, false, false);
} else if (!mBottomNavigationTabs.isEmpty()) {
selectTabInternal(0, true, false, false);
}
}
}
mMode代表不同的点击效果，一般底部导航栏不超过3个时，都是MODE_FIXED模式，超过则为MODE_SHIFTING模式。我们希望修改MODE_FIXED模式下的点击动画，于是找到：
if (mMode == MODE_FIXED) {
int[] widths = BottomNavigationHelper.getMeasurementsForFixedMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable);
int itemWidth = widths[0];
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth);
}
}
跟进setUpTab这个方法：
/**
* Internal method to setup tabs
*
* @param bottomNavigationTab Tab item
* @param currentItem data structure for tab item
* @param itemWidth tab item in-active width
* @param itemActiveWidth tab item active width
*/
private void setUpTab(BottomNavigationTab bottomNavigationTab, BottomNavigationItem currentItem, int itemWidth, int itemActiveWidth) {
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, false);
}
});
mBottomNavigationTabs.add(bottomNavigationTab);
BottomNavigationHelper.bindTabWithData(currentItem, bottomNavigationTab, this);
bottomNavigationTab.initialise(mBackgroundStyle == BACKGROUND_STYLE_STATIC);
mTabContainer.addView(bottomNavigationTab);
}
发现底部图标和文字由bottomNavigationTab控制，跟进bottomNavigationTab发现可以设置item选中和非选中的状态，这正是我想要修改的：
public void select(boolean setActiveColor, int animationDuration) {
isActive = true;
ValueAnimator animator = ValueAnimator.ofInt(containerView.getPaddingTop(), paddingTopActive);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
containerView.setPadding(containerView.getPaddingLeft(),
(Integer) valueAnimator.getAnimatedValue(),
containerView.getPaddingRight(),
containerView.getPaddingBottom());
}
});
animator.setDuration(animationDuration);
animator.start();
iconView.setSelected(true);
if (setActiveColor) {
labelView.setTextColor(mActiveColor);
} else {
labelView.setTextColor(mBackgroundColor);
}
if (badgeItem != null) {
badgeItem.select();
}
}
也就是说我们给这个属性动画加上一个控制就可以了，那应该在BottomNavigationBar设置的时候传入进来，于是我在BottomNavigationBar加入了mIconAnimation变量。
private void setUpTab(BottomNavigationTab bottomNavigationTab, BottomNavigationItem currentItem, int itemWidth, int itemActiveWidth) {
bottomNavigationTab.setInactiveWidth(itemWidth);
bottomNavigationTab.setActiveWidth(itemActiveWidth);
bottomNavigationTab.setPosition(mBottomNavigationItems.indexOf(currentItem));
/** modified here **/
if (mMode != MODE_SHIFTING)
bottomNavigationTab.setIconAnimation(mIconAnimation);//1111
bottomNavigationTab.setTextSize(mLabelTextSize);//1111
bottomNavigationTab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
BottomNavigationTab bottomNavigationTabView = (BottomNavigationTab) v;
selectTabInternal(bottomNavigationTabView.getPosition(), false, true, false);
}
});
mBottomNavigationTabs.add(bottomNavigationTab);
BottomNavigationHelper.bindTabWithData(currentItem, bottomNavigationTab, this);
bottomNavigationTab.initialise(mBackgroundStyle == BACKGROUND_STYLE_STATIC);
mTabContainer.addView(bottomNavigationTab);
}
BottomNavigationTab中在动画部分添加一个判断控制即可。
ps:我觉得我要多敲点字……不能这么懒
网友评论