如何在Android横竖屏场景下实现纯色弧形背景效果

实现方案 #

你原来的方案核心问题是用固定尺寸的shape配合负边距实现，横屏时屏幕宽度远大于竖屏，shape的圆角半径不足以覆盖全宽，就会出现弧度变形、裁剪的问题，同时负边距也存在布局越界的隐患。以下两种方案都可以完美解决问题：

方案1：LayerList 方案（最简，无需额外控件） #

直接用LayerList作为根布局的背景，完全不需要额外添加ImageView，也没有任何负边距配置，横竖屏自动适配：

1. 新建res/drawable/arc_dual_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 下半部分背景层 -->
    <item android:drawable="@color/your_bottom_bg_color" />
    <!-- 上半部分带弧形底边界的层 -->
    <item
        android:bottom="30dp"> <!-- 调整这个值可以控制弧形的凸起高度 -->
        <shape android:shape="rectangle">
            <solid android:color="@color/your_top_bg_color" />
            <!-- 圆角值设为远大于屏幕宽度的一半即可，会自动生成平滑的弧形，不会变形 -->
            <corners android:bottomRadius="2000dp" />
        </shape>
    </item>
</layer-list>

2. 直接给你的页面根布局设置背景即可：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/arc_dual_background">
    <!-- 你的其他布局内容 -->
</LinearLayout>

方案2：自定义View方案（灵活控制弧度） #

如果需要自定义弧度曲率、做动画等需求，可以用极简自定义View实现：

class ArcBackgroundView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = context.getColor(R.color.your_top_bg_color)
    }
    private val path = Path()
    // 弧形凸起高度，可根据需求调整，也可封装为自定义属性从XML配置
    var arcHeight = 30.dpToPx()
        set(value) {
            field = value
            invalidate()
        }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        path.reset()
        path.moveTo(0f, 0f)
        path.lineTo(0f, height - arcHeight)
        // 二阶贝塞尔曲线绘制平滑弧形
        path.quadTo(w / 2f, h.toFloat(), w.toFloat(), h - arcHeight)
        path.lineTo(w.toFloat(), 0f)
        path.close()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawPath(path, paint)
    }

    private fun Int.dpToPx() = (this * resources.displayMetrics.density)
}

使用时直接放在根布局最底层即可，宽高设为match_parent，不需要任何额外配置：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/your_bottom_bg_color">

    <com.yourpackage.ArcBackgroundView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 你的其他布局内容 -->
</FrameLayout>

两种方案都完美适配横竖屏切换，不会出现裁剪变形问题，同时不需要负边距配置，也减少了布局层级。

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