中间凹陷的BottomNavigationView(仿百度地图)
##GapBottomNavigtionView
百度的:
我的:
###使用方式
在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(画笔) 随意更改为你想要的形状
我的效果就是这样咯
喜欢不要忘了点赞关注或者去github点个星星哦~~
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!