java - 在Android中未绘制自定义 View

Question

我正在为我的android应用程序实现自定义按钮，该按钮必须只有一个不填充的圆圈。我在Android开发方面相对较新，因此遇到了麻烦。

有自定义属性:

<resources>
<declare-styleable name="CircleButton">
    <attr name="stroke_width" format="dimension"/>
</declare-styleable>

类(class)代码:

class CircleButton (context: Context,
                attrs: AttributeSet) : View(context, attrs) {

val paint: Paint = Paint()

init {
    var a = context.theme.obtainStyledAttributes(attrs, R.styleable.CircleButton, 0, 0)
    paint.color = Color.RED
    try {
        paint.strokeWidth = a.getDimension(R.styleable.CircleButton_stroke_width, 3f)
    } finally {
        a.recycle()
    }
}

var centerX = x + width / 2
var centerY = y + height / 2
var radius = width / 2


override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)
   canvas.drawCircle(centerX.toFloat(), centerY.toFloat(), radius.toFloat(), paint)
}

override fun onMeasure(w : Int, h : Int) {
    setMeasuredDimension(w, w)
}

是 Kotlin ，但我想这很清楚。但是无论如何，如果需要，我可以提供Java代码。

有布局XML:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    android:paddingBottom="@dimen/activity_vertical_margin">

<com.prox1mity.myapplication.CircleButton
    android:layout_width="250dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    custom:stroke_width="3dp"
/>

运行应用程序时，我只会看到白屏，这意味着onDraw方法无法正常工作。但是，如果我将圆形的绘图更改为仅通过canvas.drawColor()用颜色填充 Canvas ，那么就可以了，该 View 已完全填充。这使我认为Paint类有问题或对坐标系统的理解有误。如何正确绘制以 View 中心为中心的圆？

Answer 1

var centerX = x + width / 2
var centerY = y + height / 2
var radius = width / 2

该代码将在实例初始化时进行评估。此时，width = 0且height =0。因为该 View 尚未测量。

您可以在Log.d(...)中添加onDraw或断点，您会看到radius = 0。

为了进行快速测试，您可以将onDraw更改为:

override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)

   val centerX = width / 2
   val centerY = height / 2
   val radius = width / 2
   canvas.drawCircle(centerX.toFloat(), centerY.toFloat(), radius.toFloat(), paint)
}

也许您可以优化此代码。用onDraw进行分配不是一个好主意。您可以找到说明here。