Thanks to:轉載自Keegan小鋼
原文鏈接：http://keeganlee.me/post/android/20150830

一個應用，應該保持一套統一的樣式，包括Button、EditText、ProgressBar、Toast、Checkbox等各種控件的樣式，還包括控件間隔、文字大小和顏色、陰影等等。web的樣式用css來定義，而android的樣式主要則是通過shape、selector、layer-list、level-list、style、theme等組合實現。我將用一系列文章，循序漸進地講解樣式的每個方面該如何實現。第一個要講的就是shape，最基礎的形狀定義工具。

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

使用shape可以自定義形狀，可以定義下面四種類型的形狀，通過android:shape屬性指定：

• rectangle: 矩形，默認的形狀，可以畫出直角矩形、圓角矩形、弧形等
• oval: 橢圓形，用得比較多的是畫正圓
• line: 線形，可以畫實線和虛線
• ring: 環形，可以畫環形進度條

rectangle

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?設置虛線時的橫線之間的距離

接下來說下實際怎么使用。以下是加了虛線描邊的矩形的代碼，文件命名為bg_rectangle_with_stroke_dash.xml，放在drawable目錄下：

<?xml version="1.0" encoding="utf-8"?> <!-- android:shape指定形狀類型，默認為rectangle --> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- solid指定形狀的填充色，只有android:color一個屬性 --><solid android:color="#2F90BD" /><!-- padding設置內容區域離邊界的間距 --><paddingandroid:bottom="12dp"android:left="12dp"android:right="12dp"android:top="12dp" /><!-- corners設置圓角，只適用于rectangle --><corners android:radius="200dp" /><!-- stroke設置描邊 --><strokeandroid:width="2dp"android:color="@android:color/darker_gray"android:dashGap="4dp"android:dashWidth="4dp" /> </shape>

接著在要使用的view里引用就可以了，例如本例中用做TextView的background：

<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:text="加了虛線描邊的矩形"android:textSize="16sp"android:textColor="@android:color/white"android:background="@drawable/bg_rectangle_with_stroke_dash" />

oval

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

上面的效果圖應用了solid、padding、stroke、gradient、size幾個特性。size是用來設置形狀大小的，如下：

• size: 設置形狀默認的大小，可設置寬度和高度
  • android:width?寬度
  • android:height?高度

數字0是默認的橢圓，只加了solid填充顏色，數字1則加了上下左右4dp的padding，后面的數字都是正圓，是通過設置size的同樣大小的寬高實現的，也可以通過設置控件的寬高一致大小來實現。數字3加了描邊，數字4是鏤空描邊，數字5是虛線描邊，數字6用了radial漸變。注意，使用radial漸變時，必須指定漸變的半徑，即android:gradientRadius屬性。

以下是漸變的代碼實現，文件為bg_oval_with_gradient.xml：

<?xml version="1.0" encoding="utf-8"?> <!-- android:shape指定形狀類型，默認為rectangle --> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!-- padding設置內間距 --><paddingandroid:bottom="4dp"android:left="4dp"android:right="4dp"android:top="4dp" /><!-- size設置形狀的大小 --><sizeandroid:width="40dp"android:height="40dp" /><!-- gradient設置漸變 --><gradientandroid:endColor="#000000"android:gradientRadius="40dp"android:startColor="#FFFFFF"android:type="radial" /> </shape>

引用的代碼：

<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:layout_margin="8dp"android:text="6"android:textSize="20sp"android:textColor="@android:color/black"android:background="@drawable/bg_oval_with_gradient" />

line

line主要用于畫分割線，是通過stroke和size特性組合來實現的，先看虛線的代碼：

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

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

只能畫水平線，畫不了豎線；

線的高度是通過stroke的android:width屬性設置的；

size的android:height屬性定義的是整個形狀區域的高度；

size的height必須大于stroke的width，否則，線無法顯示；

線在整個形狀區域中是居中顯示的；

線左右兩邊會留有空白間距，線越粗，空白越大；

引用虛線的view需要添加屬性android:layerType，值設為"software"，否則顯示不了虛線。

ring

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

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

第一個圖只添加了solid；第二個圖只添加了gradient，類型為sweep；第三個圖只添加了stroke；第四個圖添加了gradient和stroke兩項特性。
以下為第四個圖的代碼：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="3"android:shape="ring"android:thicknessRatio="9"android:useLevel="false"><gradientandroid:endColor="#2F90BD"android:startColor="#FFFFFF"android:type="sweep" /><strokeandroid:width="1dp"android:color="@android:color/black" /> </shape>

如果想讓這個環形旋轉起來，變成可用的進度條，則只要在shape外層包多一個rotate元素就可以了。

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android"android:fromDegrees="0"android:pivotX="50%"android:pivotY="50%"android:toDegrees="1080.0"><shapeandroid:innerRadiusRatio="3"android:shape="ring"android:thicknessRatio="8"android:useLevel="false"><gradientandroid:endColor="#2F90BD"android:startColor="#FFFFFF"android:type="sweep" /></shape> </rotate>

總結

以上是生活随笔為你收集整理的Android样式开发---shape的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。