最全Drawable基礎總結

Troll4it發表於2018-04-29

小編閱讀後達到的成效與待加強地方：

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

Drawable在Android開發中最常見的，可能大家最熟悉的就是ShapeDrawable，StateListDrawable一個狀態，一形狀的，其實還有幾種

Drawable.jpg
影象不清晰的請移步,下載原Xmind
同時以下所有型別的例子都在github上有demo可以兩者結合閱讀
先看下相應的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 將內部的Drawable放在容器的頂部，不改變其大小，如果為豎直裁剪，則從底部開始裁剪
bottom 將內部的Drawable放在你容器的底部，不改變其大小。如為豎直裁剪，則從頂部開始裁剪
left 將內部的Drawable放在容器的左邊，不改變其大小。如為水平裁剪，則從右邊開始後裁剪
right 將內部的Drawable放在容器的右邊，不改變其大小。如為豎直裁剪，則從左邊開始裁剪
center_vertical 將內部的Drawable放在容器的豎直中心，不改變其大小，如為豎直裁剪，那麼上下同時開始裁剪
fill_vertical 將內部的Drawable在豎直方向向上填充容器， 如果為豎直裁剪，那麼僅當ClipDraewable的等級為0（0表示ClipDrawable被完全裁剪）時才有裁剪行為
center_horizontal 使內部的Drawable在容器中水平居中，不改變它的大小，如果為水平裁剪，那麼從左右兩邊同時開始裁剪
fill_horizontal 使內部的Drawable在水平方向上填充容器，如果為水平裁剪，那麼僅當ClipDrawable的等級為0時，才會有裁剪行為
center 使內部的Drawable在容器中水平和豎直方向都居中，不改變其大小，如果為豎直裁剪，那麼從上下同時開始裁剪；如果為水平裁剪，那麼從左右同時裁剪
fill 是內部的Drawable在水平和豎直方向上同時填充容器。僅當ClipDrawable的等級為0時，才能有裁剪行為
android:mipMap 影象相關的處理技術，紋理對映
android:tileMode 平鋪模式

ShapeDrawable

ShapeDrawable是一種通過顏色構造的圖形，既可以是純色的圖形，也可以是漸變效果圖形。 語法：

<?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>
複製程式碼

相應屬性解釋：

屬性 介紹
android:shape 圖形的形狀:rectangle(矩形)，oval（橢圓）,line(橫線),ring(圓形),預設值矩形；

特有屬性：

屬性 介紹
android:innerRadius 圓環的內半徑
android:thickness 圓環厚度
android:innerRadiusRatio 內半徑佔整個Drawable寬度的比例，預設為9
android:thicknessRatio 厚度佔整個Drawable寬度的比例，預設為3
android:useLevel 一般都是false，當在LevelListDrawable（文章後期會介紹）中使用

特有屬性（用px）

屬性 介紹
android:radius 四個角設定相同的角度
android:topLeftRadius 設定最上角的角度
android:topRightRadius 設定右上角的角度
android:bottomLeftRadius 設定最下角的角度
android:bottomRightRadius 設定右下角的角度

屬性（漸變效果）：與（純色填充）標籤相互排斥

屬性 介紹
android:angle 漸變角度，預設為0，其值必須為45的度數，0表示從左到右，90表示從下到上
android:centerX 漸變的中心點的橫座標
android:centerY 漸變的中心點的縱座標，漸變的中心點，漸變的中心點會影響漸變的具體效果
android:startColor 漸變的起始色
android:centerColor 漸變的中間色
android:endColor 漸變的結束色
android:gradientRadius 漸變半徑，僅當android：type="radial"時有效
android:useLevel 一般為fasle,當Drawable作為StateListDrawable(後面會有詳細介紹)使用時為true
android:type 漸變的類別，有liner(有線性漸變)，radial（徑向漸變）,sweep（掃描漸變）,預設值為線性漸變

純色填充

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

Shape的描邊

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

屬性 :android:left .android:top ,android:right ,android:bottom 屬性：android:width ，android:height

LayerDrawable

LayerDrawable對應的XML標籤，表示一種層次化的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對應 標籤，表示Drawable集合，每個Drawable都對應著View的一種狀態，根據View的狀態選擇相應的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>
複製程式碼

相應的屬性詳解：

屬性 介紹
android:constantSize StateListDrawable的固定大小是否隨著其狀態的改變而改變，預設為false
android:dither 是否開啟抖動效果，預設值為true
android:variablePadding StateListDrawable 的padding表示是否隨著其狀態的改變而改變，預設值false
android:state_pressed 表示按下狀態
android:state_focused 表示View已經獲得焦點
android:state_selected 表示使用者選擇了View
android: state_checked 表示使用者選中了View
android：state_enabled 表示View當前處於可用狀態

LevelListDrawable

LevelListDrawable對應於標籤，表示一個Drawable集合，集合中每個Drawable都有等級，根據不同的等級，LevelListDrawable會切換為對應的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設定等級最大最小值，會根據程式碼設定的相應的level切換相應的drawable

###TransitionDrawable TransitionDrawable對應於標籤，實現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對應標籤，可以將其他Drawable內嵌到自己當中，並且四周留出一定的邊界。 語法：

<?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對應的標籤為，可以根據自己的等級(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對應於標籤，根據自己的等級（level）來裁剪另一個Drawable,裁剪的方向根據屬性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 將內部的Drawable放在容器的頂部，不改變其大小，如果為豎直裁剪，則從底部開始裁剪
bottom 將內部的Drawable放在你容器的底部，不改變其大小。如為豎直裁剪，則從頂部開始裁剪
left 將內部的Drawable放在容器的左邊，不改變其大小。如為水平裁剪，則從右邊開始後裁剪
right 將內部的Drawable放在容器的右邊，不改變其大小。如為豎直裁剪，則從左邊開始裁剪
center_vertical 將內部的Drawable放在容器的豎直中心，不改變其大小，如為豎直裁剪，那麼上下同時開始裁剪
fill_vertical 將內部的Drawable在豎直方向向上填充容器， 如果為豎直裁剪，那麼僅當ClipDraewable的等級為0（0表示ClipDrawable被完全裁剪）時才有裁剪行為
center_horizontal 使內部的Drawable在容器中水平居中，不改變它的大小，如果為水平裁剪，那麼從左右兩邊同時開始裁剪
fill_horizontal 使內部的Drawable在水平方向上填充容器，如果為水平裁剪，那麼僅當ClipDrawable的等級為0時，才會有裁剪行為
center 使內部的Drawable在容器中水平和豎直方向都居中，不改變其大小，如果為豎直裁剪，那麼從上下同時開始裁剪；如果為水平裁剪，那麼從左右同時裁剪
fill 是內部的Drawable在水平和豎直方向上同時填充容器。僅當ClipDrawable的等級為0時，才能有裁剪行為

初寫文章，大家請輕點噴
最後感謝剛哥的Android開發藝術探索

相關文章