中间凹陷的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" />

anchor_fab: 用来指定凹陷下去的 View ,一般都为 FloatingActionButton
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点个星星哦~~


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!