释放双眼，带上耳机，听听看~！

百度的：

71529789c6c948803e1075c2c7e00809.jpg

我的：

e9347423eb2031228af77ad63d7b01d7.jpg

使用

首先需要在attrs中申明两个属性

anchor_fab： 用来指定凹陷下去的 View ，一般都为 FloatingActionButton

shadow_length：用来指定高度(阴影大小)

cornerRadius：用来指定拐角处的平滑半径大小

导入源码(请直接copy)

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

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.view.View

import android.view.ViewGroup

import androidx.annotation.*

import com.example.rubbishcommunity.R

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)

fabId = ta.getResourceId(R.styleable.GapBottomNavigationView_anchor_fab, 0)

shadowLength = ta.getFloat(R.styleable.GapBottomNavigationView_shadow_length, 6.toFloat())

cornerRadius = ta.getFloat(R.styleable.GapBottomNavigationView_corner_radius, 12.toFloat())

ta.recycle()

}

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec)

//测量时才能拿到凹陷的View

val fab = (parent as ViewGroup).findViewById(fabId)

centerRadius = fab.width / 2.toFloat() + cornerRadius

invalidate()

}

@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()

//关闭硬件加速才能有阴影效果

setLayerType(LAYER_TYPE_SOFTWARE, paint)

//按背景色填充背景

paint.apply {

style = Paint.Style.FILL

color = backgroundTintList?.defaultColor ?: Color.BLACK

maskFilter = null

isAntiAlias = true

//添加阴影

setShadowLayer(shadowLength, 0.toFloat(), 0.toFloat(), Color.LTGRAY)

}

canvas.drawPath(path, paint)

}

}

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

在 MainActivity 中使用

Menu :

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/navigation_home"

android:icon="@drawable/nav_selector_home"

android:title="首页"

app:showAsAction="always" />

android:id="@+id/navigation_find"

android:icon="@drawable/nav_selector_find"

android:title="发现"

app:showAsAction="always" />

android:id="@+id/navigation_null"

android:enabled="false"

android:checked="false"

android:checkable="false"

android:icon="@null"

android:title="@null" />

android:id="@+id/navigation_message"

android:icon="@drawable/nav_selector_message"

android:title="消息"

app:showAsAction="always" />

android:id="@+id/navigation_mine"

android:icon="@drawable/nav_selector_mine"

android:title="我的"

app:showAsAction="always" />

XML :

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/btn_send_mqtt_smg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="16dp"

android:clickable="true"

android:tint="@color/white"

app:layout_constraintBottom_toBottomOf="@+id/maincontainer"

app:layout_constraintEnd_toEndOf="@+id/maincontainer"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/icon_email" />

android:id="@+id/maincontainer"

android:layout_width="match_parent"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="1.0">

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:padding="8dp"

android:backgroundTint="@color/white"

app:labelVisibilityMode="labeled"

app:cornerRadius="12dp"

app:anchor_fab="@id/fab_add"

app:shadow_length="12"

app:elevation="5dp"

app:itemBackground="@null"

app:itemIconTint="@color/black"

app:itemTextColor="@color/black"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:menu="@menu/navigation"

tools:targetApi="lollipop" />

android:id="@+id/fab_add"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="36dp"

android:backgroundTint="@color/colorWhite"

android:elevation="2dp"

android:src="https://www.jianshu.com/p/8cd6add34f19/@android:drawable/ic_input_add"

android:tint="@color/black"

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="@color/colorAccent" />

我的效果就是这样咯

093143d5ebb666338bc164a6bd339da5.jpg

喜欢不要忘了点赞关注～～