一個應用,應該保持一套統一的樣式,包括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中使用
- android:type 漸變的類型
- 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目錄下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?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設置內容區域離邊界的間距 --> <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp" /> <!-- corners設置圓角,只適用於rectangle --> <corners android:radius="200dp" /> <!-- stroke設置描邊 --> <stroke android:width="2dp" android:color="@android:color/darker_gray" android:dashGap="4dp" android:dashWidth="4dp" /> </shape> |
接着在要使用的view裏引用就可以了,例如本例中用做TextView的background:
1
2
3
4
5
6
7
8
|
<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用來畫橢圓,而在實際應用中,更多是畫正圓,比如消息提示,圓形按鈕等,下圖是一些例子:
上面的效果圖應用了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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?xml version="1.0" encoding="utf-8"?><!-- android:shape指定形狀類型,默認爲rectangle --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- padding設置內間距 --> <padding android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp" /> <!-- size設置形狀的大小 --> <size android:width="40dp" android:height="40dp" /> <!-- gradient設置漸變 --> <gradient android:endColor="#000000" android:gradientRadius="40dp" android:startColor="#FFFFFF" android:type="radial" /> </shape> |
引用的代碼:
1
2
3
4
5
6
7
8
9
|
<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特性組合來實現的,先看虛線的代碼:
1 2 3 4 5 6 7 8 9 10 11 12 | <?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> |
畫線時,有幾點特性必須要知道的:
- 只能畫水平線,畫不了豎線;
- 線的高度是通過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兩項特性。
以下爲第四個圖的代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?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>
|
如果想讓這個環形旋轉起來,變成可用的進度條,則只要在shape外層包多一個rotate元素就可以了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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>
|
結尾
shape篇就講到這裏了,代碼也已經放上github,地址:
https://github.com/keeganlee/kstyle.git