Android Kotlin 如何设计Curved Containers/CardViews样式价格标签视图

前置依赖确认 #

确保项目引入了Material Design组件库，在模块级build.gradle中添加：

dependencies {
    implementation "com.google.android.material:material:1.11.0"
}

步骤1：定义标签背景Drawable #

在res/drawable下新建bg_price_tag.xml，实现带左侧凹口的圆角渐变背景效果：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 主体渐变圆角矩形 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="0"
                android:endColor="#FF5252"
                android:startColor="#FF9100" />
            <corners android:radius="20dp" />
        </shape>
    </item>
    <!-- 左侧上方压边白色半圆，制造凹口 -->
    <item
        android:width="16dp"
        android:height="16dp"
        android:gravity="left|center_vertical"
        android:top="-8dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <!-- 左侧下方压边白色半圆，制造凹口 -->
    <item
        android:width="16dp"
        android:height="16dp"
        android:bottom="-8dp"
        android:gravity="left|center_vertical">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

步骤2：编写标签布局XML #

在res/layout下新建view_price_tag.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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_price_tag"
    android:paddingHorizontal="12dp"
    android:paddingVertical="6dp"
    android:paddingLeft="20dp">

    <!-- 左侧折扣标识 -->
    <TextView
        android:id="@+id/tv_discount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 分割线 -->
    <View
        android:id="@+id/divider"
        android:layout_width="1dp"
        android:layout_height="16dp"
        android:layout_marginHorizontal="8dp"
        android:alpha="0.7"
        android:background="@android:color/white"
        app:layout_constraintStart_toEndOf="@id/tv_discount"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 右侧价格文本 -->
    <TextView
        android:id="@+id/tv_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@id/divider"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

步骤3：Kotlin逻辑绑定 #

可以封装成自定义View方便复用，也可以直接在代码中绑定数据：

// 直接在Activity/Fragment中设置数据示例
val discountText = findViewById<TextView>(R.id.tv_discount)
val priceText = findViewById<TextView>(R.id.tv_price)
discountText.text = "8折"
priceText.text = "¥99"

// 自定义View封装示例
class PriceTagView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

    private val tvDiscount: TextView
    private val tvPrice: TextView

    init {
        inflate(context, R.layout.view_price_tag, this)
        tvDiscount = findViewById(R.id.tv_discount)
        tvPrice = findViewById(R.id.tv_price)

        // 可自定义属性读取，比如修改背景色、文本大小等
        context.obtainStyledAttributes(attrs, R.styleable.PriceTagView).apply {
            tvDiscount.text = getString(R.styleable.PriceTagView_discountText)
            tvPrice.text = getString(R.styleable.PriceTagView_priceText)
            recycle()
        }
    }

    fun setDiscount(discount: String) {
        tvDiscount.text = discount
    }

    fun setPrice(price: String) {
        tvPrice.text = price
    }
}

如果需要调整凹口大小、圆角、渐变颜色，直接修改bg_price_tag.xml对应的参数即可，不需要改动逻辑代码。

内容的提问来源于stack exchange，提问作者Jason Waku