[英]Custom Shape using layerlist in XML Android
After couple of hours trying finally I am able to create this custom shape using layer-list
. 经过几个小时的尝试,终于可以使用layer-list
创建此自定义形状。
1. /res/drawable/custom_shape_one.xml: 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: 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: 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>
USE: 采用:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/custom_shape"/>
OUTPUT: 输出:
Hope this will help~ 希望这会有所帮助〜
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.