文本对齐居中时无法在芯片上绘图

Question

我正在扩展 Chip 类来为我的lib执行一些绘图，我的用例更复杂，但为了简单起见，假设我只是画一条对角线

我的代码

class MyChip (context: Context,attributeSet: AttributeSet) : Chip(context,attributeSet){

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    //just want to draw a diagonal line
    canvas.drawLine(0f,0f,width/1f,height/1f,paint)
  }
 }

xml

<com.abhinav.chouhan.loaderchipdemo.MyChip
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:textAlignment="center"
    android:text="SOME TEXT"/>

当我没有属性时，android:textAlignment="center"一切正常，但是有了该属性，我们无法在芯片上绘制任何内容。我尝试了所有方法，但无法弄清楚为什么会发生这种情况。

请帮忙

Answer 1

Chip小部件严格遵守 Material Design 指南，并且 (IMO) 不适合更改。我建议您查看其他小部件 - 也许是MaterialButton，看看其他小部件是否可以满足您的需求。

您引用的属性textAlignment在TextView中可用， TextView 是Chip所基于的类。Chips期望wrap_content并期望文本与开头对齐。在混合的某个地方，你的过度绘制会丢失。我怀疑类似的东西是否已经过测试，因为它不符合材料指南。

但是，如果您必须使用Chip，可以通过以下方法使用自定义视图来实现此目的：

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

    private val mLinePaint = Paint().apply {
        color = Color.BLUE
        strokeWidth = 10f
    }

    init {
        doOnNextLayout {
            // Turn off center alignment if specified. We will handle centering ourselves.
            if (isTextAlignmentCenter()) {
                textAlignment = View.TEXT_ALIGNMENT_GRAVITY
                // Get the length of all the stuff before the text.
                val lengthBeforeText =
                    if (isChipIconVisible) iconStartPadding + chipIconSize + iconEndPadding else 0f
                val chipCenter = width / 2
                // Chips have only one line, so we can get away with this.
                val textWidth = layout.getLineWidth(0)
                val newTextStartPadding = chipCenter - (textWidth / 2) - lengthBeforeText
                textStartPadding = max(0f, newTextStartPadding)
                textEndPadding = 0f
            }
        }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //just want to draw a diagonal line
        canvas.drawLine(0f, 0f, width.toFloat(), height.toFloat(), mLinePaint)
    }

    private fun isTextAlignmentCenter() = textAlignment == View.TEXT_ALIGNMENT_CENTER
}

布局示例：

活动主文件

    <com.example.myapplication.MyChip
        android:id="@+id/chip"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:text="Some Chip"
        android:textAlignment="center"
        app:chipIcon="@drawable/ic_baseline_cloud_download_24"
        app:chipIconVisible="true"
        app:closeIcon="@drawable/ic_baseline_clear_24"
        app:closeIconVisible="true" />
</LinearLayout>

结果：

我更深入地研究了这个问题。由于某种原因，诸如drawLine()、drawRect()等画布操作不起作用。但是，我可以在画布上绘制文本并用油漆或颜色填充它。

更新：因此，我将问题追溯到TextViewbringTextIntoView()的方法。由于我不清楚的原因，视图在正方向上滚动了很多地方（很大，比如成千上万）。正是在这个滚动位置写入文本。要在Chip上绘图，我们还必须滚动到这个位置。此卷轴解释了为什么我可以用颜色填充画布，但无法在其上绘图以使其可见。

下面将捕获“坏”滚动位置并在Chip上绘制之前滚动到该位置。屏幕截图看起来与上图相同。

MyChip.kt

class MyChip @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : Chip(context, attrs, defStyleAttr)/*, View.OnScrollChangeListener*/ {

    private val mLinePaint = Paint().apply {
        color = Color.BLUE
        strokeWidth = 10f
    }

    private var mBadScroll = 0f

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //just want to draw a diagonal line
        canvas.withTranslation(x = mBadScroll) {
            canvas.drawLine(0f, 0f, this@MyChip.width.toFloat(), height.toFloat(), mLinePaint)
        }
    }

    private fun isTextAlignmentCenter() = textAlignment == View.TEXT_ALIGNMENT_CENTER

    override fun scrollTo(x: Int, y: Int) {
        super.scrollTo(x, y)
        if (isTextAlignmentCenter()) {
            mBadScroll = scrollX.toFloat()
        }
    }
}

更新：水平滚动仍然是问题。在TextViewonMeasure()的方法中，如果为视图启用了水平滚动，则将所需宽度设置为。（它适用于Chip。）是 1024*1024 或一兆字节。这就是我们稍后看到的大卷轴的来源。如果我们在TextView中调用， Chip的这个问题可以直接用TextView复制。VERY_WIDEVERY_WIDEsetHorizontallyScrolling(true)

筹码只有一行，可能不应该滚动。无论如何，调用setHorizontallyScrolling(true)并不会使Chip或TextView可滚动。上面的代码现在就变成了：

MyChip.kt

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

    private val mLinePaint = Paint().apply {
        color = Color.BLUE
        strokeWidth = 10f
    }

    init {
        setHorizontallyScrolling(false)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //just want to draw a diagonal line
        canvas.drawLine(0f, 0f, this@MyChip.width.toFloat(), height.toFloat(), mLinePaint)
    }
}

水平滚动在Chip的构造函数中设置为“true” 。