中间凹陷的BottomNavigationView（仿百度地图）

GapBottomNavigtionView

百度的：

71529789c6c948803e1075c2c7e00809.jpg

我的：

e9347423eb2031228af77ad63d7b01d7.jpg

项目地址：https://github.com/ZYF99/UIKit/tree/1.3

使用方式

在app的build.gradle中

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

    dependencies {
            implementation 'com.github.ZYF99:UIKit:1.3'
    }

在布局文件中直接使用

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:backgroundTint="#ffffff"
        android:elevation="6dp"
        android:src="@android:drawable/ic_input_add"
        android:tint="#000000"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="@+id/bottomnavigation"
        app:layout_constraintEnd_toEndOf="@+id/bottomnavigation"
        app:layout_constraintStart_toStartOf="@+id/bottomnavigation"
        app:rippleColor="#00FFFFFF"/>

    <com.zhangyf.gapbottomnavigationview.GapBottomNavigationView
        android:id="@+id/bottomnavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="#ffffff"
        android:clickable="false"
        android:padding="8dp"
        app:center_radius="32dp"
        app:corner_radius="12dp"
        app:elevation="5dp"
        app:itemBackground="@null"
        app:itemIconTint="#000000"
        app:itemTextColor="#000000"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation"
        app:shadow_length="4dp"
        tools:targetApi="lollipop" />

app:center_radius：用来指定凹陷的半径
shadow_length：用来指定高度（阴影大小）
cornerRadius：用来指定拐角处的平滑半径大小

源码

attrs中的3个属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <declare-styleable name="GapBottomNavigationView">
            <attr name="shadow_length" format="dimension" />
            <attr name="corner_radius" format="dimension" />
            <attr name="center_radius" format="dimension" />
        </declare-styleable>
</resources>

导入源码（请直接copy）

源码采用Kotlin，有需要可以直接转为Java，转换方法自行百度

package com.zhangyf.gapbottomnavigationview

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.*
import android.graphics.drawable.GradientDrawable
import android.os.Build
import android.util.AttributeSet
import android.util.Log
import androidx.annotation.*
import com.google.android.material.bottomnavigation.BottomNavigationView

class GapBottomNavigationView : BottomNavigationView {

    private var fabId = 0 //凹陷View的id
    private var centerRadius: Float = 0.toFloat() //中间凹陷的半径
    private var cornerRadius = 12f //拐角处的圆滑大小（越大越平滑）
    private var shadowLength = 6f //阴影大小

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        background = GradientDrawable().apply { setColor(Color.TRANSPARENT) }
        val ta = context.obtainStyledAttributes(attrs, R.styleable.GapBottomNavigationView)
        centerRadius = ta.getDimension(R.styleable.GapBottomNavigationView_center_radius, 0.toFloat())
        shadowLength = ta.getDimension(R.styleable.GapBottomNavigationView_shadow_length, 6.toFloat())
        cornerRadius = ta.getDimension(R.styleable.GapBottomNavigationView_corner_radius, 12.toFloat())
        ta.recycle()
    }

    @SuppressLint("DrawAllocation")
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val paint = Paint()
        val path = Path()

        //左边的半圆
        val rectL = RectF(
            shadowLength,
            shadowLength,
            height.toFloat() + shadowLength,
            height.toFloat() - shadowLength
        )
        path.arcTo(rectL, 90.toFloat(), 180.toFloat(), false)

        path.lineTo(width / 2 - centerRadius - cornerRadius, shadowLength)

        //左边转角处
        path.quadTo(
            width / 2 - centerRadius,
            shadowLength,
            width / 2 - centerRadius,
            cornerRadius + shadowLength
        )

        //中间凹陷的半圆
        val rectCenter = RectF(
            width / 2 - centerRadius,
            cornerRadius + shadowLength - centerRadius,
            width / 2 + centerRadius,
            cornerRadius + centerRadius + shadowLength
        )

        path.arcTo(rectCenter, 180.toFloat(), (-180).toFloat(), false)


        //利用贝塞尔曲线画中间凹陷（非半圆）
/*      path.quadTo(
            width.toFloat() / 2,
            centerRadius.toFloat(),
            width / 2 + centerRadius - cornerRadius - cornerRadius / sqrt(2.toFloat()),
            cornerRadius / sqrt(2.toFloat())
        )*/

        //右边转角处
        path.quadTo(
            width / 2 + centerRadius,
            shadowLength,
            width / 2 + centerRadius + cornerRadius,
            shadowLength
        )
        path.lineTo((width - shadowLength - height / 2), shadowLength)


        //右边的半圆
        val rectR = RectF(
            width.toFloat() - shadowLength - height,
            shadowLength,
            width.toFloat() - shadowLength,
            height.toFloat() - shadowLength
        )
        path.arcTo(rectR, 270.toFloat(), 180.toFloat(), false)

        //最后的直线
        path.moveTo((width - shadowLength - height / 2), height.toFloat() - shadowLength)
        path.lineTo(height / 2.toFloat() + shadowLength, height.toFloat() - shadowLength)
        path.close()
        Log.d("!!!", "!!!!!!!!!!!!")

        //按背景色填充背景
        paint.apply {
            style = Paint.Style.FILL
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                color = backgroundTintList?.defaultColor ?: Color.BLACK
            }
            maskFilter = null
            isAntiAlias = true
            //添加阴影
            setShadowLayer(shadowLength, 0.toFloat(), 0.toFloat(), Color.LTGRAY)
        }
        canvas.drawPath(path, paint)
    }
}

建议：结合我的代码并利用 paint（画笔）随意更改为你想要的形状

我的效果就是这样咯

093143d5ebb666338bc164a6bd339da5.jpg

喜欢不要忘了点赞关注或者去github点个星星哦～～