原文出處:http://www.ccbu.cc/android/gradientdrawable
GradientDrawable可以在res/drawable目錄下以xml文件用<shape>標(biāo)簽來定義巍耗⊙福看看官方文檔給出的xml定義說明吧。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
上述定義中列舉了<shape>常用的屬性及可用的子元素。其中忌愚,shape是根元素筛婉,其屬性android:shape="rectangle"
定義了shape的形狀為矩形。android:shape
可選的參數(shù)包括“rectangle,oval,line和ring剔猿。當(dāng)android:shape="ring"
時视译,shape有以下一些屬性可用使用:
- android:innerRadius
尺寸。 內(nèi)環(huán)的半徑艳馒。一個尺寸值(dip等等)或者一個尺寸資源憎亚。 - android:innerRadiusRatio
Float類型员寇。這個值表示內(nèi)部環(huán)的比例,例如,如果android:innerRadiusRatio = " 5 ",那么內(nèi)部的半徑等于環(huán)的寬度除以5第美。這個值會被android:innerRadius重寫蝶锋。 默認(rèn)值是9。 - android:thickness
尺寸什往。環(huán)的厚度扳缕,是一個尺寸值或尺寸的資源。 - android:thicknessRatio
Float類型别威。厚度的比例躯舔。例如,如果android:thicknessRatio= " 2 ",然后厚度等于環(huán)的寬度除以2。這個值是被android:innerRadius重寫省古, 默認(rèn)值是3粥庄。 - android:useLevel
Boolean類型。如果用在 LevelListDrawable里豺妓,那么就是true惜互。如果通常不出現(xiàn)則為false。
下面一個一個的了解shape的各個子元素琳拭。
corners
<corners>表示的是矩形的四個角弧度训堆,只能用在android:shape = "rectangle"
的時候,可用的屬性包括:
<corners
android:radius="integer"http://Dimension白嘁。圓角的半徑坑鱼。會被下面每個特定的圓角屬性重寫。
android:topLeftRadius="integer"http://Dimension絮缅。top-left 圓角的半徑鲁沥。
android:topRightRadius="integer"http://Dimension。top-right 圓角的半徑盟蚣。
android:bottomLeftRadius="integer"http://Dimension黍析。 bottom-left圓角的半徑。
android:bottomRightRadius="integer"http://Dimension屎开。bottom-right圓角的半徑阐枣。
/>
gradient
<gradient>表示漸變顏色填充。
<gradient
android:angle="integer"http://Integer 漸變的角度奄抽。0 代表從 left 到 right蔼两。90 代表bottom到 top。必須是45的倍數(shù)逞度,默認(rèn)為0额划。
android:centerX="integer"http://Float 漸變中心的相對X坐標(biāo),在0到1.0之間档泽。
android:centerY="integer"http://Float 漸變中心的相對Y坐標(biāo)俊戳,在0到1.0之間揖赴。
android:centerColor="integer"http://Color 可選的顏色值∫痔ィ基于startColor和endColor之間燥滑。
android:endColor="color"http://Color 結(jié)束的顏色。
android:gradientRadius="integer"http://Float 漸變的半徑阿逃。只有在android:type="radial"才使用铭拧。
android:startColor="color"http://Color 開始的顏色值。
android:type=["linear" | "radial" | "sweep"]//漸變的模式恃锉。
android:useLevel=["true" | "false"] //Boolean搀菩。如果在LevelListDrawable中使用,則為true破托。
/>
其中android:type
表示漸變的模式肪跋,可選的參數(shù)包括:
- "linear" 線形漸變。這也是默認(rèn)的模式
- "radial" 輻射漸變炼团。startColor即輻射中心的顏色
- "sweep" 掃描線漸變澎嚣。
padding
<padding>表示內(nèi)容與視圖邊界的距離,屬性包括:
<padding
android:left="integer"http://Dimension瘟芝。左邊填充距離。
android:top="integer"http://Dimension褥琐。頂部填充距離锌俱。
android:right="integer"http://Dimension。右邊填充距離敌呈。
android:bottom="integer"http://Dimension贸宏。底部填充距離。
/>
size
<size>表示shape的大小磕洪,屬性包括:
<size
android:width="integer"http://Dimension吭练。shape的高度。
android:height="integer"http://Dimension析显。shape的寬度鲫咽。
/>
solid
<solid>表示shape填充的顏色,與<gradient>的漸變功能一樣只是此處填充的是純色谷异。所以一般情況下<gradient>和<solid>只用使用一個就行了分尸。其屬性包括:
<solid
android:color="color"http://Color。顏色值歹嘹,十六進(jìn)制數(shù)箩绍,或者一個Color資源。
/>
stroke
<stroke>用來表示shape的邊框畫筆尺上,當(dāng)android:shape="line"
的時候材蛛,必須設(shè)置該元素圆到。
<stroke
android:width="integer"http://Dimension。筆畫的粗細(xì)卑吭。
android:color="color"http://Color构资。筆畫的顏色。
android:dashWidth="integer"http://Dimension陨簇。每畫一條線的長度吐绵。只有當(dāng) android:dashGap也設(shè)置了才有效。
android:dashGap="integer"http://Dimension河绽。每畫一條線就間隔多少己单。只有當(dāng)android:dashWidth也設(shè)置了才有效。
/>
好了耙饰,下面我們用GradientDrawable來實現(xiàn)一個自定義的數(shù)字輸入鍵盤纹笼。此處仿iphone的鎖屏節(jié)目的圓形數(shù)字輸入按鈕。正常狀態(tài)下苟跪,是一個有邊框廷痘,中間透明圓環(huán),按下時件已,中間填充顏色笋额。
先實現(xiàn)按鈕的正常狀態(tài),在res/drawable下創(chuàng)建number_button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid
android:color="@android:color/transparent"
/>
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<stroke
android:width="1dp"
android:color="#df1ea353"
/>
</shape>
再定義按下狀態(tài)篷扩,number_button_press.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid
android:color="#1ea353"
/>
<padding
android:left="15dp"
android:top="0dp"
android:right="15dp"
android:bottom="0dp"
/>
<stroke
android:width="1dp"
android:color="#df1ea353"
/>
</shape>
正常狀態(tài)和按下狀態(tài)都有了兄猩,我們用他們來實現(xiàn)一個簡單的按鈕的背景吧,和平時我們自定義按鈕一樣鉴未,通過selector來進(jìn)行定義枢冤。在res/drawable目錄下創(chuàng)建number_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/number_button_press"/>
<item android:drawable="@drawable/number_button_normal"/>
</selector>
OK,萬事具備,就差應(yīng)用到按鈕了铜秆。ok,我們創(chuàng)建一個layout文件如下淹真。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<Button
style="@style/number_button"
android:id="@+id/nkb_1"
android:text="1"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_2"
android:text="2"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_3"
android:text="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
style="@style/number_button"
android:id="@+id/nkb_4"
android:text="4"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_5"
android:text="5"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_6"
android:text="6"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
style="@style/number_button"
android:id="@+id/nkb_7"
android:text="7"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_8"
android:text="8"/>
<Button
style="@style/number_button"
android:id="@+id/nkb_9"
android:text="9"/>
</LinearLayout>
<Button
style="@style/number_button"
android:id="@+id/nkb_0"
android:text="0"/>
</LinearLayout>
此處,說一個小小的技巧连茧,因為此處有10個按鈕核蘸,每個按鈕的樣式都是一樣的,所以梅屉,我給按鈕建了一個樣式值纱,在要應(yīng)用的地方直接使用style="@style/number_button"
制定樣式就行了,看看樣式把坯汤。按鈕樣式定義在res/values/styles.xml中虐唠。
<style name="wrap_wrap">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="number_button" parent="wrap_wrap">
<item name="android:background">@drawable/login_passwd_btn</item>
<item name="android:textColor">#333333</item>
<item name="android:textSize">@dimen/login_passwd_btn_text_size</item>
<item name="android:minHeight">60dp</item>
<item name="android:minWidth">60dp</item>
<item name="android:layout_marginLeft">8dp</item>
<item name="android:layout_marginRight">8dp</item>
<item name="android:layout_marginBottom">8dp</item>
</style>
好了,看看效果吧