Android Studio 自定义底部导航栏（TabBar），使用Constraint LayOut来DIY导航栏，模仿微信导航栏

遇到的问题

最近在做一个模仿微信的项目，当开发到主界面的时候，我一开始偷懒用了Google自带的BottomNavigationView，然而我是使用这个创建Activity，它还自动创建了三个Menu Item，光改名就够我头疼了，而且还出一堆感叹号，改了一个小时最后改完之后，勉强能用了。

但是在后面开发中，因为需求想做一个红点提示，像这样

在做的时候，我天真地在BottomNavigationView上直接加上ConstraintLayout，居然可行

然而，然而，然而，在运行的时候居然报错了：
java.lang.ClassCastException: androidx.constraintlayout.widget.ConstraintLayout cannot be cast to com.google.android.material.bottomnavigation.BottomNavigationView

顿时整个人陷入了沉思，有没有办法可以直接实现在BottomNavigationView上实现红点提示？
利用带红点的Icon图片代替原来的Icon？
不，这样至少得做100*2+1张图片（红点里包含数字）
既然没办法只能自定义底部导航栏了
不说了，开做！

设计步骤

我先拖动一个ConstraintLayout在最下面，然后把原来的BottomNavigationView拉上去做参考

然后设置好辅助线

水平辅助线在60%位置，垂直分别为13%，38%，63%，88%

然后拖图片Image View上去，记住！不要拖ImageButton！（后面你就懂了）

这里我让左右都连到垂直辅助线上，上方连Parent，下方连水平辅助线，然后Height设置为填充（0dp）,宽度设置为Wrap_content，图片记得取名，因为同一个图标要准备两张图片替换（home.jpg和home_active.jpg) ，这里说一个我遇到的坑，资源名只能用下划线 _ 不能用 - 减号，否则找不到资源会报错。

头像有点大，我们设置一下 Top_margin

设置好后，在把文字加上，左右贴着辅助线，上面紧贴水平辅助线

下面是做小红点了
拖个TextView，背景设成红的

但是问题出现了，无法做成圆角，因为不像web端有border属性，怎么办呢
那就自己画吧，新建一个Drawable文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- rectangle表示为矩形 -->

    <!-- 填充的颜色 -->
    <solid android:color="@android:color/holo_red_dark" />

    <!-- 边框的颜色和粗细 -->
    <stroke
        android:width="1dp"
        android:color="@android:color/holo_red_dark"
        />

    <!-- android:radius 圆角的半径 -->
    <corners
        android:radius="10dp"
        />

</shape>

然后把文字背景改成

然后把文字颜色改成白色，把Text 改成1试试

欸，不对，那么再加上左右padding试试，下面也加2dp更好看

成果

完成，不过，发现的小红点不一样，是怎么做的呢，首先这是个text为空的TextView，

这样设置padding就实现了，记得把textSize设为8

最后调整一下坐标，我把原来的参考删掉后是这样

————作者：邓洲————————
然后最后最最重要的一步！！！

拖四个按钮在Conlayout中，盖在原来的item上

认真设置一下位置，保证1:1:1:1全覆盖，最后把背景设为透明

完成，记得把字删掉

平板也能适配！

———————————————————————————————————
原创：邓洲
日期：2020-12-17