具有边框自定义视图或可绘制矢量的Android按钮覆盖

阿卜杜勒·艾洛夫(AbdElraouf Sabri)

我想创建一个带有圆形框架的自定义浮动动作按钮。像下面的图片

在此处输入图片说明

我最终为此做了一个自定义视图。但这真是小故障。

这是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。虽然这不是我的专业领域,但我有一些资源会有所帮助。

XML形状构建的深入介绍

Stackoverflow-在XML中彼此叠加堆叠多个形状

构建自定义浮动操作按钮-XML(2017)

Stackoverflow-使用Vector Drawable的更复杂XML形状的示例

还有另一个选项,在性能上比您当前的实现要好得多。如果您可以在链接中重新实现该解决方案,则这可能会最好。

先进的Android Shape Canvas

该链接是关于使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章