使用XML Android中的layerlist自定义形状

Question

如何使用XML中的layer-list创建以下自定义可绘制形状。

Answer 1

经过几个小时的尝试，我终于可以使用layer-list创建这个自定义形状了。

<强> 1。 /res/drawable/custom_shape_one.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Rectangle -->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="80dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:right="80dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#F8F7F7" />
        </shape>
    </item>

    <item
        android:left="135dp">
        <rotate android:fromDegrees="67">
            <shape android:shape="rectangle">
                <solid android:color="#F8F7F7" />
            </shape>
        </rotate>
    </item>

    <!-- Top Border -->
    <item
        android:right="61dp"
        android:bottom="78.8dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Right-Diagonal Border -->
    <item
        android:left="220dp">
        <rotate android:fromDegrees="67">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

</layer-list>

使用：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape_one"/>

<强>输出：

<强> 2。 /res/drawable/custom_shape_two.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Rectangle -->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="80dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:left="80dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#F8F7F7" />
        </shape>
    </item>

    <item
        android:right="135dp">
        <rotate android:fromDegrees="293">
            <shape android:shape="rectangle">
                <solid android:color="#F8F7F7" />
            </shape>
        </rotate>
    </item>

    <!-- Top Border -->
    <item
        android:left="61dp"
        android:bottom="78.8dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Left-Diagonal Border -->
    <item
        android:right="220dp">
        <rotate android:fromDegrees="293">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

</layer-list>

使用：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape_two"/>

<强>输出：

第3。 /res/drawable/custom_shape.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:right="90dp">
        <rotate android:fromDegrees="67">
            <shape android:shape="rectangle">
                <solid android:color="#F8F7F7" />
            </shape>
        </rotate>
    </item>
    <item
        android:left="90dp">
        <rotate android:fromDegrees="293">
            <shape android:shape="rectangle">
                <solid android:color="#F8F7F7" />
            </shape>
        </rotate>
    </item>

    <item
        android:right="200dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#F8F7F7" />
        </shape>
    </item>

    <item
        android:left="200dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#F8F7F7" />
        </shape>
    </item>

    <!-- Top-Right Line -->
    <item
        android:right="180dp"
        android:bottom="58.5dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Top-Right Line -->
    <item
        android:left="180dp"
        android:bottom="58.5dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Left-Diagonal Line -->
    <item
        android:right="26dp">
        <rotate android:fromDegrees="67">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

    <!-- Right-Diagonal Line -->
    <item
        android:left="26dp">
        <rotate android:fromDegrees="293">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

</layer-list>

使用：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape"/>

<强>输出：

希望这会有所帮助〜