淺談Android樣式開發之shape

引言

　　在Android開發中我們很多情況都是使用圖片來展示相關效果，今天我就來詳細介紹下Android下使用Shape來進行簡單UI的開發。一方面這些是Android開發的基礎，另一方面這方面的知識可以在一定程度上減少圖片的使用，降低App的體積。下面我就來詳細介紹Shape的相關知識。

注意點：一般用shape定義的xml文件存放在drawable目錄下，若項目沒有該目錄則新建一個，而不要將它放到drawable-hdpi等目錄中。

Shape支持的類型形狀

　   rectangle: 矩形，默認的形狀，可以畫出直角矩形、圓角矩形、弧形等

　　oval: 橢圓形，用得比較多的是畫正圓

　　line: 線形，可以畫實線和虛線

　　ring: 環形，可以畫環形進度條

　　下面我就依次開始介紹

1、rectangle

　　這種類型應該是我們使用的最多的類型了，一些控件的背景、布局的背景都可以使用它來完成。

　　我們來看詳細的介紹：

　　solid: 設置形狀填充的顏色，只有android:color一個屬性

• • android:color 填充的顏色

• padding: 設置內容與形狀邊界的內間距，可分別設置左右上下的距離

  • android:left 左內間距
  • android:right 右內間距
  • android:top 上內間距
  • android:bottom 下內間距

• gradient: 設置形狀的漸變顏色，可以是線性漸變、輻射漸變、掃描性漸變

  • android:type 漸變的類型
    • linear 線性漸變，默認的漸變類型
    • radial 放射漸變，設置該項時，android:gradientRadius也必須設置
    • sweep 掃描性漸變
  • android:startColor 漸變開始的顏色
  • android:endColor 漸變結束的顏色
  • android:centerColor 漸變中間的顏色
  • android:angle 漸變的角度，線性漸變時才有效，必須是45的倍數，0表示從左到右，90表示從下到上
  • android:centerX 漸變中心的相對X坐標，放射漸變時才有效，在0.0到1.0之間，默認為0.5，表示在正中間
  • android:centerY 漸變中心的相對X坐標，放射漸變時才有效，在0.0到1.0之間，默認為0.5，表示在正中間
  • android:gradientRadius 漸變的半徑，只有漸變類型為radial時才使用
  • android:useLevel 如果為true，則可在LevelListDrawable中使用

• corners: 設置圓角，只適用於rectangle類型，可分別設置四個角不同半徑的圓角，當設置的圓角半徑很大時，比如200dp，就可變成弧形邊了

  • android:radius 圓角半徑，會被下面每個特定的圓角屬性重寫
  • android:topLeftRadius 左上角的半徑
  • android:topRightRadius 右上角的半徑
  • android:bottomLeftRadius 左下角的半徑
  • android:bottomRightRadius 右下角的半徑

• stroke: 設置描邊，可描成實線或虛線。

• android:color 描邊的顏色
• android:width 描邊的寬度
• android:dashWidth 設置虛線時的橫線長度
• android:dashGap 設置虛線時的橫線之間的距離

　　下面我們來看一個例子：

<!-- android:shape指定形狀類型，默認為rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- solid指定形狀的填充色，只有android:color一個屬性 -->
    <solid android:color="#4097e6" />
    <!-- padding設置內容區域離邊界的間距 -->
    <padding
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp"
        android:top="15dp" />

    <!--漸變設置-->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:angle="270"
        android:type="linear" />

    <!-- corners設置圓角，只適用於rectangle
         數值較大時,就變成了弧邊形狀例如>=200時
     -->
    <corners android:radius="15dp" />
    <!-- stroke設置描邊 -->
    <stroke
        android:width="2dp"
        android:color="#ff8900"
        android:dashGap="4dp"
        android:dashWidth="4dp" />
</shape>

　　效果圖如下：

　　

2、oval

　　oval用來畫橢圓，而在實際應用中，更多是畫正圓，比如消息提示，圓形按鈕等，下圖是一些例子：

　　size: 設置形狀默認的大小，可設置寬度和高度

• android:width 寬度
• android:height 高度

　　如果你使用TextView之類的設置橢圓，size默認會是View的寬度和高度。

　　下面來看一個例子：

<!--橢圓-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <!--設置圖形的尺寸
        不過默認獲取的還是View的寬度和高度-->
    <size android:width="60dp"
        android:height="60dp" />

    <solid android:color="#4097e6" />

    <!--漸變效果
        注意此處使用了gradientRadius這個屬性值
        只有type="radial"時才有效
    -->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:gradientRadius="50dp"
        android:type="radial"/>

</shape>

　　效果圖如下：

　　

3、line

　　通過Shape我們還可以設置分割線。不過一般我使用線都是直接View的。通過設置stroke我們可以設置線的樣式（顏色、虛線還是實線等）。例子如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- 實際顯示的線 -->
    <stroke
        android:width="1dp"
        android:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" />
    <!-- 形狀的高度 -->
    <size android:height="4dp" />
</shape>

　　注意點：畫線時，有幾點特性必須要知道的：

1. 只能畫水平線，畫不了豎線；
2. 線的高度是通過stroke的android:width屬性設置的；
3. size的android:height屬性定義的是整個形狀區域的高度；
4. size的height必須大於stroke的width，否則，線無法顯示；
5. 線在整個形狀區域中是居中顯示的；
6. 線左右兩邊會留有空白間距，線越粗，空白越大；
7. 引用虛線的view需要添加屬性android:layerType，值設為"software"，否則顯示不了虛線。

4、ring

　  首先，shape根元素有些屬性只適用於ring類型，先過目下這些屬性吧：

• android:innerRadius  內環的半徑
• android:innerRadiusRatio  浮點型，以環的寬度比率來表示內環的半徑，默認為3，表示內環半徑為環的寬度除以3，該值會被android:innerRadius覆蓋
• android:thickness  環的厚度
• android:thicknessRatio  浮點型，以環的寬度比率來表示環的厚度，默認為9，表示環的厚度為環的寬度除以9，該值會被android:thickness覆蓋
• android:useLevel  一般為false，否則可能環形無法顯示，只有作為LevelListDrawable使用時才設為true

　　下面我們來看一個例子：

<!--圓環-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="20dp"
    android:useLevel="false">

    <!--填充色-->
    <solid android:color="#4097e6" />

    <!--漸變色-->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:type="sweep" />

    <!--描邊會讓內圓和外圓都有邊框-->
    <stroke
        android:width="1dp"
        android:color="#ff8900" />

</shape>

　　效果圖如下：

　　

參考文檔

　　http://keeganlee.me/post/android/20150830

　　http://blog.csdn.net/harvic880925/article/details/41850723