如何制作一侧半圆形背景textView？

Question

我想为我的 textView 制作这样的背景：

我设法只用外半圆制作：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/p_color" />
    <corners android:radius="24dp" />
</shape>

这对我不利。我也尝试使用状态列表，但没有成功。

Answer 1

你好，我的朋友，

你需要的不是通过形状Drawable创建的，你需要一个自定义视图

事实上，你需要一些技巧来通过自定义视图制作你想要的形状，并在约束布局中使用它作为 TextView 的背景

我用 kotlin 为你编码（如果你需要 java，请告诉我）：

第一：

创建一个文件并将其命名为 CustomeBg 复制下面的代码：

    import android.content.Context
    import android.graphics.*
    import android.util.AttributeSet
    import android.view.View


class CustomeBg @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private var W = 0.0f
    private var H = 0.0f

    /////main body Rect and Paint
    private var bodyRect = Rect()
    private var bodyRectPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    //right half circle Rect and Paint
    private var rightCircleRect = RectF()
    private var rightCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG)

    //left half circle Rect and Paint
    private var leftCircleRect = RectF()
    private var leftCirclePaint = Paint(Paint.ANTI_ALIAS_FLAG)


    init {

    }


    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        W = w.toFloat()
        H = h.toFloat()

    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // drawRect(canvas)
        var left = 0
        var top = 0
        var right = W - RADIUS_RIGHT
        var bottom = H

        bodyRectPaint.apply {
            color = BODY_COLOR_RECT
            style = Paint.Style.FILL
        }

        bodyRect.set(left, top, right.toInt(), bottom.toInt())
        canvas.drawRect(bodyRect, bodyRectPaint)


        // Draw Left half-Circle
        var left_l_circle = -RADIUS_LEFT
        var top_l_circle = 0f
        var right_l_circle = RADIUS_LEFT
        var bottom_l_circle = H

        leftCirclePaint.apply {
            color = LEFT_CIRCLE_COLOR
            style = Paint.Style.FILL
        }

        leftCircleRect = RectF(left_l_circle, top_l_circle, right_l_circle, bottom_l_circle)
        canvas.drawArc(leftCircleRect, -90f, 180f, true, leftCirclePaint)


        // Draw Right half-Circle
        var left_r_circle = (bodyRect.right) - RADIUS_RIGHT
        var top_r_circle = 0f
        var right_r_circle = bodyRect.right + RADIUS_RIGHT
        var bottom_r_circle = H

        rightCirclePaint.apply {
            color = RIGHT_CIRCLE_COLOR
            style = Paint.Style.FILL
        }

        rightCircleRect = RectF(left_r_circle, top_r_circle, right_r_circle, bottom_r_circle)
        canvas.drawArc(rightCircleRect, -90f, 180f, true, rightCirclePaint)

    }


    companion object {
        private val BODY_COLOR_RECT = Color.parseColor("#00534b")
        private val LEFT_CIRCLE_COLOR = Color.parseColor("#ffffff")
        private val RIGHT_CIRCLE_COLOR = Color.parseColor("#00534b")
        private val RADIUS_LEFT = 100f
        private val RADIUS_RIGHT = 100f

    }

}

秒：

然后在您的 main_activity 布局中放置 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"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="51dp"
        tools:layout_editor_absoluteY="95dp">

        <com.example.junk2.CustomeBg
            android:id="@+id/itemSettingBg"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </com.example.junk2.CustomeBg>

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hallo ich bin Custome"
            android:textColor="#FFFFFF"
            app:layout_constraintBottom_toBottomOf="@+id/itemSettingBg"
            app:layout_constraintEnd_toEndOf="@+id/itemSettingBg"
            app:layout_constraintStart_toStartOf="@+id/itemSettingBg"
            app:layout_constraintTop_toTopOf="@+id/itemSettingBg" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

结果是：

我需要解释一下我的代码以便更好地理解： 在 CustomeBg 中有一些价值：

companion object {
    private val BODY_COLOR_RECT = Color.parseColor("#00534b")
    private val LEFT_CIRCLE_COLOR = Color.parseColor("#ffffff")
    private val RIGHT_CIRCLE_COLOR = Color.parseColor("#00534b")
    private val RADIUS_LEFT = 100f
    private val RADIUS_RIGHT = 100f

}

在这个文件中实际上我们有 3 个对象，两个半圆（一个用于左侧，一个用于右侧） 我们有一个一个矩形作为我们的身体，上面的代码解释了每个圆的半径和它们的颜色，你也可以在这里看到身体颜色

注意：您可以更改以上值以供您使用我的朋友