在XML中使用圖層列表的自定義形狀Andorid

Question

如何使用XML中的圖層列表創建以下自定義可繪製圖形。

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> 

USE：

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

OUTPUT：

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> 

USE：

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

OUTPUT：

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"/> 

OUTPUT：

希望這將有助於〜