Android XML实现圆角梯形UI 解决圆角设置与布局显示异常问题

问题修复方案 #

问题根源

你当前遇到的两个问题核心原因如下：

1. 布局显示不全：layer-list实现的drawable的透明区域也会被计算到View的尺寸范围内，你用wrap_content作为卡片高度时，drawable的延伸透明区域会让卡片自动拉伸占满剩余空间，导致下方卡片被挤出屏幕，margin自然无法生效。
2. 缺少圆角：你只给了平直区域的矩形加了圆角，旋转的斜切矩形没有加对应位置的圆角，所以斜边端点没有圆角效果。

修复后的代码

1. 顶部卡片drawable（card_login_2_shape.xml）

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 斜切区域 -->
    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <rotate 
            android:fromDegrees="110" 
            android:pivotX="0%" 
            android:pivotY="100%">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
                <!-- 旋转后对应斜角下端的圆角 -->
                <corners android:bottomRightRadius="30dp"/>
            </shape>
        </rotate>
    </item>
    <!-- 顶部平直区域 -->
    <item
        android:bottom="180dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners
                android:topLeftRadius="30dp"
                android:topRightRadius="30dp" />
        </shape>
    </item>
</layer-list>

2. 底部卡片drawable（card_login_2_shape_2.xml）

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 斜切区域 -->
    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <rotate 
            android:fromDegrees="110" 
            android:pivotX="0%" 
            android:pivotY="0%">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
                <!-- 旋转后对应斜角上端的圆角 -->
                <corners android:topRightRadius="30dp"/>
            </shape>
        </rotate>
    </item>
    <!-- 底部平直区域 -->
    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="180dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners
                android:bottomLeftRadius="30dp"
                android:bottomRightRadius="30dp" />
        </shape>
    </item>
</layer-list>

3. 页面布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/login_2_background"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="LOGIN"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:layout_marginBottom="16dp"
        android:textStyle="bold" />

    <RelativeLayout
        android:id="@+id/form"
        android:layout_below="@id/title"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@drawable/card_login_2_shape">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="32dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EMAIL/MOBILE"
                android:textStyle="bold"
                android:textSize="16sp"/>

        </RelativeLayout>

    </RelativeLayout>

    <RelativeLayout
        android:layout_below="@id/form"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/card_login_2_shape_2">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="32dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EMAIL/MOBILE"
                android:textStyle="bold"
                android:textSize="16sp"/>

        </RelativeLayout>

    </RelativeLayout>

</RelativeLayout>

关键修改说明

• 给旋转节点增加了pivotX和pivotY固定旋转锚点，避免不同尺寸设备上斜切角度偏移
• 给斜切矩形增加对应位置的圆角，旋转后正好匹配斜边端点的圆角需求
• 给两个卡片设置固定高度和顶部间距，避免drawable透明区域导致View无限拉伸，解决底部卡片被遮挡的问题
• 调整了layer-list的item边距，适配固定高度的View尺寸

如果需要适配不同屏幕，可以把高度改为dimen资源，不同分辨率配置对应数值；也可以将根布局替换为ConstraintLayout，用layout_constraintHeight_percent属性给两个卡片分配屏幕高度占比，适配性更好。

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