小編閱讀后達到的成效與待加強地方:
- 對Drawable有了更加全面的認知参滴,每種Drewable都能熟練的使用
- 待加強對自定義Drawable的了解
Drawable在Android開發(fā)中最常見的车荔,可能大家最熟悉的就是ShapeDrawable,StateListDrawable一個狀態(tài)辣辫,一形狀的旦事,其實還有幾種
圖像不清晰的請移步,下載原Xmind
同時以下所有類型的例子都在github上有demo可以兩者結(jié)合閱讀
先看下相應(yīng)的demo圖
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ù)探索