ANDROID樣式的開發(fā):SHAPE篇

轉(zhuǎn)載自Keegan小鋼并標(biāo)明原文鏈接：http://keeganlee.me/post/android/20150830微信訂閱號(hào)：keeganlee_me寫于2015-08-30
Android樣式的開發(fā):shape篇Android樣式的開發(fā):selector篇Android樣式的開發(fā):layer-list篇Android樣式的開發(fā):drawable匯總篇Android樣式的開發(fā):View Animation篇Android樣式的開發(fā):Property Animation篇Android樣式的開發(fā):Style篇
一個(gè)應(yīng)用，應(yīng)該保持一套統(tǒng)一的樣式，包括Button、EditText、ProgressBar、Toast、Checkbox等各種控件的樣式，還包括控件間隔、文字大小和顏色、陰影等等。web的樣式用css來定義，而android的樣式主要?jiǎng)t是通過shape、selector、layer-list、level-list、style、theme等組合實(shí)現(xiàn)。我將用一系列文章，循序漸進(jìn)地講解樣式的每個(gè)方面該如何實(shí)現(xiàn)。第一個(gè)要講的就是shape，最基礎(chǔ)的形狀定義工具。
一般用shape定義的xml文件存放在drawable目錄下，若項(xiàng)目沒有該目錄則新建一個(gè)，而不要將它放到drawable-hdpi等目錄中。
使用shape可以自定義形狀，可以定義下面四種類型的形狀，通過android:shape屬性指定：
rectangle: 矩形，默認(rèn)的形狀，可以畫出直角矩形、圓角矩形、弧形等
oval: 橢圓形，用得比較多的是畫正圓
line: 線形，可以畫實(shí)線和虛線
ring: 環(huán)形，可以畫環(huán)形進(jìn)度條

rectangle

rectangle是默認(rèn)的形狀，也是用得最多的形狀，一些文字背景、按鈕背景、控件或布局背景等，以下是一些簡(jiǎn)單的例子：

padding: 設(shè)置內(nèi)容與形狀邊界的內(nèi)間距，可分別設(shè)置左右上下的距離android:left 左內(nèi)間距
android:right 右內(nèi)間距
android:top 上內(nèi)間距
android:bottom 下內(nèi)間距

gradient: 設(shè)置形狀的漸變顏色，可以是線性漸變、輻射漸變、掃描性漸變android:type 漸變的類型linear 線性漸變，默認(rèn)的漸變類型
radial 放射漸變，設(shè)置該項(xiàng)時(shí)，android:gradientRadius也必須設(shè)置
sweep 掃描性漸變

android:startColor 漸變開始的顏色
android:endColor 漸變結(jié)束的顏色
android:centerColor 漸變中間的顏色
android:angle 漸變的角度，線性漸變時(shí)才有效，必須是45的倍數(shù)，0表示從左到右，90表示從下到上
android:centerX 漸變中心的相對(duì)X坐標(biāo)，放射漸變時(shí)才有效，在0.0到1.0之間，默認(rèn)為0.5，表示在正中間
android:centerY 漸變中心的相對(duì)X坐標(biāo)，放射漸變時(shí)才有效，在0.0到1.0之間，默認(rèn)為0.5，表示在正中間
android:gradientRadius 漸變的半徑，只有漸變類型為radial時(shí)才使用
android:useLevel 如果為true，則可在LevelListDrawable中使用

corners: 設(shè)置圓角，只適用于rectangle類型，可分別設(shè)置四個(gè)角不同半徑的圓角，當(dāng)設(shè)置的圓角半徑很大時(shí)，比如200dp，就可變成弧形邊了android:radius 圓角半徑，會(huì)被下面每個(gè)特定的圓角屬性重寫
android:topLeftRadius 左上角的半徑
android:topRightRadius 右上角的半徑
android:bottomLeftRadius 左下角的半徑
android:bottomRightRadius 右下角的半徑

stroke: 設(shè)置描邊，可描成實(shí)線或虛線。android:color 描邊的顏色
android:width 描邊的寬度
android:dashWidth 設(shè)置虛線時(shí)的橫線長(zhǎng)度
android:dashGap 設(shè)置虛線時(shí)的橫線之間的距離

接下來說下實(shí)際怎么使用。以下是加了虛線描邊的矩形的代碼，文件命名為bg_rectangle_with_stroke_dash.xml，放在drawable目錄下：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#2F90BD" /> <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp" /> <corners android:radius="200dp" /> <stroke android:width="2dp" android:color="@android:color/darker_gray" android:dashGap="4dp" android:dashWidth="4dp" /></shape>

接著在要使用的view里引用就可以了，例如本例中用做TextView的background：
<TextView android: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用來畫橢圓，而在實(shí)際應(yīng)用中，更多是畫正圓，比如消息提示，圓形按鈕等，下圖是一些例子：

數(shù)字0是默認(rèn)的橢圓，只加了solid填充顏色，數(shù)字1則加了上下左右4dp的padding，后面的數(shù)字都是正圓，是通過設(shè)置size的同樣大小的寬高實(shí)現(xiàn)的，也可以通過設(shè)置控件的寬高一致大小來實(shí)現(xiàn)。數(shù)字3加了描邊，數(shù)字4是鏤空描邊，數(shù)字5是虛線描邊，數(shù)字6用了radial漸變。注意，使用radial漸變時(shí)，必須指定漸變的半徑，即android:gradientRadius屬性。
以下是漸變的代碼實(shí)現(xiàn)，文件為bg_oval_with_gradient.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <padding android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp" /> <size android:width="40dp" android:height="40dp" /> <gradient android:endColor="#000000" android:gradientRadius="40dp" android:startColor="#FFFFFF" android:type="radial" /></shape>

引用的代碼：
<TextView android: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特性組合來實(shí)現(xiàn)的，先看虛線的代碼：
<?xml version="1.0" encoding="utf-8"?><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>

畫線時(shí)，有幾點(diǎn)特性必須要知道的：
只能畫水平線，畫不了豎線；
線的高度是通過stroke的android:width屬性設(shè)置的；
size的android:height屬性定義的是整個(gè)形狀區(qū)域的高度；
size的height必須大于stroke的width，否則，線無法顯示；
線在整個(gè)形狀區(qū)域中是居中顯示的；
線左右兩邊會(huì)留有空白間距，線越粗，空白越大；
引用虛線的view需要添加屬性android:layerType，值設(shè)為"software"，否則顯示不了虛線。

ring

首先，shape根元素有些屬性只適用于ring類型，先過目下這些屬性吧：
android:innerRadius 內(nèi)環(huán)的半徑
android:innerRadiusRatio 浮點(diǎn)型，以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑，默認(rèn)為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3，該值會(huì)被android:innerRadius覆蓋
android:thickness 環(huán)的厚度
android:thicknessRatio 浮點(diǎn)型，以環(huán)的寬度比率來表示環(huán)的厚度，默認(rèn)為9，表示環(huán)的厚度為環(huán)的寬度除以9，該值會(huì)被android:thickness覆蓋
android:useLevel 一般為false，否則可能環(huán)形無法顯示，只有作為L(zhǎng)evelListDrawable使用時(shí)才設(shè)為true

第一個(gè)圖只添加了solid；第二個(gè)圖只添加了gradient，類型為sweep；第三個(gè)圖只添加了stroke；第四個(gè)圖添加了gradient和stroke兩項(xiàng)特性。以下為第四個(gè)圖的代碼：
<?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"> <gradient android:endColor="#2F90BD" android:startColor="#FFFFFF" android:type="sweep" /> <stroke android:width="1dp" android:color="@android:color/black" /></shape>

如果想讓這個(gè)環(huán)形旋轉(zhuǎn)起來，變成可用的進(jìn)度條，則只要在shape外層包多一個(gè)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"> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false"> <gradient android:endColor="#2F90BD" android:startColor="#FFFFFF" android:type="sweep" /> </shape></rotate>

結(jié)尾

shape篇就講到這里了，代碼也已經(jīng)放上github，地址：https://github.com/keeganlee/kstyle.git