ETH官方钱包

前往
大廳
主題

【Android筆記】Resource - 圖像(Drawable) a.k.a. 可繪製資源

LF(小魚) | 2021-02-19 14:21:19 | 巴幣 0 | 人氣 492


一、介紹:
就是圖片資源,而圖片資源又分成了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:我不太了解實際用途,希望有人能幫我理解或等我實際測試結果,官方文件

創作回應

相關創作

更多創作