自定义视图 onDraw 被多次调用-解网

问：

我正在创建一个自定义 TextView，我想在其中有一个圆形背景，在中间我想有一个文本的首字母。代码如下

class CircleTextView(context: Context, attrs: AttributeSet) : AppCompatTextView(context, attrs) {

    private lateinit var circlePaint: Paint
    private lateinit var strokePaint: Paint

    private fun initViews(context: Context, attrs: AttributeSet) {
        circlePaint = Paint()
        strokePaint = Paint()
        circlePaint.apply {
            color = Color.parseColor("#041421")
            style = Paint.Style.FILL
            flags = Paint.ANTI_ALIAS_FLAG
            isDither = true
        }

        strokePaint.apply {
            color = Color.parseColor("#fe440b")
            style = Paint.Style.FILL
            flags = Paint.ANTI_ALIAS_FLAG
            isDither = true
        }
    }

    override fun draw(canvas: Canvas) {
        val diameter: Int
        val h: Int = this.height
        val w: Int = this.width
        diameter = h.coerceAtLeast(w)
        val radius: Int = diameter / 2

        canvas.drawCircle(
            radius.toFloat(), radius.toFloat(), radius.toFloat(), strokePaint
        )
        canvas.drawCircle(
            radius.toFloat(), radius.toFloat(), (radius - 10).toFloat(), circlePaint
        )
        super.draw(canvas)
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val dimension = widthMeasureSpec.coerceAtLeast(heightMeasureSpec)
        super.onMeasure(dimension, dimension)
    }

    init {
        initViews(context, attrs)
        setWillNotDraw(false)
    }
}

在我的活动 xml 中

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <com.example.ui.views.CircleTextView
        android:id="@+id/circleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/colorWhite"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /> />

</androidx.constraintlayout.widget.ConstraintLayout>

并在 Kotlin 文件中

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)

        circleText.apply {
            text = "II"
            setPadding(50, 50, 50, 50)
        }
    }

我在这里的问题是视图似乎在它的右侧被裁剪了，而且带有字母的文本也不在视图的中心。

我该如何解决这个问题？

安卓 android-canvas android- 自定义视图 ondraw

override fun draw(canvas: Canvas) {
    val h: Int = this.height
    val w: Int = this.width
    diameter = Math.max(h, w)
    val radius: Int = diameter / 2

    canvas.drawCircle(
            (diameter / 2).toFloat(), (diameter / 2).toFloat(), radius.toFloat(), strokePaint
    )

    canvas.drawCircle(
            (diameter / 2).toFloat(), (diameter / 2).toFloat(), (radius - 5).toFloat(), circlePaint
    )

    super.draw(canvas)
}

由于您中剩下的只是在背景中绘制 2 个圆圈的调用，因此您实际上可以将其完全替换为自定义背景可绘制对象，如下所示：onDraw(Canvas)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#041421"/>
    <stroke
        android:width="2dp"
        android:color="#FFFFFF"/>
</shape>

这意味着您可以完全删除该自定义实现onDraw(Canvas)

编辑以回答问题第 2 部分：

我最初的建议是在不考虑填充的情况下使用填充，这对我来说是不完整的，并且肯定会产生您所看到的效果。onMeasure

传递到的单位也不是真正的宽度/高度单位，而是可以通过类访问的多个组件（大小和模式）。这篇文章更详细地介绍了这一切是如何工作的。这很重要，因为这是您的视图没有真正显示为完美正方形的原因，也是文本不在您正在绘制的圆内居中的原因。onMeasure(int, int)MeasureSpec

然后，根据屏幕截图，这会导致等于，大于，这就是为什么您的圆超出了水平面上的边界，而不是垂直面上的边界。diameter = h.coerceAtLeast(w)hw

另请注意，您也可以使用 -related 属性直接在 XML 布局中应用填充android:padding

自定义视图 onDraw 被多次调用

Custom View onDraw is called multiple times

评论

评论