如何为Android的CardView右侧添加箭头或三角标识？

下面提供三种可落地的实现方式，满足箭头颜色与CardView动态绑定的需求：

方案一：ConstraintLayout组合CardView与箭头View #

这种方式灵活易维护，适合快速迭代场景：

1. 修改布局结构，用ConstraintLayout包裹CardView和箭头View：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_marginTop="2dp"
    android:layout_gravity="start"
    android:layout_marginRight="2dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:cardCornerRadius="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:paddingHorizontal="8dp"
            android:text="asdasdasdsdasdaadsaasd" />
    </androidx.cardview.widget.CardView>

    <!-- 右侧箭头View -->
    <View
        android:id="@+id/arrowView"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        app:layout_constraintStart_toEndOf="@id/cardView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/triangle_right" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. 创建矢量三角形drawable（res/drawable/triangle_right.xml）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="10dp"
    android:height="20dp"
    android:viewportWidth="10"
    android:viewportHeight="20">
    <path
        android:fillColor="@color/default_card_color"
        android:pathData="M0,0 L10,10 L0,20 Z" />
</vector>

3. 在Adapter中同步设置颜色：

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val targetColor = getItem(position).cardColor // 你的动态颜色值
    // 设置CardView背景色
    holder.cardView.setCardBackgroundColor(targetColor)
    // 同步箭头颜色（矢量图通过setColorFilter修改）
    holder.arrowView.setColorFilter(targetColor)
}

方案二：自定义CardView直接绘制箭头 #

适合需要高度自定义、减少布局层级的场景：

1. 自定义CustomCardView类：

class CustomCardView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : androidx.cardview.widget.CardView(context, attrs, defStyleAttr) {

    private val arrowPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val arrowWidth = 10f // 箭头宽度，可根据需求调整

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 获取CardView当前背景色，同步给箭头画笔
        arrowPaint.color = cardBackgroundColor.defaultColor
        
        // 绘制右侧三角形箭头
        val arrowPath = Path()
        val cardRightEdge = width.toFloat()
        val cardCenterY = height / 2f
        arrowPath.moveTo(cardRightEdge, cardCenterY - arrowWidth)
        arrowPath.lineTo(cardRightEdge + arrowWidth, cardCenterY)
        arrowPath.lineTo(cardRightEdge, cardCenterY + arrowWidth)
        arrowPath.close()
        
        canvas.drawPath(arrowPath, arrowPaint)
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // 把箭头宽度加入CardView总宽度
        val newWidth = MeasureSpec.getSize(widthMeasureSpec) + arrowWidth.toInt()
        val newWidthSpec = MeasureSpec.makeMeasureSpec(newWidth, MeasureSpec.getMode(widthMeasureSpec))
        super.onMeasure(newWidthSpec, heightMeasureSpec)
    }
}

2. 布局中替换为自定义CardView：

<com.yourpackage.CustomCardView
    android:id="@+id/cardView"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_marginTop="2dp"
    android:layout_gravity="start"
    android:layout_marginRight="2dp"
    app:cardCornerRadius="0dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:paddingHorizontal="8dp"
        android:text="asdasdasdsdasdaadsaasd" />
</com.yourpackage.CustomCardView>

3. Adapter中只需设置CardView颜色，箭头自动同步：

holder.cardView.setCardBackgroundColor(getItem(position).cardColor)

方案三：LayerList背景实现 #

适合静态或颜色变化少的场景，动态修改颜色需额外处理：

1. 创建带箭头的layer_list背景（res/drawable/bg_card_with_arrow.xml）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 主Card矩形 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/default_card_color" />
        </shape>
    </item>
    <!-- 右侧箭头 -->
    <item android:right="-10dp" android:left="1000dp"> <!-- 调整left值适配实际宽度，或用inset -->
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@color/default_card_color" />
                <size android:width="14dp" android:height="14dp" />
            </shape>
        </rotate>
    </item>
</layer-list>

2. 布局中设置CardView的foreground或内部布局背景，动态修改颜色需通过代码遍历layer修改颜色值，相对繁琐，这里不展开细节。

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