BottomNavigation
。private const val CURVE_CIRCLE_RADIUS = 96
// the coordinates of the first curve
private val mFirstCurveStartPoint = PointF()
private val mFirstCurveControlPoint1 = PointF()
private val mFirstCurveControlPoint2 = PointF()
private val mFirstCurveEndPoint = PointF()
private val mSecondCurveControlPoint1 = PointF()
private val mSecondCurveControlPoint2 = PointF()
private var mSecondCurveStartPoint = PointF()
private var mSecondCurveEndPoint = PointF()
class BottomNavCurve : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
return Outline.Generic(path = Path().apply {
val curveDepth = CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4F)
// the coordinates (x,y) of the start point before curve
mFirstCurveStartPoint.set(
(size.width / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3),
curveDepth
)
// the coordinates (x,y) of the end point after curve
mFirstCurveEndPoint.set(
size.width / 2,
0F
)
// same thing for the second curve
mSecondCurveStartPoint = mFirstCurveEndPoint;
mSecondCurveEndPoint.set(
(size.width / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3),
curveDepth
)
// the coordinates (x,y) of the 1st control point on a cubic curve
mFirstCurveControlPoint1.set(
mFirstCurveStartPoint.x + curveDepth,
mFirstCurveStartPoint.y
)
// the coordinates (x,y) of the 2nd control point on a cubic curve
mFirstCurveControlPoint2.set(
mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS,
mFirstCurveEndPoint.y
)
mSecondCurveControlPoint1.set(
mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS,
mSecondCurveStartPoint.y
)
mSecondCurveControlPoint2.set(
mSecondCurveEndPoint.x - (curveDepth),
mSecondCurveEndPoint.y
)
moveTo(0f, curveDepth)
lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y)
cubicTo(
mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
mFirstCurveEndPoint.x, mFirstCurveEndPoint.y
)
cubicTo(
mSecondCurveControlPoint1.x, mSecondCurveControlPoint1.y,
mSecondCurveControlPoint2.x, mSecondCurveControlPoint2.y,
mSecondCurveEndPoint.x, mSecondCurveEndPoint.y
)
lineTo(size.width, curveDepth)
lineTo(size.width, size.height)
lineTo(0F, size.height)
})
}
}
这是如何使用它的示例:
BottomAppBar(
modifier = Modifier
.fillMaxWidth(1F)
.height(118.dp),
backgroundColor = MyTheme.colors.transparent,
elevation = 0.dp
) {
BottomNavigation(
modifier = Modifier
.fillMaxSize(1F)
.clip(BottomNavCurve())
) {}
}