Android实现横向RecyclerView首尾Item圆角效果方案问询

嘿，我来帮你搞定这个困扰！你之前尝试给整个RecyclerView加shape样式，或者给所有Item统一设置圆角，这两种方式都没法实现「首尾圆角、中间方形」的需求——前者会把整个RecyclerView容器切圆角，导致中间Item被边缘裁切，后者会让所有Item都带圆角，不符合你的要求。

下面给你两种简便的实现方案，选你顺手的来：

方案一：提前定义Shape XML文件（简单直观） #

首先准备三个shape文件，分别对应首尾和中间Item的样式：

1. left_corners.xml（第一个Item使用，左上+左下圆角）

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <stroke android:width="1dp" android:color="@android:color/transparent" />
    <corners android:topLeftRadius="7dp" android:bottomLeftRadius="7dp"/>
</shape>

2. right_corners.xml（最后一个Item使用，右上+右下圆角）

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <stroke android:width="1dp" android:color="@android:color/transparent" />
    <corners android:topRightRadius="7dp" android:bottomRightRadius="7dp"/>
</shape>

3. square_shape.xml（中间Item使用，纯方形）

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <stroke android:width="1dp" android:color="@android:color/transparent" />
</shape>

然后在你的RecyclerView Adapter的onBindViewHolder方法里，根据Item的位置动态设置背景：

override fun onBindViewHolder(holder: YourViewHolder, position: Int) {
    val itemCount = itemCount
    val imageView = holder.itemView.ivPhoto

    // 根据位置选择对应的背景样式
    val backgroundRes = when(position) {
        0 -> R.drawable.left_corners
        itemCount - 1 -> R.drawable.right_corners
        else -> R.drawable.square_shape
    }

    imageView.setBackgroundResource(backgroundRes)
    // 必须开启这个属性，让图片跟着背景圆角裁剪
    imageView.clipToOutline = true

    // 其他绑定逻辑...
}

方案二：代码动态生成Shape（更灵活，无需多XML） #

如果不想创建多个XML文件，可以在代码里动态构建ShapeDrawable，适合需要动态调整圆角大小的场景：

override fun onBindViewHolder(holder: YourViewHolder, position: Int) {
    val itemCount = itemCount
    val imageView = holder.itemView.ivPhoto
    val cornerRadius = 7.dpToPx(imageView.context) // 转成像素值

    // 创建ShapeDrawable并设置圆角
    val shapeDrawable = ShapeDrawable(RectShape()).apply {
        paint.color = ContextCompat.getColor(imageView.context, R.color.white)
        val corners = FloatArray(8) // 对应8个圆角参数：左上、右上、右下、左下，每个角两个值

        when(position) {
            0 -> {
                // 第一个Item：左上、左下圆角
                corners[0] = cornerRadius
                corners[1] = cornerRadius
                corners[6] = cornerRadius
                corners[7] = cornerRadius
            }
            itemCount - 1 -> {
                // 最后一个Item：右上、右下圆角
                corners[2] = cornerRadius
                corners[3] = cornerRadius
                corners[4] = cornerRadius
                corners[5] = cornerRadius
            }
            // 中间Item：不设置圆角，保持默认0
        }

        shape = RoundRectShape(corners, null, null)
    }

    // 如果你需要边框，再创建StrokeDrawable
    val strokeDrawable = GradientDrawable().apply {
        setStroke(1.dpToPx(imageView.context).toInt(), Color.TRANSPARENT)
        shape = GradientDrawable.RECTANGLE
        val strokeCorners = FloatArray(8)
        // 重复上面的圆角逻辑，保证边框和背景圆角一致
        when(position) {
            0 -> {
                strokeCorners[0] = cornerRadius
                strokeCorners[1] = cornerRadius
                strokeCorners[6] = cornerRadius
                strokeCorners[7] = cornerRadius
            }
            itemCount - 1 -> {
                strokeCorners[2] = cornerRadius
                strokeCorners[3] = cornerRadius
                strokeCorners[4] = cornerRadius
                strokeCorners[5] = cornerRadius
            }
        }
        cornerRadii = strokeCorners
    }

    // 组合背景并设置
    val layerDrawable = LayerDrawable(arrayOf(shapeDrawable, strokeDrawable))
    imageView.background = layerDrawable
    imageView.clipToOutline = true

    // 其他绑定逻辑...
}

// 扩展函数：dp转px
fun Int.dpToPx(context: Context): Float {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this.toFloat(),
        context.resources.displayMetrics
    )
}

关键注意事项 #

• 一定要确保clipToOutline属性设置为true，否则图片不会被背景的圆角裁剪，还是方形显示；
• 如果你的横向RecyclerView Item之间有间距，要注意圆角的显示是否符合预期，必要时调整间距大小；
• 如果你用的是LinearLayoutManager横向布局，上面的position判断逻辑完全适用；如果是其他布局管理器，可能需要微调判断条件。

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