一、介紹:
就是圖片資源,而圖片資源又分成了10種不一樣的類別:
點陣圖(Bitmap File)、九宮格圖(Nine-Patch File)、圖層清單(Layer List)、狀態清單(State List)、等級清單(Level List)、轉換圖(Transition Drawable)、插入圖(Inset Drawable)、裁切圖(Clip Drawable)、縮放圖(Scale Drawable)、形狀圖(Shape Drawable)
二、點陣圖(Bitmap File):
放在res/drawable/底下的檔案,支援png(推薦)、jpg(支援)、gif(不推薦),也可以是XML文件
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<bitmap>
定義點陣圖的內容
屬性:
xmlns:android(String)
必須為"http://schemas.android.com/apk/res/android",只有為根元素時才需要
android:src(Drawable Resource)*
圖片
android:antialias(boolean)
是否啟用抗鋸齒
android:dither(boolean)
如果圖片的像素配置與屏幕不同,是否啟用抖動(例如:RGB565的屏幕與ARGB8888的圖)
android:gravity(String)
定義圖片重心,代表放在容器中的位置,可以是以下值的其中一個或多個(多個以" | "隔開)
值 | 描述 |
top | 放在頂部,不改變大小 |
bottom | 放在底部,不改變大小 |
left | 放在左邊緣,不改變大小 |
right | 放在右邊緣,不改變大小 |
center_vertical | 放在垂直中心,不改變大小 |
fill_vertical | 如果需要,垂直填滿 |
center_horizontal | 放在水平中心,不改變大小 |
fill_horizontal | 如果需要,水平填滿 |
center | 放在正中心,不改變大小 |
fill | 如果需要,完全填滿 |
clip_vertical | (備註1 |
clip_horizontal | (備註1 |
android:mipmap(boolean)
是否啟用mipmap提示
android:tileMode(String)
定義圖塊模式,啟用圖塊模式時,圖片重心將被忽略
值 | 描述 |
disabled(預設) | 不要啟用 |
clamp | 如果著色器超出原始邊界,複製邊緣顏色 |
repeat | 重複著色器圖像 |
mirror | 重複著色器圖像,交替鏡像,以連接圖片 |
範例(來自Android官方文件):
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/icon" android:tileMode="repeat" /> |
三、九宮格圖(Nine-Patch File):
一種png圖片,可以讓android知道當圖片過小時要從哪個部分延伸(詳細可以搜尋".9.png"),放在res/drawble/底下的.9.png檔案及xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<nine-patch>
定義九宮格圖
屬性:
xmlns:android(String)*
android:src(Drawable Resource)*
android:dither(boolean)
以上三個屬性皆與點陣圖相同
範例(來自Android官方文件):
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/myninepatch" android:dither="false" /> |
四、圖層清單(Layer List):
圖層清單是一個圖片,叫做清單是因為它是由一系列圖片疊出來的圖片,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<layer-list>*
必須為根元素,可以包含一個或多個<item>
屬性:
xmlns:android(String)*
必須是"http://schemas.android.com/apk/res/android"
<item>
定義一個圖片,可以放在內部<bitmap>
屬性:
android:drawable(Drawable Resource)*
圖片
android:id(Resource ID)
Drawable的唯一資源ID,用以表示這個<item>
android:top(int)
頂部偏移量(像素)
android:right(int)
右偏移量(像素)
android:bottom(int)
底部偏移量(像素)
android:left(int)
左偏移量(像素)
備註:預設會自動縮放至適合View的大小,如果要修改例如重心這種<item>未提供的屬性,可以使用<bitmap>
範例(來自Android官方文件):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="@drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="@drawable/android_blue" android:gravity="center" /> </item> </layer-list> |
五、狀態清單(State List):
可以依據元件狀態繪製不同圖片,類似顏色狀態列表,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<selector>*
必須是根元素,包含一個或多個<item>
屬性:
xmlns:android(String)*
必須是"http://schemas.android.com/apk/res/android"
android:constantSize(boolean)
圖片尺寸是否因為狀態改變而維持不變,true維持不變,預設false
android:dither(boolean)
同點陣圖的dither
android:variablePadding(boolean)
填充狀態是否因為狀態改變而更改,true為更改填充狀態,預設false
<item>
定義圖片
屬性:
android:drawable(Drawable Resource)*
圖片
android:state_pressed(boolean)
按下時應用
android:state_focused(boolean)
聚焦時應用
android:state_hovered(boolean)
光標懸停時應用
android:state_selected(boolean)
使用navigation時應用
android:state_checkable(boolean)
元件可以勾選時應用
android:state_checked(boolean)
元件勾選時應用
android:state_enabled(boolean)
元件啟用時應用
android:state_activated(boolean)
元件激活為持久選擇時應用
android:state_window_focused(boolean)
元件的視窗聚焦時應用
範例(來自Android官方文件):
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <!-- focused --> <item android:state_hovered="true" android:drawable="@drawable/button_focused" /> <!-- hovered --> <item android:drawable="@drawable/button_normal" /> <!-- default --> </selector> |
六、等級清單(Level List):
可以管理多個圖像,每個圖像可以設置最大最小數值,使用setLevel()可以限制加載的級別(備註2,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<level-list>
必須是根元素,包含一個或多個<item>
屬性:
xmlns:android(String)*
必須是"http://schemas.android.com/apk/res/android"
<item>
定義圖像的等級
屬性:
android:drwable(Drawable Resource)*
圖片
android:maxLevel(int)
最大值
android:minLevel(int)
最小值
範例(來自Android官方文件):
<level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/status_off" android:maxLevel="0" /> <item android:drawable="@drawable/status_on" android:maxLevel="1" /> </level-list> |
七、轉換圖(Transition Drawable):
可以定義一種圖像,讓這種圖像可以以兩個圖像進行淡入淡出,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<transition>*
必須是根元素,包含一個或兩個<item>
屬性:
xmlns:android(String)*
必為"http://schemas.android.com/apk/res/android"
<item>
圖像,必為子元素,和圖層清單一樣接受<bitmap>
屬性:
android:drawable(Drawable Resource)*
圖像
android:id(Resource ID)
此圖像的唯一資源ID
android:top(int)
頂部偏移量(以像素為單位)
android:right(int)
右偏移量(以像素為單位)
android:bottom(int)
底部偏移量(以像素為單位)
android:left(int)
左偏移量(以像素為單位)
範例(來自Android官方文件):
<transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/on" /> <item android:drawable="@drawable/off" /> </transition> |
八、插入圖(Inset Drawable):
可以以一定距離插入一個圖像,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<inset>
定義圖像,必須是根元素。
屬性:
xmlns:android(String)*
必須為 "http://schemas.android.com/apk/res/android"
android:drawable(Drawable Resource)*
引用要插入的圖像
android:insetTop(Dimension or Dimension Resource)
頂部距離
android:insetRight(Dimension or Dimension Resource)
右邊距離
android:insetBottom(Dimension or Dimension Resource)
底部距離
android:insetLeft(Dimension or Dimension Resource)
左邊距離
範例(來自Android官方文件):
<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/background" android:insetTop="10dp" android:insetLeft="10dp" /> |
九、裁切圖(Clip Drawable):
指的是一張圖要裁切成多少分來顯示,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<clip>
定義圖像,必須是根元素。
屬性:
xmlns:android(String)*
定義XML名稱空間,該名稱空間必須為 "http://schemas.android.com/apk/res/android"
android:drawable(Drawable Resource)*
對要裁剪的可繪製資源的引用
android:clipOrientation(String)
裁切的方向
值 | 描述 |
horizontal | 水平 |
vertical | 垂直 |
android:gravity(String)
指定裁剪的位置,以" | "分隔
值 | 描述 |
top | 將對象放在其容器的頂部,不更改其大小 |
bottom | 將對象放在其容器的底部,不更改其大小 |
left(默認) | 將對象放在其容器的左邊緣,不更改其大小 |
right | 將對象放在其容器的右邊緣,不更改其大小 |
center_vertical | 將對象放置在其容器的垂直中心,不更改其大小 |
fill_vertical | 如果需要,增加垂直大小,使其完全填滿容器 |
center_horizontal | 將對象放置在其容器的水平中心,不更改其大小 |
fill_horizontal | 如果需要,增加水平大小,使其完全填滿容器 |
center | 將對象放置在容器的中心,不更改其大小 |
fill | 如果需要,請增加水平和垂直大小,使其完全填滿容器 |
clip_vertical | (備註1 |
clip_horizontal | (備註1 |
範例(來自Android官方文件):
<clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android" android:clipOrientation="horizontal" android:gravity="left" /> |
十、縮放圖(Scale Drawable):
顧名思義就是把原本的圖做縮放,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<scale>
定義可繪製的比例。這必須是根元素
屬性:
xmlns:android(String)*
必須為"http://schemas.android.com/apk/res/android"
android:drawable(Drawable Resource)*
引用可繪製資源
android:scaleGravity(String)
指定縮放後的重力位置,以" | "分隔
值 | 描述 |
top | 將對象放在其容器的頂部,不更改其大小 |
bottom | 將對象放在其容器的底部,不更改其大小 |
left(默認) | 將對象放在其容器的左邊緣,不更改其大小 |
right | 將對象放在其容器的右邊緣,不更改其大小 |
center_vertical | 將對象放置在其容器的垂直中心,不更改其大小 |
fill_vertical | 如果需要,增加垂直大小,使其完全填滿容器 |
center_horizontal | 將對象放置在其容器的水平中心,不更改其大小 |
fill_horizontal | 如果需要,增加水平大小,使其完全填滿容器 |
center | 將對象放置在容器的中心,不更改其大小 |
fill | 如果需要,請增加水平和垂直大小,使其完全填滿容器 |
clip_vertical | (備註1 |
clip_horizontal | (備註1 |
android:scaleHeight(%)
根據原圖的大小做高度縮放
格式:XX%
例如:100%,12.5%
android:scaleWidth(%)
根據原圖的大小做寬度縮放
格式:XX%
例如:100%,12.5%
範例(來自Android官方文件):
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/logo" android:scaleGravity="center_vertical|center_horizontal" android:scaleHeight="80%" android:scaleWidth="80%" /> |
十一、形狀圖(Shape Drawable):
用xml定義的一般形狀,放在res/drawble/底下的xml檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<shape>
形狀圖像,這必須是根元素
屬性:
xmlns:android(String)*
必須為"http://schemas.android.com/apk/res/android"。
android:shape(String)
定義形狀的類型,可以是:
值 | 描述 |
rectangle(默認) | 矩形 |
oval | 橢圓 |
line | 線(必須要有<stroke>來定義線寬) |
ring | 環形 |
如果android:shape="ring":
android:innerRadius(Dimension or Dimension Resource)
環內部的半徑,以尺寸表示
android:innerRadiusRatio(float)
環內部的半徑,以比例表示,此值會被android:innerRadius覆蓋,預設為9
例如:android:innerRadiusRatio="5",內半徑等於環的寬度除以5
android:thickness(Dimension or Dimension Resource)
環的厚度,以尺寸表示
android:thicknessRatio(float)
環的厚度,以比例表示,此值會被android:innerRadius覆蓋,預設為3
例如:android:thicknessRatio="2",則厚度等於環的寬度除以2
android:useLevel(boolean)
如果將圖用在LevelListDrawable則為"true",通常為"false",否則形狀可能不會出現。
<corners>
為形狀創建圓角,僅在形狀為矩形時適用。
屬性:
android:radius(Dimension or Dimension Resource)
角的半徑,以尺寸表示。以下屬性覆蓋針對該角的設定
android:topLeftRadius(Dimension or Dimension Resource)
左上角的半徑,以尺寸表示
android:topRightRadius(Dimension or Dimension Resource)
右上角的半徑,以尺寸表示
android:bottomLeftRadius(Dimension or Dimension Resource)
左下角的半徑,以尺寸表示
android:bottomRightRadius(Dimension or Dimension Resource)
右下角的半徑,以尺寸表示
注意:必須為每個角(或其初始值)提供大於1的半徑,否則將不對任何角進行處理,允許先設置為1後再針對各角設置小於1的值,甚至為0
<gradient>
指定形狀的漸變顏色
屬性:
android:angle(int)
漸變角度,以度為單位。從左到右為0,從下到上為90,必須是45的倍數,默認為0。
android:centerX(float)
漸變中心的相對X位置(0~1.0)
android:centerY(float)
漸變中心的相對Y位置(0~1.0)
android:centerColor(Color or Color Resource)
介於開始和結束之間的顏色
android:endColor(Color or Color Resource)
結束顏色
android:gradientRadius(float)
漸變的半徑。僅在android:type="radial"時應用
android:startColor(Color or Color Resource)
起始顏色
android:type(String)
要應用的漸變圖案的類型,可以是:
值 | 描述 |
linear(默認) | 線性 |
radial | 放射狀 |
sweep | 掃描 |
android:useLevel(boolean)
如果將圖用在LevelListDrawable則為"true"
<padding>
填充View元素的位置
屬性:
android:left(Dimension or Dimension Resource)
左填充
android:top(Dimension or Dimension Resource)
頂部填充
android:right(Dimension or Dimension Resource)
右填充
android:bottom(Dimension or Dimension Resource)
底部填充
<size>
形狀的大小。
屬性:
android:height(Dimension or Dimension Resource)
高度
android:width(Dimension or Dimension Resource)
寬度
注意:預設會將圖像按此處定義的尺寸比例縮放到View的大小
<solid>
純色填充形狀。
屬性:
android:color(Color or Color Resource)
要填充的顏色
<stroke>
描邊線。
屬性:
android:width(Dimension or Dimension Resource)
線的粗細
android:color(Color or Color Resource)
線條的顏色
android:dashGap(Dimension or Dimension Resource)
虛線之間的距離,只有在android:dashWidth存在時應用
android:dashWidth(Dimension or Dimension Resource)
每條虛線的大小,只有在android:dashGap存在時應用
十二、備註:
備註1:我看不懂,期待有人翻譯ww ↓
clip_vertical : Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.
clip_horizontal : Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.
備註2:我不太了解實際用途,希望有人能幫我理解或等我實際測試結果,官方文件