Android中用Shape Drawable實現自訂介面

關於Shape使用的官方文檔：

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Android中常常使用shape來定義控制項的一些顯示內容，下面是Shape中的所有屬性及一個簡單的樣本：

 

<?xml version="1.0" encoding="utf-8"?><shape        xmlns:android="http://schemas.android.com/apk/res/android"        android:shape=["rectangle" | "oval" | "line" | "ring"] >        <corners                android:radius="integer"                android:topLeftRadius="integer"                android:topRightRadius="integer"                android:bottomLeftRadius="integer"                android:bottomRightRadius="integer" />        <gradient                android:angle="integer"                android:centerX="integer"                android:centerY="integer"                android:centerColor="integer"                android:endColor="color"                android:gradientRadius="integer"                android:startColor="color"                android:type=["linear" | "radial" | "sweep"]                android:useLevel=["true" | "false"] />        <padding                android:left="integer"                android:top="integer"                android:right="integer"                android:bottom="integer" />        <size                android:width="integer"                android:height="integer" />        <solid                android:color="color" />       <stroke              android:width="integer"                android:color="color"                android:dashWidth="integer"                android:dashGap="integer" /></shape>

下面是一個小樣本：

main.xml檔案內容如下：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"><shape>            <!-- 漸層 -->            <gradient android:endColor="#FFFFFF" android:gradientRadius="50" android:startColor="#ff8c00" android:type="radial"/>            <!-- 描邊 -->            <stroke android:dashGap="3dp" android:dashWidth="5dp" android:width="2dp" android:color="#dcdcdc" />            <!-- 圓角 -->            <corners android:radius="2dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item>    <item android:state_focused="true"><shape>            <gradient android:angle="270" android:endColor="#ffc2b7" android:startColor="#ffc2b7" />            <stroke android:width="2dp" android:color="#dcdcdc" />            <corners android:radius="2dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item>    <item><shape>            <solid android:color="#ff9d77" />            <stroke android:width="2dp" android:color="#fad3cf" />            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item></selector>

 

button_selector.xml內容如下：

 

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"><shape>            <!-- 漸層 -->            <gradient android:endColor="#FFFFFF" android:gradientRadius="50" android:startColor="#ff8c00" android:type="radial"/>            <!-- 描邊 -->            <stroke android:dashGap="3dp" android:dashWidth="5dp" android:width="2dp" android:color="#dcdcdc" />            <!-- 圓角 -->            <corners android:radius="2dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item>    <item android:state_focused="true"><shape>            <gradient android:angle="270" android:endColor="#ffc2b7" android:startColor="#ffc2b7" />            <stroke android:width="2dp" android:color="#dcdcdc" />            <corners android:radius="2dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item>    <item><shape>            <solid android:color="#ff9d77" />            <stroke android:width="2dp" android:color="#fad3cf" />            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item></selector>

 

如下：

 一般狀態：

 

按下狀態：