最全Drawable基礎(chǔ)總結(jié)

小編閱讀后達到的成效與待加強地方:

  • 對Drawable有了更加全面的認知参滴,每種Drewable都能熟練的使用
  • 待加強對自定義Drawable的了解

Drawable在Android開發(fā)中最常見的车荔,可能大家最熟悉的就是ShapeDrawable,StateListDrawable一個狀態(tài)辣辫,一形狀的旦事,其實還有幾種

Drawable.jpg

圖像不清晰的請移步,下載原Xmind
同時以下所有類型的例子都在github上有demo可以兩者結(jié)合閱讀
先看下相應(yīng)的demo圖
drawable_demo.jpg

BitmapDrawable

表示一張圖片
語法:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:gravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
                     |fill_horizontal|center|fill|clip_vertical|clip_horizontal"
    android:src="@drawable/image" 
    android:mipMap="true"
    android:tileMode="clamp|disabled|repeat|mirror">

    </bitmap>
屬性 介紹
android:src 圖片的id
android:antialias 是否圖片抗鋸齒功能
android:dither 是否開啟抖動效果
android:filter 是否過濾效果
top 將內(nèi)部的Drawable放在容器的頂部,不改變其大小急灭,如果為豎直裁剪姐浮,則從底部開始裁剪
bottom 將內(nèi)部的Drawable放在你容器的底部,不改變其大小葬馋。如為豎直裁剪卖鲤,則從頂部開始裁剪
left 將內(nèi)部的Drawable放在容器的左邊肾扰,不改變其大小。如為水平裁剪蛋逾,則從右邊開始后裁剪
right 將內(nèi)部的Drawable放在容器的右邊集晚,不改變其大小。如為豎直裁剪区匣,則從左邊開始裁剪
center_vertical 將內(nèi)部的Drawable放在容器的豎直中心偷拔,不改變其大小,如為豎直裁剪沉颂,那么上下同時開始裁剪
fill_vertical 將內(nèi)部的Drawable在豎直方向向上填充容器条摸, 如果為豎直裁剪,那么僅當ClipDraewable的等級為0(0表示ClipDrawable被完全裁剪)時才有裁剪行為
center_horizontal 使內(nèi)部的Drawable在容器中水平居中铸屉,不改變它的大小钉蒲,如果為水平裁剪,那么從左右兩邊同時開始裁剪
fill_horizontal 使內(nèi)部的Drawable在水平方向上填充容器彻坛,如果為水平裁剪顷啼,那么僅當ClipDrawable的等級為0時,才會有裁剪行為
center 使內(nèi)部的Drawable在容器中水平和豎直方向都居中昌屉,不改變其大小钙蒙,如果為豎直裁剪,那么從上下同時開始裁剪间驮;如果為水平裁剪躬厌,那么從左右同時裁剪
fill 是內(nèi)部的Drawable在水平和豎直方向上同時填充容器。僅當ClipDrawable的等級為0時竞帽,才能有裁剪行為
android:mipMap 圖像相關(guān)的處理技術(shù)扛施,紋理映射
android:tileMode 平鋪模式

ShapeDrawable

ShapeDrawable是一種通過顏色構(gòu)造的圖形,既可以是純色的圖形屹篓,也可以是漸變效果圖形疙渣。
語法:

<?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="10dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/>
    <gradient
        android:angle="45"
        android:centerX="5px"
        android:centerY="5px"
        android:centerColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorPrimaryDark"
        android:gradientRadius="5dp"
        android:type="linear|radial|sweep"
        android:useLevel="true"/>
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
    <solid
        android:color="@color/colorPrimaryDark"/>
    <size
        android:width="40dp"
        android:height="40dp"/>
    <stroke
        android:width="40dp"
        android:color="@color/colorAccent"
        android:dashGap="4dp"
        android:dashWidth="4dp"/>

</shape>

相應(yīng)屬性解釋:

屬性 介紹
android:shape 圖形的形狀:rectangle(矩形),oval(橢圓),line(橫線),ring(圓形),默認值矩形堆巧;

<ring>特有屬性:

屬性 介紹
android:innerRadius 圓環(huán)的內(nèi)半徑
android:thickness 圓環(huán)厚度
android:innerRadiusRatio 內(nèi)半徑占整個Drawable寬度的比例妄荔,默認為9
android:thicknessRatio 厚度占整個Drawable寬度的比例,默認為3
android:useLevel 一般都是false谍肤,當在LevelListDrawable(文章后期會介紹)中使用

<corner>特有屬性(用px)

屬性 介紹
android:radius 四個角設(shè)置相同的角度
android:topLeftRadius 設(shè)置最上角的角度
android:topRightRadius 設(shè)置右上角的角度
android:bottomLeftRadius 設(shè)置最下角的角度
android:bottomRightRadius 設(shè)置右下角的角度

<gradient>屬性(漸變效果):與<solid>(純色填充)標簽相互排斥

屬性 介紹
android:angle 漸變角度啦租,默認為0,其值必須為45的度數(shù)荒揣,0表示從左到右篷角,90表示從下到上
android:centerX 漸變的中心點的橫坐標
android:centerY 漸變的中心點的縱坐標,漸變的中心點乳附,漸變的中心點會影響漸變的具體效果
android:startColor 漸變的起始色
android:centerColor 漸變的中間色
android:endColor 漸變的結(jié)束色
android:gradientRadius 漸變半徑内地,僅當android:type="radial"時有效
android:useLevel 一般為fasle,當Drawable作為StateListDrawable(后面會有詳細介紹)使用時為true
android:type 漸變的類別伴澄,有l(wèi)iner(有線性漸變),radial(徑向漸變),sweep(掃描漸變),默認值為線性漸變
屬性 介紹
android:color 填充的顏色

<solid>純色填充

屬性 介紹
android:color 填充的顏色

<stroke> Shape的描邊

屬性 介紹
android:width 描邊的寬度
android:color 描邊的顏色
android:dashWidth 組成虛線的線段寬度
android:dashGap 組成虛線的線段之間的間隔阱缓,間隔越大則虛線之間的空隙越大

<padding>屬性 :android:left .android:top ,android:right ,android:bottom
<size> 屬性:android:width 非凌,android:height

LayerDrawable

LayerDrawable對應(yīng)的XML標簽<layer-list>,表示一種層次化的Drawable集合荆针,將不同的Drawable放置在不同的層上從而達到一種疊加后的效果敞嗡。
語法:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="40dp"
        android:drawable="@drawable/image"
        android:left="40dp"
        android:right="40dp"
        android:top="40dp" />
</layer-list>

其中android:top,android:bottom,android:left,android:right表示四周的偏移量

StateListDrawable

StateListDrawable對應(yīng)<selector> 標簽航背,表示Drawable集合喉悴,每個Drawable都對應(yīng)著View的一種狀態(tài),根據(jù)View的狀態(tài)選擇相應(yīng)的Drawable玖媚;
語法:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
                android:constantSize="true" 
                android:dither="true" 
                android:variablePadding="true">
    <item android:drawable="@drawable/image" 
          android:state_activated="true"
          android:state_checkable="true" 
          android:state_checked="true" 
          android:state_enabled="true" 
          android:state_focused="true"
          android:state_hovered="true" 
          android:state_pressed="true" 
          android:state_selected="true" 
          android:state_window_focused="true" />

</selector>

相應(yīng)的屬性詳解:

屬性 介紹
android:constantSize StateListDrawable的固定大小是否隨著其狀態(tài)的改變而改變箕肃,默認為false
android:dither 是否開啟抖動效果,默認值為true
android:variablePadding StateListDrawable 的padding表示是否隨著其狀態(tài)的改變而改變今魔,默認值false
android:state_pressed 表示按下狀態(tài)
android:state_focused 表示View已經(jīng)獲得焦點
android:state_selected 表示用戶選擇了View
android: state_checked 表示用戶選中了View
android:state_enabled 表示View當前處于可用狀態(tài)

LevelListDrawable

LevelListDrawable對應(yīng)于<level-list>標簽勺像,表示一個Drawable集合,集合中每個Drawable都有等級错森,根據(jù)不同的等級吟宦,LevelListDrawable會切換為對應(yīng)的Drawable
語法:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/image"
        android:maxLevel="20"
        android:minLevel="10" />
    <item
        android:drawable="@drawable/image1"
        android:maxLevel="9"
        android:minLevel="1" />
</level-list>

maxLevel,minLevel設(shè)置等級最大最小值涩维,會根據(jù)代碼設(shè)置的相應(yīng)的level切換相應(yīng)的drawable

TransitionDrawable

TransitionDrawable對應(yīng)于<transition>標簽殃姓,實現(xiàn)Drawable之間的淡入淡出效果
語法:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">


    <item
        android:width="40dp"
        android:height="40dp"
        android:bottom="40dp"
        android:drawable="@drawable/image"
        android:top="40dp" />
</transition>

其中android:top,android:bottom,android:left,android:right表示四周的偏移量

InsetDrawable

InsetDrawable對應(yīng)<inset>標簽瓦阐,可以將其他Drawable內(nèi)嵌到自己當中蜗侈,并且四周留出一定的邊界。
語法:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:insetBottom="40dp"
    android:insetLeft="40dp"
    android:insetRight="40dp"
    android:insetTop="40dp" />

其中android:top,android:bottom,android:left垄分,android:right表示四周的偏移量

ScaleDrawable

ScaleDrawable對應(yīng)的標簽為<scale>宛篇,可以根據(jù)自己的等級(level)將指定的Drawable縮放到一定比例娃磺。
語法:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:scaleGravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
|fill_horizontal|center|fill|clip_vertical|clip_horizontal"  
    android:scaleHeight="50%"
    android:scaleWidth="50%" />

android:scaleGravity等同于androiid:gravity,android:scaleHeight和android:scaleWidth分別表示對指定Drawable寬高的縮放比例薄湿,用百分比表示。

ClipDrawable

ClipDrawable對應(yīng)于<clid>標簽偷卧,根據(jù)自己的等級(level)來裁剪另一個Drawable,裁剪的方向根據(jù)屬性android:clipOrientation和android:gravity兩個屬性共同決定的豺瘤。其中clipOrientation表示裁剪方向,分為水平(horizontal)和豎直(vertical)方向

語法:

<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal|vertical"
    android:drawable="@drawable/image"
    android:gravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
                     |fill_horizontal|center|fill|clip_vertical|clip_horizontal" />
選項 意義
top 將內(nèi)部的Drawable放在容器的頂部听诸,不改變其大小坐求,如果為豎直裁剪,則從底部開始裁剪
bottom 將內(nèi)部的Drawable放在你容器的底部晌梨,不改變其大小桥嗤。如為豎直裁剪须妻,則從頂部開始裁剪
left 將內(nèi)部的Drawable放在容器的左邊,不改變其大小泛领。如為水平裁剪荒吏,則從右邊開始后裁剪
right 將內(nèi)部的Drawable放在容器的右邊,不改變其大小渊鞋。如為豎直裁剪绰更,則從左邊開始裁剪
center_vertical 將內(nèi)部的Drawable放在容器的豎直中心,不改變其大小锡宋,如為豎直裁剪儡湾,那么上下同時開始裁剪
fill_vertical 將內(nèi)部的Drawable在豎直方向向上填充容器, 如果為豎直裁剪执俩,那么僅當ClipDraewable的等級為0(0表示ClipDrawable被完全裁剪)時才有裁剪行為
center_horizontal 使內(nèi)部的Drawable在容器中水平居中徐钠,不改變它的大小,如果為水平裁剪役首,那么從左右兩邊同時開始裁剪
fill_horizontal 使內(nèi)部的Drawable在水平方向上填充容器丹皱,如果為水平裁剪,那么僅當ClipDrawable的等級為0時宋税,才會有裁剪行為
center 使內(nèi)部的Drawable在容器中水平和豎直方向都居中摊崭,不改變其大小,如果為豎直裁剪杰赛,那么從上下同時開始裁剪呢簸;如果為水平裁剪,那么從左右同時裁剪
fill 是內(nèi)部的Drawable在水平和豎直方向上同時填充容器乏屯。僅當ClipDrawable的等級為0時根时,才能有裁剪行為

初寫文章,大家請輕點噴QAQ
最后感謝剛哥的Android開發(fā)藝術(shù)探索

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末辰晕,一起剝皮案震驚了整個濱河市蛤迎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌含友,老刑警劉巖替裆,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異窘问,居然都是意外死亡辆童,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門惠赫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來把鉴,“玉大人,你說我怎么就攤上這事儿咱⊥タ常” “怎么了场晶?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長怠缸。 經(jīng)常有香客問我峰搪,道長,這世上最難降的妖魔是什么凯旭? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任概耻,我火速辦了婚禮,結(jié)果婚禮上罐呼,老公的妹妹穿的比我還像新娘鞠柄。我一直安慰自己,他們只是感情好嫉柴,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布厌杜。 她就那樣靜靜地躺著,像睡著了一般计螺。 火紅的嫁衣襯著肌膚如雪夯尽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天登馒,我揣著相機與錄音匙握,去河邊找鬼。 笑死陈轿,一個胖子當著我的面吹牛圈纺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播麦射,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蛾娶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了潜秋?” 一聲冷哼從身側(cè)響起蛔琅,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎峻呛,沒想到半個月后罗售,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡杀饵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年莽囤,在試婚紗的時候發(fā)現(xiàn)自己被綠了谬擦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片切距。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖惨远,靈堂內(nèi)的尸體忽然破棺而出谜悟,到底是詐尸還是另有隱情话肖,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布葡幸,位于F島的核電站最筒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蔚叨。R本人自食惡果不足惜床蜘,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蔑水。 院中可真熱鬧邢锯,春花似錦、人聲如沸搀别。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽歇父。三九已至蒂培,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間榜苫,已是汗流浹背护戳。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留垂睬,地道東北人灸异。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像羔飞,于是被迫代替她去往敵國和親肺樟。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

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

  • 一逻淌、 Drawable簡介 1 Drawable表示的是一種可以在Canvas上進行繪制的抽象的概念么伯,可以是純顏色...
    黃海佳閱讀 1,211評論 0 10
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,082評論 25 707
  • 一、概念 Drawable有很多種卡儒,它們都表示一種圖像的概念田柔,但是它們又不全是圖片,通過顏色也可以構(gòu)造出各式各樣的...
    TomyZhang閱讀 116評論 0 0
  • 不怕跌倒骨望,所以飛翔 關(guān)于Drawable的一些說明類的文字我就不寫了,但是Drawable其實挺重要的,一些問題都...
    筆墨Android閱讀 669評論 0 2
  • 人類喜好千差萬別硬爆,永遠不要嘲笑和攻擊別人覺得快樂的方式。不認同別人的生活方式擎鸠,可以缀磕;指責別人的生活方式,那就是侵...
    一抹凌霄閱讀 149評論 1 1