[Android] 使用shape自訂形狀及陰影

shape可以定義下面四種類型的形狀：
    rectangle－矩形（直角矩形、圓角矩形），默認的形狀
    oval－橢圓形、圓形
    line－線形（實線、虛線）
    ring－環形、環形進度條

rectangle

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<shape
	android:shape="rectangle">
	<!--設定形狀的顏色-->
	<solid
	android:color="@color/colorPrimary"/>
	<!--設定圓角的尺寸-->
	<corners
	android:radius="5dp"/>
	<!--設定邊框-->
	<stroke
	android:width="2dp"
	android:color="@color/colorPrimaryDark"/>
	<!--設定內容與邊界的距離-->
	<padding
	android:top="15dp"
	android:right="15dp"
	android:bottom="15dp"
	android:left="15dp"/>
	</shape>
	</item>
	</selector>

view raw shape_rectangle.xml hosted with ❤ by GitHub

執行結果：

如果填色要填入漸層色的話，需要將solid標籤改成gradient標籤，用法如下：

	<!--設定形狀漸層色-->
	<gradient
	android:startColor="@color/colorPrimary"
	android:endColor="@color/colorAccent"
	android:angle="90"/>

view raw shape_rectangle.xml hosted with ❤ by GitHub

執行結果：

oval

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<shape
	android:shape="oval">
	<!--設定形狀的顏色-->
	<solid
	android:color="@color/colorPrimary"/>
	<!--設定形狀尺寸-->
	<size
	android:width="70dp"
	android:height="70dp"/>
	<!--設定邊框-->
	<stroke
	android:width="2dp"
	android:color="@color/colorPrimaryDark"/>
	<!--設定內容與邊界的距離-->
	<padding
	android:top="10dp"
	android:right="10dp"
	android:bottom="10dp"
	android:left="10dp"/>
	</shape>
	</item>
	</selector>

view raw shape_oval.xml hosted with ❤ by GitHub

執行結果：

oval和ring的漸層有三種類型（android:type）：linear（線性）、radial（放射性）、sweep（掃描）

如果漸層效果為radial（放射性）的話，必須加上android:gradientRadius屬性（指定漸層的半徑）。

	<!--設定形狀漸層色-->
	<gradient
	android:startColor="@color/colorPrimary"
	android:endColor="@color/colorAccent"
	android:gradientRadius="70dp"
	android:type="radial" />

view raw shape_oval.xml hosted with ❤ by GitHub

執行結果：

line

線的高度是透過stroke的android:width屬性設置，而size的android:height是定義整個形狀區域的高度，所以size的height必須大於stroke的width。

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<shape
	android:shape="line">
	<!--設定形狀的顏色-->
	<stroke
	android:color="@color/colorPrimary"
	android:width="2dp"/>
	<!--設定形狀區域的高度-->
	<size
	android:height="3dp"/>
	</shape>
	</item>
	</selector>

view raw shape_line.xml hosted with ❤ by GitHub

執行結果：

ring

屬於ring的屬性：
    android:innerRadius 內環的半徑
    android:thickness 環的厚度
    android:useLevel 一般設為false，要不然環可能會無法顯示

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<!--設定形狀的半徑、厚度-->
	<shape
	android:shape="ring"
	android:innerRadius="30dp"
	android:thickness="10dp"
	android:useLevel="false">
	<!--設定形狀的顏色-->
	<solid
	android:color="@color/colorPrimary"/>
	<!--設定邊框-->
	<stroke
	android:width="1dp"
	android:color="@color/colorAccent"/>
	</shape>
	</item>
	</selector>

view raw shape_ring.xml hosted with ❤ by GitHub

執行結果：

將環設計成環狀進度條的樣式：

1，在shape標籤外再加上rotate標籤

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<rotate
	android:fromDegrees="0"
	android:pivotX="50%"
	android:pivotY="50%"
	android:toDegrees="1080.0">
	<!--設定形狀的半徑、厚度-->
	<shape
	android:shape="ring"
	android:innerRadius="30dp"
	android:thickness="10dp"
	android:useLevel="false">
	<!--設定形狀的漸層-->
	<gradient
	android:startColor="@color/colorPrimary"
	android:endColor="@color/colorAccent"
	android:type="sweep"/>
	<!--設定邊框-->
	<stroke
	android:width="1dp"
	android:color="@color/colorAccent"/>
	</shape>
	</rotate>
	</item>
	</selector>

view raw shape_ring.xml hosted with ❤ by GitHub

rotate屬性：
    android:fromDegrees：開始旋轉的角度位置
    android:toDegrees：結束時轉到的角度位置
    android:pivotX：旋轉起點的X軸座標位置，可以是數值、百分比、百分比p
    android:pivotY：旋轉起點的Y軸座標位置，可以是數值、百分比、百分比p

2，在style.xml裡加上style樣式

	<style name="ring">
	<item name="android:layout_width">wrap_content</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:indeterminateDrawable">@drawable/shape_ring</item>
	</style>

view raw style.xml hosted with ❤ by GitHub

3，在activity_main.xml裡加上progressBar標籤

	<ProgressBar
	android:layout_width="100dp"
	android:layout_height="100dp"
	style="@style/ring"/>

view raw activity_main.xml hosted with ❤ by GitHub

執行結果：

Shape加上陰影的方法

將selector標籤改成layer-list標籤，並在原本形狀的item標籤上面再加上一組item標籤，作為陰影的樣式

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!--陰影部分-->
	<!--設置陰影左邊跟上面的offset-->
	<item
	android:left="3dp"
	android:top="3dp">
	<shape
	android:shape="rectangle">
	<!--設定陰影顏色-->
	<solid
	android:color="#56000000" />
	<!--設定圓角的尺寸-->
	<corners
	android:radius="5dp"/>
	</shape>
	</item>
	<!--物件部分-->
	<!--設置物件右邊跟下面的offset-->
	<item
	android:bottom="3dp"
	android:right="3dp">
	<shape
	android:shape="rectangle">
	<!--設定形狀的顏色-->
	<solid
	android:color="@color/colorPrimary"/>
	<!--設定圓角的尺寸-->
	<corners
	android:radius="5dp"/>
	<!--設定邊框-->
	<stroke
	android:width="2dp"
	android:color="@color/colorPrimaryDark"/>
	<!--設定內容與邊界的距離-->
	<padding
	android:top="15dp"
	android:right="15dp"
	android:bottom="15dp"
	android:left="15dp"/>
	</shape>
	</item>
	</layer-list>

view raw shape_retangle.xml hosted with ❤ by GitHub

一定要設置陰影和物件的offset，要不然陰影和物件會重疊，會看不到效果。
執行結果：

參考資料：Keegan小钢