一個應(yīng)用,應(yīng)該保持一套統(tǒng)一的樣式,包括Button、EditText、ProgressBar、Toast、Checkbox等各種控件的樣式,還包括控件間隔、文字大小和顏色、陰影等等。web的樣式用css來定義,而android的樣式主要則是通過shape、selector、layer-list、level-list、style、theme等組合實現(xiàn)。我將用一系列文章,循序漸進地講解樣式的每個方面該如何實現(xiàn)。第一個要講的就是shape,最基礎(chǔ)的形狀定義工具。
一般用shape定義的xml文件存放在drawable目錄下,若項目沒有該目錄則新建一個,而不要將它放到drawable-hdpi等目錄中。
使用shape可以自定義形狀,可以定義下面四種類型的形狀,通過android:shape屬性指定:
rectangle: 矩形,默認的形狀,可以畫出直角矩形、圓角矩形、弧形等oval: 橢圓形,用得比較多的是畫正圓line: 線形,可以畫實線和虛線ring: 環(huán)形,可以畫環(huán)形進度條
rectangle
rectangle是默認的形狀,也是用得最多的形狀,一些文字背景、按鈕背景、控件或布局背景等,以下是一些簡單的例子:
實現(xiàn)上面的那些效果,都用到了以下這些特性:
solid: 設(shè)置形狀填充的顏色,只有android:color一個屬性
android:color?填充的顏色
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?線性漸變,默認的漸變類型radial?放射漸變,設(shè)置該項時,android:gradientRadius也必須設(shè)置sweep?掃描性漸變android:startColor?漸變開始的顏色android:endColor?漸變結(jié)束的顏色android:centerColor?漸變中間的顏色android:angle?漸變的角度,線性漸變時才有效,必須是45的倍數(shù),0表示從左到右,90表示從下到上android:centerX?漸變中心的相對X坐標(biāo),放射漸變時才有效,在0.0到1.0之間,默認為0.5,表示在正中間android:centerY?漸變中心的相對X坐標(biāo),放射漸變時才有效,在0.0到1.0之間,默認為0.5,表示在正中間android:gradientRadius?漸變的半徑,只有漸變類型為radial時才使用android:useLevel?如果為true,則可在LevelListDrawable中使用
corners: 設(shè)置圓角,只適用于rectangle類型,可分別設(shè)置四個角不同半徑的圓角,當(dāng)設(shè)置的圓角半徑很大時,比如200dp,就可變成弧形邊了
android:radius?圓角半徑,會被下面每個特定的圓角屬性重寫android:topLeftRadius?左上角的半徑android:topRightRadius?右上角的半徑android:bottomLeftRadius?左下角的半徑android:bottomRightRadius?右下角的半徑
stroke: 設(shè)置描邊,可描成實線或虛線。
android:color?描邊的顏色android:width?描邊的寬度android:dashWidth?設(shè)置虛線時的橫線長度android:dashGap?設(shè)置虛線時的橫線之間的距離
接下來說下實際怎么使用。以下是加了虛線描邊的矩形的代碼,文件命名為bg_rectangle_with_stroke_dash.xml,放在drawable目錄下
接著在要使用的view里引用就可以了,例如本例中用做TextView的background
oval
oval用來畫橢圓,而在實際應(yīng)用中,更多是畫正圓,比如消息提示,圓形按鈕等,下圖是一些例子:
上面的效果圖應(yīng)用了solid、padding、stroke、gradient、size幾個特性。size是用來設(shè)置形狀大小的,如下:
size: 設(shè)置形狀默認的大小,可設(shè)置寬度和高度android:width?寬度android:height?高度
數(shù)字0是默認的橢圓,只加了solid填充顏色,數(shù)字1則加了上下左右4dp的padding,后面的數(shù)字都是正圓,是通過設(shè)置size的同樣大小的寬高實現(xiàn)的,也可以通過設(shè)置控件的寬高一致大小來實現(xiàn)。數(shù)字3加了描邊,數(shù)字4是鏤空描邊,數(shù)字5是虛線描邊,數(shù)字6用了radial漸變。注意,使用radial漸變時,必須指定漸變的半徑,即android:gradientRadius屬性。
以下是漸變的代碼實現(xiàn),文件為bg_oval_with_gradient.xml:
line
line主要用于畫分割線,是通過stroke和size特性組合來實現(xiàn)的,先看虛線的代碼:
畫線時,有幾點特性必須要知道的:
只能畫水平線,畫不了豎線;線的高度是通過stroke的android:width屬性設(shè)置的;size的android:height屬性定義的是整個形狀區(qū)域的高度;size的height必須大于stroke的width,否則,線無法顯示;線在整個形狀區(qū)域中是居中顯示的;線左右兩邊會留有空白間距,線越粗,空白越大;引用虛線的view需要添加屬性android:layerType,值設(shè)為"software",否則顯示不了虛線。
ring
首先,shape根元素有些屬性只適用于ring類型,先過目下這些屬性吧:
android:innerRadius?內(nèi)環(huán)的半徑android:innerRadiusRatio?浮點型,以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑,默認為3,表示內(nèi)環(huán)半徑為環(huán)的寬度除以3,該值會被android:innerRadius覆蓋android:thickness?環(huán)的厚度android:thicknessRatio?浮點型,以環(huán)的寬度比率來表示環(huán)的厚度,默認為9,表示環(huán)的厚度為環(huán)的寬度除以9,該值會被android:thickness覆蓋android:useLevel?一般為false,否則可能環(huán)形無法顯示,只有作為LevelListDrawable使用時才設(shè)為true
第一個圖只添加了solid;第二個圖只添加了gradient,類型為sweep;第三個圖只添加了stroke;第四個圖添加了gradient和stroke兩項特性。
如果想讓這個環(huán)形旋轉(zhuǎn)起來,變成可用的進度條,則只要在shape外層包多一個rotate元素就可以了。