Android Drawable之GradientDrawable

原文出處: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>

好了,看看效果吧


device-2016-11-14-221948.png

device-2016-11-14-222001.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末惰聂,一起剝皮案震驚了整個濱河市疆偿,隨后出現(xiàn)的幾起案子咱筛,更是在濱河造成了極大的恐慌,老刑警劉巖杆故,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迅箩,死亡現(xiàn)場離奇詭異,居然都是意外死亡处铛,警方通過查閱死者的電腦和手機(jī)饲趋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來撤蟆,“玉大人奕塑,你說我怎么就攤上這事〖铱希” “怎么了龄砰?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長讨衣。 經(jīng)常有香客問我换棚,道長,這世上最難降的妖魔是什么反镇? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任固蚤,我火速辦了婚禮,結(jié)果婚禮上愿险,老公的妹妹穿的比我還像新娘颇蜡。我一直安慰自己,他們只是感情好辆亏,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鳖目,像睡著了一般扮叨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上领迈,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天彻磁,我揣著相機(jī)與錄音,去河邊找鬼狸捅。 笑死衷蜓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的尘喝。 我是一名探鬼主播磁浇,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼朽褪!你這毒婦竟也來了置吓?” 一聲冷哼從身側(cè)響起无虚,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎衍锚,沒想到半個月后友题,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡戴质,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年度宦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片告匠。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡戈抄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凫海,到底是詐尸還是另有隱情呛凶,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布行贪,位于F島的核電站漾稀,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏建瘫。R本人自食惡果不足惜崭捍,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望啰脚。 院中可真熱鬧殷蛇,春花似錦、人聲如沸橄浓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荸实。三九已至匀们,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間准给,已是汗流浹背泄朴。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留露氮,地道東北人祖灰。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像畔规,于是被迫代替她去往敵國和親局扶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,317評論 25 707
  • XML bitmap XML 位圖是在 XML 中定義的資源,指向位圖文件详民。實際上是原始位圖文件的別名延欠。XML 可...
    李建彪閱讀 1,733評論 0 3
  • 更多Android總結(jié)知識點 Android中的13種Drawable小結(jié) Android的八種對話框的實現(xiàn) An...
    侯蛋蛋_閱讀 3,972評論 0 5
  • 概述 今天我們來探究一下android的樣式。其實沈跨,幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,857評論 1 19
  • 給自己找虐由捎,離開一個后期較舒適的公司,前期較艱難的時期已經(jīng)走過饿凛,看不到后期的發(fā)展狞玛,只是會比較安穩(wěn),有時候感覺...
    原來915閱讀 236評論 0 0