前言

• 本文是本人閱讀《Android開(kāi)發(fā)藝術(shù)探索》的第6章《Android的Drawable》后的總結(jié)筆記。包含了Android開(kāi)發(fā)中常用的Drawable，詳解了它們的屬性和用法呈宇。

• 本文的目錄結(jié)構(gòu)

  • 前言
  • Drawable簡(jiǎn)介
  • Drawable分類(lèi)
    • BitmapDrawable
    • NinePatchDrawable
    • ShapeDrawable
    • LayerDrawable
    • StateListDrawable
    • LevelListDrawable
    • TransitionDrawable
    • InsetDrawable
    • ScaleDrawable
    • ClipDrawable
  • 自定義Drawable

Drawable簡(jiǎn)介

• Drawable表示的是一種可以在Canvas上進(jìn)行繪制的抽象的概念，可以是純顏色，也可以是圖片等胆建。

• Drawable一般是通過(guò)XML來(lái)定義，當(dāng)然也可以通過(guò)代碼來(lái)創(chuàng)建肘交。

• Drawable類(lèi)是抽象類(lèi)笆载，它是所有Drawable的基類(lèi)。

• Drawable的getIntrinsicWidth()和getIntrinsicHeight()獲取其內(nèi)部寬/高涯呻。并不是所有Drawable都有內(nèi)部寬/高凉驻。圖片所形成的Drawable的內(nèi)部寬/高就是圖片的寬/高。顏色所形成的Drawable就沒(méi)有內(nèi)部寬/高的概念了复罐。

• Drawable是沒(méi)有大小概念的涝登，當(dāng)用作View的背景時(shí)，會(huì)被拉伸至View的同等大小市栗。

• Drawable的使用范圍很單一：一是作為ImageView中的圖像顯示缀拭，二是作為View的背景。

Drawable分類(lèi)

BitmapDrawable

• 對(duì)應(yīng)<bitmap>標(biāo)簽填帽，幾乎是最簡(jiǎn)單的Drawable蛛淋，表示一張圖片。

• 在實(shí)際開(kāi)發(fā)中篡腌，我們可直接引用原始的圖片褐荷，也可通過(guò)XML的方式來(lái)描述它。

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

• android:src：圖片的資源id嘹悼。

• android:antialias：是否開(kāi)啟圖片抗鋸齒叛甫。開(kāi)啟后會(huì)讓圖片變得平滑，同時(shí)也會(huì)一定程度上降低圖片的清晰度杨伙。

• android:dither：是否開(kāi)啟抖動(dòng)效果其监。開(kāi)啟后可讓高質(zhì)量的圖片在低質(zhì)量的屏幕上能保持較好的顯示效果。

• android:filter：是否開(kāi)啟過(guò)濾效果限匣。當(dāng)圖片尺寸被拉伸或壓縮時(shí)抖苦，開(kāi)啟過(guò)濾效果可保持較好的顯示效果。

• android:gravity：當(dāng)圖片小于容器的尺寸時(shí)米死，設(shè)置此屬性對(duì)圖片進(jìn)行定位锌历。此屬性的可選項(xiàng)較多，也可用|來(lái)組合使用峦筒。

• android:mipMap：是否開(kāi)啟紋理映射整吆。

• android:tileMode：平鋪模式拱撵。

NinePatchDrawable

• 表示一張.9格式的圖片集索。.9圖片可自動(dòng)地根據(jù)所需的寬/高進(jìn)行相應(yīng)的縮放并保證不失真。

• 在實(shí)際使用中直接引用.9圖片汇跨，也可以通過(guò)XML來(lái)描述它务荆。

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:dither="[true | false]" />

• android:src：圖片的資源id。

• android:dither：是否開(kāi)啟抖動(dòng)效果穷遂。開(kāi)啟后可讓高質(zhì)量的圖片在低質(zhì)量的屏幕上能保持較好的顯示效果函匕。

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="integer"
        android:topLeftRaidus="integer"
        android:topRightRaidus="integer"
        android:bottomLeftRaidus="integer"
        android:bottomRightRaidus="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="color"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type="[linear | radial | sweep]"
        android:useLevel="[true | false]" />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />

• android:shape：圖形的形狀祠锣，可選有rectangle(矩形)、oval(橢圓)咽安、line(橫線(xiàn))和ring(圓環(huán))伴网。默認(rèn)是rectangle。注意line和ring必須通過(guò)<stroke>標(biāo)簽來(lái)指定線(xiàn)的寬度和顏色等信息妆棒，否則無(wú)法達(dá)到預(yù)期的顯示效果澡腾。

• android:shape="ring"有5個(gè)特殊屬性沸伏。

• <corners>：表示shape的四個(gè)圓角的角度印荔，只適用于矩形。

  1. android:radius：為四個(gè)角同事設(shè)定相同的角度详羡。優(yōu)先級(jí)比以下4個(gè)屬性要低仍律。
  2. android:topLeftRadius：左上角的角度。
  3. android:topRightRadius：右上角的角度殷绍。
  4. android:bottomLeftRadius：左下角的角度染苛。
  5. android:bottomRightRadius：右下角的角度。

• <solid>：純色填充主到，通過(guò)android:color指定填充的顏色茶行。

• <gradient>：漸變效果。與<solid>純色填充是互相排斥的登钥。

  1. android:angle：漸變的角度畔师。默認(rèn)為0，其值必須為45的倍數(shù)牧牢。此角度會(huì)影響漸變的方向看锉，0表示從左到右，90表示從下到上塔鳍。
  2. android:centerX：漸變的中心點(diǎn)的X坐標(biāo)伯铣。
  3. android:centerY：漸變的中心點(diǎn)的Y坐標(biāo)。
  4. android:startColor：漸變的起始色轮纫。
  5. android:centerColor：漸變的中間色腔寡。
  6. android:endColor：漸變的結(jié)束色。
  7. android:gradient：漸變半徑掌唾。僅當(dāng)android:type="radial"時(shí)有效放前。
  8. android:useLevel：一般為false忿磅，當(dāng)Drawable作為StateListDrawable時(shí)為true。
  9. android:type：漸變的類(lèi)別凭语。有l(wèi)inear(線(xiàn)性漸變)葱她、radial(徑向漸變)、sweep(掃描線(xiàn)漸變)似扔，默認(rèn)為linear吨些。

• <stroke>：描邊。

  1. android:width：描邊的寬度虫几。
  2. android:color：描邊的顏色锤灿。
  3. android:dashWidth：虛線(xiàn)的寬度。
  4. android:dashGap：虛線(xiàn)之間的間隔辆脸。

• <padding>：空白但校。有top等四個(gè)屬性。

• <size>：大小啡氢。其android:width和android:height分別設(shè)定shape的寬/高状囱。注意，這個(gè)表示的是shape的固有大小倘是，但并不是其最終大小亭枷。

LayerDrawable

• 對(duì)應(yīng)<layer-list>標(biāo)簽，表示一種層次化的Drawable集合搀崭，通過(guò)將不同的Drawable放置在不同的層上面從而達(dá)到一種疊加后的效果叨粘。

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
    <!-- 其他item -->
</layer-list>

• 一個(gè)layer-list可包含多個(gè)item，每個(gè)item表示一個(gè)Drawable瘤睹∩茫可在android:drawable中引用一個(gè)現(xiàn)有的Drawable資源，也可在<item>中自定義Drawable轰传。

• 默認(rèn)情況下驴党，layer-list中的所有Drawable都會(huì)被縮放至View的大小』癫纾可設(shè)置Drawable相對(duì)于View的上下左右偏移量港庄。另外對(duì)于bitmap，需要使用其android:gravity來(lái)控制圖片的顯示效果恕曲。

• layer-list有層次的概念鹏氧，下面的item會(huì)覆蓋上面的item。通過(guò)合理的分層佩谣，可實(shí)現(xiàn)一些特殊的疊加效果度帮。

• 利用layer-list實(shí)現(xiàn)一個(gè)文本輸入框。

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
          <shape android:shape="rectangle">
              <solid android:color="#0ac39e" />
          </shape>
      </item>
      <item android:bottom="6dp">
          <shape android:shape="rectangle">
              <solid android:color="#ffffff" />
          </shape>
      </item>
      <item
          android:bottom="1dp"
          android:left="1dp"
          android:right="1dp">
          <shape android:shape="rectangle">
              <solid android:color="#ffffff" />
          </shape>
      </item>
  </layer-list>
  

  layer-list背景的輸入框

StateListDrawable

• 對(duì)應(yīng)<selector>標(biāo)簽，表示一個(gè)Drawable的集合笨篷。每個(gè)Drawable對(duì)應(yīng)著View的一種狀態(tài)，系統(tǒng)會(huì)根據(jù)View的狀態(tài)來(lái)選擇合適的Drawable瓣履。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize="[true | false]"
    android:dither="[true | false]"
    android:variablePadding="[true | false]">
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed="[true | false]"
        android:state_focused="[true | false]"
        android:state_hovered="[true | false]"
        android:state_selected="[true | false]"
        android:state_checkable="[true | false]"
        android:state_checked="[true | false]"
        android:state_enabled="[true | false]"
        android:state_activated="[true | false]"
        android:state_window_focused="[true | false]" />
    <!-- 其他item -->
</selector>

• android:constantSize：StateListDrawable的固有大小是否不隨著其狀態(tài)的改變而改變率翅。默認(rèn)為false，即隨著狀態(tài)的改變而改變大小袖迎。若為true冕臭，則表示其內(nèi)部所有Drawable的固有大小的最大值。

• android:dither：是否開(kāi)啟抖動(dòng)效果燕锥。

• android:variblePadding：StateListDrawable的padding是否隨著其狀態(tài)的改變而改變辜贵。默認(rèn)為false，表示其內(nèi)部所有Drawable的padding的最大值归形。若為true托慨，表示會(huì)隨著狀態(tài)的改變而改變。

• <item>：表示某種狀態(tài)下的一個(gè)具體的Drawable暇榴。用android:drawable指定一個(gè)現(xiàn)有Drawable的資源id厚棵，剩下的屬性表示的是View的各種狀態(tài)。

• 系統(tǒng)會(huì)按照從上到下的順序查找查吊，直至查找到第一條匹配的item谐区。一般來(lái)說(shuō)，默認(rèn)的item都應(yīng)該放在selector的最后一條菩貌，并且不附帶任何的狀態(tài)卢佣。

LevelListDrawable

• 對(duì)應(yīng)<level-list>標(biāo)簽，表示一個(gè)Drawable集合箭阶，集合中的每個(gè)Drawable都有一個(gè)等級(jí)的概念虚茶。根據(jù)不同的等級(jí)，LevelListDrawable會(huì)切換為對(duì)應(yīng)的Drawable仇参。

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
    <!-- 其他item -->
</level-list>

• 每個(gè)item表示一個(gè)Drawable嘹叫，并且有對(duì)應(yīng)的等級(jí)范圍，在maxLevel和minLevel之間诈乒。取值范圍為0~10000罩扇，默認(rèn)為0。

• 若作為View背景時(shí)，可通過(guò)Drawable的setLevel()來(lái)設(shè)置不同的等級(jí)來(lái)切換具體的Drawable喂饥。若作為ImageView的前景消约，可通過(guò)ImageView的setImageLevel()來(lái)切換。

TransitionDrawable

• 對(duì)應(yīng)于<transition>標(biāo)簽员帮，用于實(shí)現(xiàn)兩個(gè)Drawable之間的淡入淡出效果或粮。

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
    <!-- 另一個(gè)item，注意transition只包含兩個(gè)item -->
</transition>

• 常將TransitionDrawable作為View的背景捞高，再調(diào)用它的startTransition()和reverseTransition()來(lái)實(shí)現(xiàn)淡入淡出效果以及它的逆過(guò)程氯材。

ImageView ivBg = (ImageView) findViewById(R.id.iv_bg);
TransitionDrawable drawable = (TransitionDrawable) ivBg.getBackground();
drawable.startTransition(1000);

InsetDrawable

• 對(duì)應(yīng)<inset>標(biāo)簽，可將其他Drawable內(nèi)嵌到自己當(dāng)中硝岗，并可在四周留出一定的間距氢哮。

<?xml version="1.0" encoding="utf-8"?>
<inset 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@[package:]drawable/drawable_resource"
    android:inset="dimension"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:insetLeft="dimension" />

• 當(dāng)一個(gè)View希望自己的背景比自己的實(shí)際區(qū)域小的時(shí)候，可采用InsetDrawable型檀，并通過(guò)inset*屬性來(lái)設(shè)置留白冗尤。

ScaleDrawable

• 對(duì)應(yīng)<scale>標(biāo)簽，將Drawable縮放到一定比例贱除。

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

• android:scaleGravity：等同于BitmapDrawable的android:gravity生闲。

• android:scaleWidth和android:scaleHeight：指定Drawable寬/高的縮放比例，以百分比的形式表示月幌。如70%碍讯，表示縮放到原來(lái)的30%。

• 從ScaleDrawable的draw()源代碼來(lái)看扯躺，若等級(jí)為0時(shí)捉兴，不可見(jiàn)。等級(jí)默認(rèn)為0录语，所以調(diào)用ScaleDrawable的setLevel()設(shè)置一個(gè)大于0的等級(jí)倍啥，它才會(huì)可見(jiàn)。

public void draw(Canvas canvas) {
    final Drawable d = getDrawable();
    if (d != null && d.getLevel() != 0) {
        d.draw(canvas);
    }
}

• 分析ScaleDrawable的onBoundsChange()可看出其內(nèi)部mDrawable的大小和等級(jí)以及縮放比例的關(guān)系澎埠。

// iw常為0
final int iw = min ? d.getIntrinsicWidth() : 0;
// 1. MAX_LEVEL為10000虽缕，即等級(jí)的取值范圍為0~10000。
// 2. 計(jì)算得到的最終w為其內(nèi)部mDrawable最后顯示的寬度蒲稳。因?yàn)槭?=氮趋，所以右邊算數(shù)得到的值越大，則最終w就越小江耀。
// 3. level越大剩胁，其內(nèi)部mDrawable就越大。
// 4. ScaleDrawable的XML中所定義的縮放比例越大祥国，即mState.mScaleWidth越大昵观，則內(nèi)部mDrawable就越小。
w -= (int) ((w - iw) * (MAX_LEVEL - level) * mState.mScaleWidth / MAX_LEVEL);

ClipDrawable

• 對(duì)應(yīng)<clip>標(biāo)簽，用來(lái)裁剪另一個(gè)Drawable啊犬。

<?xml version="1.0" encoding="utf-8"?>
<clip 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@[package:]drawable/drawable_resource"
    android:clipOrientation="[vertical | horizontal]"
    android:gravity="[top | bottom | left | right |
        center_vertical | center_horizontal | center |
        fill_vertical | fill_horizontal | fill |
        clip_vertical | clip_horizontal]" />

• android:clipOrientation：表示裁剪方向灼擂，可選為水平和豎直。

• android:gravity：表示對(duì)齊方式觉至，需要和clipOrientation一起發(fā)揮作用缤至。它的取值有下表各種選項(xiàng)，可用|來(lái)組合使用康谆。

• ClipDrawable的裁剪程度由level控制泪漂，調(diào)用setLevel()可修改此值。其取值范圍為0~10000歪泳。0表示完全裁剪萝勤，即整個(gè)Drawable都不可見(jiàn)；而10000表示不裁剪呐伞。也可將level理解為可見(jiàn)區(qū)域大小敌卓，0表示可見(jiàn)區(qū)最小，10000表示可見(jiàn)區(qū)最大荸哟。

自定義Drawable

• Drawable的工作原理很簡(jiǎn)單假哎，其核心就是draw()。系統(tǒng)會(huì)調(diào)用Drawable的draw()來(lái)繪制View的背景或ImageView的圖像鞍历，于是我們可通過(guò)重寫(xiě)其draw()來(lái)實(shí)現(xiàn)自定義Drawable舵抹。

• 通常我們沒(méi)有必要去自定義Drawable，因?yàn)闊o(wú)法在XML中使用自定義Drawable劣砍，這就降低了其使用范圍惧蛹。

• 創(chuàng)建自定義Drawable，必須重寫(xiě)其draw()刑枝、setAlpha()香嗓、setColorFilter()、getOpacity()等方法装畅。以下為自定義Drawable示例：

/**
 * 自定義Drawable
 * Created by daking on 16/9/15.
 */
public class CustomDrawable extends Drawable {
    private Paint mPaint;
    
    public CustomDrawable(int color) {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(color);
    }
    
    @Override
    public void draw(Canvas canvas) {
        final Rect rect =  getBounds();
        float cx = rect.exactCenterX();
        float cy = rect.exactCenterY();
        canvas.drawCircle(cx, cy, Math.min(cx, cy), mPaint);
    }
    
    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
        invalidateSelf();
    }
    
    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
        invalidateSelf();
    }
    
    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

CustomDrawable drawable = new CustomDrawable(Color.BLUE);
imageView.setBackgroundDrawable(drawable);

• 若自定義的Drawable有固有大小時(shí)靠娱，要重寫(xiě)getIntrinsicWidth()和getIntrinsicHeight()。因?yàn)檫@兩個(gè)方法會(huì)影響到View的wrap_content布局掠兄。

• 注意像云，Drawable的內(nèi)部大小不等于Drawable的實(shí)際區(qū)域大小锌雀。可通過(guò)getBounds()獲得Drawable的實(shí)際區(qū)域大小迅诬，一般與它的View尺寸相同腋逆。

我的博客