时间戳

首页 > 解决方案 > 如何在 Android Canvas 中绘制带有文本的矩形按钮？

android - 如何在 Android Canvas 中绘制带有文本的矩形按钮？

问题描述

在 Android 应用程序中，我想在画布中绘制一个按钮，如下图所示

露营地按钮

我尝试了一些堆栈溢出的答案，但无法获得确切的输出，尤其是下面的光影。我最糟糕的代码如下

        val corners = floatArrayOf(
                80f, 80f,   // Top left radius in px
                80f, 80f,   // Top right radius in px
                0f, 0f,     // Bottom right radius in px
                0f, 0f      // Bottom left radius in px
        )

        val path = Path()
        val rect = RectF(550f, 500f, 100f, 300f)

        paint.style = Paint.Style.FILL;
        paint.color = Color.WHITE;
        path.addRoundRect(rect, corners, Path.Direction.CW)
        canvas?.drawPath(path, paint)

        paint.style = Paint.Style.STROKE;
        paint.color = Color.BLACK;
        path.addRoundRect(rect, corners, Path.Direction.CW)
        canvas?.drawPath(path, paint)

        paint.setColor(Color.RED)
        paint.setStyle(Paint.Style.FILL)
        val paint2 = Paint()
        paint2.setColor(Color.GREEN)
        paint2.setTextSize(50f) //set text size

        val w: Float = paint2.measureText("VIEW CAMPSITE MAP") / 2
        val textSize: Float = paint2.textSize
        canvas?.drawText("VIEW CAMPSITE MAP", 300f, 300f ,paint2);

我也无法将文本设置在正确的位置

我还需要一个渐变来显示膨胀状态，就像一个真正的材质按钮

并且还需要画布/绘画中的点击监听器

我需要它在纯画布中，而不是在任何视图中绘画

请帮我

标签： androidandroid-layoutkotlinandroid-viewandroid-canvas

解决方案

这是其中一种方法。不要忘记在自定义属性中移动所有变量，如文本、文本大小等。我也没有明白“画布中的点击监听器”是什么意思

在此处输入图像描述

class CustomView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
      ) : View(context, attrs, defStyleAttr) {

//constants. move them all to custom attributes
private val boxRadius = convertDpToPixel(10f)
private val boxColor = Color.parseColor("#52618e")
private val boxBackgroundColor = Color.WHITE
private val boxShadowSize = convertDpToPixel(2f)
private val boxStrokeWidth = convertDpToPixel(1f)
private val textColor = Color.parseColor("#21a207")
private val fontSize = convertDpToPixel(30f)
private val text = "View Campsite Plan"

private lateinit var boxShadow: RectF
private lateinit var boxBackground: RectF
private lateinit var boxShadowPaint: Paint
private lateinit var boxBackgroundPaint: Paint
private var textWidth = 0f
private var textSmallGlyphHeight = 0f
private lateinit var textPaint: Paint

  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    boxShadow = RectF(0f, 0f, w.toFloat(), h.toFloat())
    boxBackground = RectF(boxStrokeWidth, boxStrokeWidth,
        w.toFloat()-boxStrokeWidth, h.toFloat()-boxStrokeWidth-boxShadowSize)
    boxShadowPaint = Paint().apply { color = boxColor }
    boxBackgroundPaint = Paint().apply { color = boxBackgroundColor }
    textPaint = Paint().apply {
        color = textColor
        textSize = fontSize
        typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
        textWidth = measureText(text)
        textSmallGlyphHeight = fontMetrics.run { ascent + descent }
    }
  }

  override fun onDraw(canvas: Canvas?) {
    canvas?.drawRoundRect(boxShadow, boxRadius, boxRadius, boxShadowPaint)
    canvas?.drawRoundRect(boxBackground, boxRadius, boxRadius, boxBackgroundPaint)
    val textStartPadding = (width - textWidth)/2f
    val textTopPadding = (height - textSmallGlyphHeight)/2f
    canvas?.drawText(text, textStartPadding, textTopPadding, textPaint)
  }

  private fun convertDpToPixel(dp: Float) =
    dp*(resources.displayMetrics.densityDpi/DisplayMetrics.DENSITY_DEFAULT)
}

推荐阅读