Android布局斜角绘制适配问题求助：寻求编程实现方案

问题背景 #

需要在高度固定为60dp的Android布局中绘制左右斜角效果，原使用layer-list的XML方案因依赖固定dp值，在大屏设备上比例失调，无法达到预期效果，需实现适配所有屏幕及横竖屏切换的方案。

原方案代码 #

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/bgColor" />
    
    <item android:top="-20dp"
        android:bottom="-50dp"
        android:left="-20dp"
        android:right="400dp">
        <rotate
            android:fromDegrees="368"
            android:pivotX="50%"
            android:pivotY="00%">
            <shape
                android:shape="rectangle">
                <solid android:color="#DFDBDB"/>
            </shape>
        </rotate>
    </item>
    <item android:top="-20dp"
        android:bottom="-50dp"
        android:left="395dp"
        android:right="-120dp">
        <rotate
            android:fromDegrees="-371"
            android:pivotX="50%"
            android:pivotY="00%">
            <shape
                android:shape="rectangle">
                <solid
                    android:color="?android:colorBackground"/>
            </shape>
        </rotate>
    </item>
</layer-list>

预期效果 #

方案一：优化Layer-List适配方案 #

原方案核心问题是使用固定dp值导致大屏适配失效，修改为相对定位+百分比尺寸，可实现基础适配：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 基础背景 -->
    <item android:drawable="@color/bgColor" />

    <!-- 左侧斜角：相对定位+实际角度调整 -->
    <item android:gravity="left|top">
        <rotate
            android:fromDegrees="8" <!-- 替换368为实际角度，更直观 -->
            android:pivotX="0%"
            android:pivotY="0%">
            <shape android:shape="rectangle">
                <solid android:color="#DFDBDB" />
                <!-- 使用屏幕百分比定义尺寸，适配不同屏幕 -->
                <size
                    android:width="@dimen/beak_width"
                    android:height="@dimen/beak_height" />
            </shape>
        </rotate>
    </item>

    <!-- 右侧斜角遮罩：形成右侧缺口 -->
    <item android:gravity="right|top">
        <rotate
            android:fromDegrees="-11" <!-- 替换-371为实际负角度 -->
            android:pivotX="100%"
            android:pivotY="0%">
            <shape android:shape="rectangle">
                <solid android:color="?android:colorBackground" />
                <size
                    android:width="@dimen/beak_width"
                    android:height="@dimen/beak_height" />
            </shape>
        </rotate>
    </item>
</layer-list>

在res/values/dimens.xml中定义百分比尺寸：

<!-- 斜角宽度为屏幕宽度的20% -->
<dimen name="beak_width">20%p</dimen>
<!-- 斜角高度需覆盖60dp布局，设置足够大的值 -->
<dimen name="beak_height">150dp</dimen>

方案二：自定义View完美适配方案 #

通过自定义View动态计算坐标，可完全适配所有屏幕尺寸及横竖屏切换，是最可靠的解决方案：

自定义View代码（Kotlin） #

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.View

class BeakHeaderView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    // 背景画笔
    private val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = context.getColor(R.color.bgColor)
    }

    // 左侧斜角画笔
    private val leftBeakPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = 0xFFDFDBDB.toInt()
    }

    // 右侧遮罩画笔（形成缺口）
    private val rightMaskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = context.getColor(android.R.color.background_light)
    }

    private val leftBeakPath = Path()
    private val rightMaskPath = Path()

    // 斜角角度（可根据需求调整）
    private val beakAngle = Math.toRadians(8.0)
    // 斜角水平长度（可改为百分比，如屏幕宽度的15%）
    private val beakHorizontalLength = dpToPx(120f)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // 强制View高度为60dp
        val desiredHeight = dpToPx(60f).toInt()
        val finalHeight = resolveSize(desiredHeight, heightMeasureSpec)
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), finalHeight)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val viewWidth = width.toFloat()
        val viewHeight = height.toFloat()

        // 绘制基础背景
        canvas.drawRect(0f, 0f, viewWidth, viewHeight, bgPaint)

        // 绘制左侧斜角路径
        leftBeakPath.reset()
        leftBeakPath.moveTo(0f, 0f)
        leftBeakPath.lineTo(beakHorizontalLength, 0f)
        // 计算斜角终点Y坐标：tan(角度) = 对边/邻边 → Y = 水平长度 * tan(角度)
        val leftBeakEndY = beakHorizontalLength * Math.tan(beakAngle).toFloat()
        leftBeakPath.lineTo(0f, leftBeakEndY)
        leftBeakPath.close()
        canvas.drawPath(leftBeakPath, leftBeakPaint)

        // 绘制右侧遮罩路径（形成斜缺口）
        rightMaskPath.reset()
        rightMaskPath.moveTo(viewWidth, 0f)
        rightMaskPath.lineTo(viewWidth - beakHorizontalLength, 0f)
        val rightBeakEndY = beakHorizontalLength * Math.tan(beakAngle).toFloat()
        rightMaskPath.lineTo(viewWidth, rightBeakEndY)
        rightMaskPath.lineTo(viewWidth, viewHeight)
        rightMaskPath.lineTo(viewWidth - beakHorizontalLength, viewHeight)
        rightMaskPath.close()
        canvas.drawPath(rightMaskPath, rightMaskPaint)
    }

    // dp转px工具方法
    private fun dpToPx(dp: Float): Float {
        return dp * resources.displayMetrics.density
    }
}

布局中使用 #

<com.yourpackage.BeakHeaderView
    android:layout_width="match_parent"
    android:layout_height="60dp" />

方案优势 #

• 强制View高度为60dp，完全符合需求
• 斜角的角度、长度可灵活调整
• 横竖屏切换时自动重新计算绘制，完美适配所有屏幕尺寸
• 无固定硬编码值，所有计算基于当前View尺寸和屏幕密度

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