如何在低于 23 的 api 上修复可绘制气泡不正确

Question

这是可绘制的代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:top="0dp" android:bottom="10dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

            <solid android:color="@android:color/holo_blue_light" />
            <stroke
                android:width="1dp"
                android:color="#40adc2" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <item android:gravity="center_horizontal|bottom">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="75%"
            android:pivotY="47%">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/holo_blue_light" />
                <size
                    android:height="20dp"
                    android:width="15dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

这是显示问题的两张图片：

第一张图片在 API 19 中是不正确的，第二张图片在 android 9 中是正确的

到处搜索都找不到解决办法。

提前致谢

Answer 1

图层列表可绘制对象对于 API 级别 19 看起来很糟糕，因为

<size android:height="20dp"
      android:width="15dp"/> 

因为小矩形被忽略。 （如果您删除旋转并让带有圆角的矩形具有透明颜色，您可以测试这一点）

对于较旧的 API 级别，您必须为android:top 、 android:bottom 、 android:left和android:right设置值。 如果你事先知道TextView的尺寸，你可以计算如下值（单位总是dp）：

• 顶部 =（文本视图高度）- 20
• left = (textview 宽度的 50%) - 10
• 右 =（文本视图宽度的 50%）- 10
• 底部 = 0

例如，如果您的TextView的宽度为 200dp，高度为 80dp：

<item 
    android:top="60dp" android:bottom="0dp"
    android:left="90dp" android:right="90dp">
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="75%"
        android:pivotY="47%">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_blue_light" />
        </shape>
    </rotate>
</item>

请注意，如果您使用这种方法，则不需要设置大小或重力。

有时无法确定TextView的大小（例如，因为其内容可能因不同语言或不同屏幕而异）。 在这种情况下，您可以创建一个自定义TextView ，它将绘制气泡作为其背景：

class BubbleTextView(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : TextView(context, attrs, defStyleAttr) {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val rectPath = Path()
    private val trianglePath = Path()

    private val rectF = RectF()
    private val triangleSize = resources.getDimensionPixelSize(R.dimen.triangle_size_20dp).toFloat()
    private val cornerRadius = resources.getDimensionPixelSize(R.dimen.corner_radius_4dp).toFloat()

    constructor(context: Context?):this(context, null, 0)
    constructor(context: Context?, attrs: AttributeSet?):this(context, attrs, 0)


    init{
        paint.style = Paint.Style.FILL
        paint.color = Color.CYAN
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        val myWidth = (right - left).toFloat()
        val myHeight = (bottom - top).toFloat()
        val centerX = myWidth / 2f
        val lowerEdgeY = myHeight * 0.8f

        rectF.set(0f, 0f, myWidth, lowerEdgeY)
        rectPath.addRoundRect(rectF,cornerRadius, cornerRadius, Path.Direction.CW )

        val delta = triangleSize * 0.5f
        trianglePath.moveTo(centerX - delta, lowerEdgeY)
        trianglePath.lineTo(centerX + delta, lowerEdgeY)
        trianglePath.lineTo(centerX, myHeight)
        trianglePath.close()
    }

    override fun onDraw(canvas: Canvas?) {
        canvas?.drawPath(rectPath, paint)
        canvas?.drawPath(trianglePath, paint)
        super.onDraw(canvas)
    }
}