我想创建一个带有圆形框架的自定义浮动动作按钮。像下面的图片
我最终为此做了一个自定义视图。但这真是小故障。
这是onDraw
功能
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val cx = (width / 2).toFloat()
val cy = (height / 2).toFloat()
val hShift = outerRadius * .4
val vShift = outerRadius * .05
circle.set(
(cx - outerRadius - hShift).toFloat(), (cy - 3 * outerRadius + vShift).toFloat(),
(cx + outerRadius- hShift).toFloat(), (cy - outerRadius+vShift).toFloat()
)
path.arcTo(circle, 0F, 85F)
path.lineTo(cx,cy-outerRadius)
circle.set(cx - outerRadius, cy - outerRadius, cx + outerRadius, cy + outerRadius)
path.arcTo(circle, 90F, 180F)
path.lineTo(cx,cy-outerRadius)
path.lineTo(cx, cy+outerRadius)
circle.set(
(cx - outerRadius- hShift).toFloat(), (cy + outerRadius - vShift).toFloat(),
(cx + outerRadius- hShift).toFloat(), (cy + 3 * outerRadius - vShift).toFloat()
)
path.arcTo(circle, 275F, 90F)
canvas.drawPath(path, paint)
}
我的问题:这是正确的方法吗?我正在考虑将矢量可绘制为背景
PS:我也尝试过,BottomNavigationView
但它是设计的最底层
避免在onDraw()方法中进行计算,因为每次都会调用它,这不利于应用程序的性能
可绘制的背景是最简单的方法,但过去我发现我无法像我所希望的那样使它正常工作。您可能需要同一图像的多个变体才能覆盖多个屏幕尺寸。
一种选择是使用XML形状设计定制fab。虽然这不是我的专业领域,但我有一些资源会有所帮助。
Stackoverflow-使用Vector Drawable的更复杂XML形状的示例
还有另一个选项,在性能上比您当前的实现要好得多。如果您可以在链接中重新实现该解决方案,则这可能会最好。
该链接是关于使用CubicBézier曲线在底部栏上构建形状,您似乎可以在任何视图类型上使用此形状,而不仅限于所示的底部栏。我将发布此链接使用的相对代码,以了解不同之处。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//point calculation
mPath.reset();
mPath.moveTo(0, 0);
mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);
mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);
mPath.cubicTo(mSecondCurveControlPoint1.x, mSecondCurveControlPoint1.y,
mSecondCurveControlPoint2.x, mSecondCurveControlPoint2.y,
mSecondCurveEndPoint.x, mSecondCurveEndPoint.y);
mPath.lineTo(mNavigationBarWidth, 0);
mPath.lineTo(mNavigationBarWidth, mNavigationBarHeight);
mPath.lineTo(0, mNavigationBarHeight);
mPath.close();
}
您的OnDraw最终看起来像什么-
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句