如何为登录屏幕背景设计倾斜对角线或圆角矩形可绘制资源文件？

Question

我想为登录屏幕设计背景布局。我想设计这样的东西：

[

我尝试设计它，但是我无法使用圆角。输出如下所示：（更新的输出）

[

下面是可绘制资源文件的代码。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/rectangle">
    <shape
        android:shape="rectangle">
        <solid android:color="#0D758D"/>
        <corners
            android:radius="50dp"/>
    </shape>
</item>
<item android:top="300dp"
    android:bottom="300dp"
    android:left="-100dp"
    android:right="-300dp">
    <rotate
        android:fromDegrees="25"
        android:pivotX="20%"
        android:pivotY="65%">

        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:radius="8dp"/>
        </shape>
    </rotate>
</item>

Answer 1

在您的可绘制资源文件中定义角标记，如下所示

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/rectangle">
    <shape
        android:shape="rectangle">
        <solid android:color="#0D758D"/>
        <corners
            android:radius="50dp"/>
    </shape>
    </item>
    <item android:top="300dp"
        android:bottom="300dp"
        android:left="-100dp"
        android:right="-300dp">
        <rotate
            android:fromDegrees="25"
            android:pivotX="20%"
            android:pivotY="65%">

            <shape
                android:shape="rectangle">
                <solid android:color="#FFFFFF"/>
                <corners
                    android:radius="8dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

根据需要更改半径。

Answer 2

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
                <solid android:color="@color/colorPrimary" />

            </shape>
        </item>

        <item
            android:bottom="300dp"
            android:left="-100dp"
            android:right="-300dp"
            android:top="300dp">

            <rotate
                android:fromDegrees="25"
                android:pivotX="20%"
                android:pivotY="65%">

                <shape android:shape="rectangle">
                    <solid android:color="#FFFFFF" />
                    <corners android:radius="1dp" />
                </shape>
            </rotate>
        </item>

    </layer-list>

Answer 3

终于找到解决办法了:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500"
android:viewportHeight="749"
android:width="625dp"
android:height="936.25dp">
<group
    android:scaleX="0.1"
    android:scaleY="-0.1"
    android:translateY="749">
    <path
        android:pathData="M439 7416C282 7361 169 7248 113 7090l-23 -65 0 -1751c0 -1693 1 -1753 19 -1806 35 -101 99 -185 184 -241 57 -38 90 -50 442 -162 132 -42 701 -224 1265 -405 564 -180 1084 -346 1155 -368 72 -22 362 -114 645 -206 558 -179 630 -196 749 -177 165 27 267 129 316 316 13 53 15 321 15 2410 0 2572 4 2397 -58 2523 -56 115 -184 223 -310 262 -63 20 -97 20 -2036 20l-1971 0 -66 -24z"
        android:fillColor="#ffffff" />
    <path
        android:pathData="M498 2820C322 2790 207 2702 128 2534L95 2465 92 1476C90 496 90 486 110 424 155 289 255 178 389 112l76 -37 1998 -3 1997 -2 63 21c160 53 293 193 338 357 17 59 19 106 19 407 0 369 -4 404 -56 507 -55 109 -179 205 -304 237 -25 7 -54 16 -65 21 -11 5 -206 68 -433 140 -227 72 -677 214 -1000 316 -323 102 -623 197 -667 211 -44 14 -343 108 -665 210 -322 102 -691 218 -820 259 -240 76 -271 81 -372 64z"
        android:fillColor="#ffffff" />
</group>
</vector>

Answer 4

这比使用矢量路径更可调

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/rectangle">
        <shape android:shape="rectangle">
            <solid android:color="#E4E4AA" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item
        android:bottom="445dp"
        android:right="300dp">
        <shape android:shape="rectangle">
            <solid android:color="#62AA1C" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item
        android:bottom="300dp"
        android:left="33dp">
        <shape android:shape="rectangle">
            <solid android:color="#62AA1C" />
            <corners android:radius="50dp" />
        </shape>
    </item>


    <item
        android:left="300dp"
        android:top="580dp">
        <shape android:shape="rectangle">
            <solid android:color="#62AA1C" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item
        android:right="30dp"
        android:top="435dp">
        <shape android:shape="rectangle">
            <solid android:color="#62AA1C" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item
        android:bottom="300dp"
        android:left="-100dp"
        android:right="-300dp"
        android:top="305dp">
        <rotate
            android:fromDegrees="25"
            android:pivotX="20%"
            android:pivotY="65%">

            <shape android:shape="rectangle">
                <solid android:color="#E4E4AA" />
            </shape>
        </rotate>
    </item>

</layer-list>

如何为登录屏幕背景设计倾斜对角线或圆角矩形可绘制资源文件？

How to design tilted diagonal or rounded rectangle drawable resource file for login screen background?

android

layout

android-drawable