一个好用的底部导航栏(BottomNavigationBar)

Demo地址:https://github.com/Pedestrian0209/NavigationBar

该导航栏结合fragment实现,代码结构简单,每个item通过自定义view的方式绘制出来,只需设置一些简单的参数,即可达到想要的效果,支持文字提示、圆点提示等功能,效果如下图:
image.png

代码结构:

image.png

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值