Demo地址:https://github.com/Pedestrian0209/NavigationBar
该导航栏结合fragment实现,代码结构简单,每个item通过自定义view的方式绘制出来,只需设置一些简单的参数,即可达到想要的效果,支持文字提示、圆点提示等功能,效果如下图:
代码结构:
BottomNavigationItemView
该类为底部导航栏的item,所包含的元素为:图片、标题、圆点提示或者文字提示等,每个元素均是通过canvas绘制出来,所以该类等主要代码即为onDraw的实现:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (paint == null) {
paint = new Paint();
}
paint.setAntiAlias(true);
//绘制图片
int iconWidth = isActive ? (activeIcon == null ? 0 : activeIcon.getIntrinsicWidth())
: (inActiveIcon == null ? 0 : inActiveIcon.getIntrinsicWidth());
int iconHeight = isActive ? (activeIcon == null ? 0 : activeIcon.getIntrinsicHeight())
: (inActiveIcon == null ? 0 : inActiveIcon.getIntrinsicHeight());
Drawable icon = isActive ? (activeIcon == null ? null : activeIcon)
: (inActiveIcon == null ? null : inActiveIcon);
if (icon != null) {
icon.setBounds((getWidth() - iconWidth) / 2, activeItemPaddingTop,
(getWidth() + iconWidth) / 2, activeItemPaddingTop + iconHeight);
icon.draw(canvas);
}
//绘制标题
if (!TextUtils.isEmpty(title)) {
paint.setTextSize(isActive ? activeTextSize : inActiveTextSize);
paint.setColor(isActive ? activeTextColor : inActiveTextColor);
//测量标题的宽度
int titleWidth = (int) paint.measureText(title);
Paint.FontMetrics metrics = paint.getFontMetrics();
canvas.drawText(title, (getWidth() - titleWidth) / 2,
getHeight() - (isActive ? activeItemPaddingBottom : inActiveItemPaddingBottom) - metrics.bottom, paint);
}
//绘制圆点提示
if (showTipDot) {
paint.setColor(tipBgColor);
canvas.drawCircle((getWidth() + iconWidth) / 2 - tipMarginLeft + tipDotRadius,
(isActive ? activeItemPaddi