如何在ScrollView中实现含背景的ClipPath异形布局设计？

针对ScrollView内的这类布局需求，推荐采用单容器+一体化背景绘制的方案，从根源上解决多容器带来的留白、定位难题，以下分技术栈给出具体实现：

方案1：Android原生开发（自定义Drawable） #

直接为ScrollView的内部内容容器设置自定义背景Drawable，一次性完成黄色侧边与白色主体的绘制，无需拆分多个容器：

• 核心思路：通过自定义Drawable在同一画布上分层绘制黄色侧边和带圆角的白色主体，确保背景是一个整体
• 代码示例（Kotlin）：

class CustomBackgroundDrawable : Drawable() {
    private val yellowPaint = Paint().apply {
        color = Color.parseColor("#FFFFCC00")
        isAntiAlias = true
    }
    private val whitePaint = Paint().apply {
        color = Color.WHITE
        isAntiAlias = true
    }
    private val cornerRadius = 16.dp.toPx(resources.displayMetrics)

    override fun draw(canvas: Canvas) {
        val bounds = bounds
        // 绘制左侧黄色竖条
        canvas.drawRect(0f, 0f, 24.dp.toPx(resources.displayMetrics), bounds.bottom.toFloat(), yellowPaint)
        // 绘制带左侧圆角的白色主体
        val whiteRect = RectF(24.dp.toPx(resources.displayMetrics), 0f, bounds.right.toFloat(), bounds.bottom.toFloat())
        // 控制仅左侧上下角为圆角
        val radii = floatArrayOf(cornerRadius, cornerRadius, 0f, 0f, 0f, 0f, cornerRadius, cornerRadius)
        canvas.drawRoundRect(whiteRect, radii, whitePaint)
    }

    override fun setAlpha(alpha: Int) {
        yellowPaint.alpha = alpha
        whitePaint.alpha = alpha
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        yellowPaint.colorFilter = colorFilter
        whitePaint.colorFilter = colorFilter
    }

    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
}

// 扩展函数：dp转px
fun Int.toPx(metrics: DisplayMetrics): Float = this * metrics.density

使用时直接将该Drawable设置为ScrollView内部LinearLayout/ConstraintLayout的背景即可。

方案2：Jetpack Compose开发（单容器+drawBehind修饰符） #

利用Compose的drawBehind修饰符分层绘制背景，无需额外容器，滚动时背景与内容联动无错位：

• 核心思路：在Column的背景层先画黄色侧边，再画带圆角的白色主体，最后通过padding让内容避开黄色区域
• 代码示例：

@Composable
fun CustomScrollLayout() {
    val cornerRadius = 16.dp
    val yellowSideWidth = 24.dp

    ScrollView(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .drawBehind {
                    // 绘制黄色侧边
                    drawRect(
                        color = Color(0xFFFFCC00),
                        size = Size(yellowSideWidth.toPx(), size.height)
                    )
                    // 绘制左侧带圆角的白色主体
                    drawRoundRect(
                        color = Color.White,
                        topLeft = Offset(yellowSideWidth.toPx(), 0f),
                        size = Size(size.width - yellowSideWidth.toPx(), size.height),
                        cornerRadius = CornerRadius(cornerRadius.toPx(), 0f)
                    )
                }
                .padding(start = yellowSideWidth + 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
        ) {
            // 滚动内容示例
            repeat(20) {
                Text(
                    text = "滚动内容项 $it",
                    modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
                )
            }
        }
    }
}

方案优势 #

• 避免多容器层级带来的留白、定位冲突问题，背景为一体化绘制
• ScrollView滚动时背景与内容同步，不会出现错位
• 减少View/Compose节点数量，降低过度绘制风险，性能更优

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