圖片資源：Drawable

在學(xué)習(xí) View 的時(shí)候，我們學(xué)習(xí)過 ImageView。它除了在 xml 的 src 屬性中設(shè)置圖片之外，還可以通過setImageDrawable( )和setBackgroundDrawable( )兩個(gè) API 設(shè)置圖片資源。這兩個(gè) API 都包含一個(gè)關(guān)鍵詞——Drawable，那么我們這一節(jié)就來看看，Drawable 到底是個(gè)什么東西。

1. Drawable 是什么

Drawable 從字面上理解就是一個(gè)可繪制的圖形對(duì)象，最簡(jiǎn)單的例子就是常用的 Bitmap 對(duì)象，在 Android 中可以通過一個(gè) BitmapDrawable 對(duì)象來呈現(xiàn)。
每一個(gè) Drawable 內(nèi)部都保存了一個(gè)“res/drawable”目錄下的私有文件，比如我們會(huì)將不同分辨率的圖片資源存儲(chǔ)在“mdpi”、“hdpi”、“xhdpi”以及“xxhdpi”里面，這些目錄是在創(chuàng)建工程的時(shí)候 Android Studio 自動(dòng)幫我們生成好的，然后在運(yùn)行的時(shí)候系統(tǒng)會(huì)根據(jù)當(dāng)前的設(shè)備類型自動(dòng)選擇一種合適的 bitmap 圖片資源為我們所用。

2. 為 View 設(shè)置 Drawable

在 xml 中使用是很最常見的用法，而且我們一直在用，回顧一下我們?cè)O(shè)置的圖片資源，比如一個(gè) TextView 的背景樣式，通常會(huì)這么寫：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/text"
    android:text="@string/hello_world" />

其中 background 屬性的值就是一個(gè) Drawable 對(duì)象，同樣我們可以在 Java 代碼中給 View 設(shè)置一個(gè) Drawable 參數(shù)：

ImageView imageView = (ImageView) findViewById(R.id.imageview);
imageView.setImageResource(R.drawable.image);

3. 加載 Bitmap 和 Drawable

Android 提供了一個(gè)Bitmap類來處理 bitmap 圖片相關(guān)的功能，接下來我們看看如何通過 Java 代碼創(chuàng)建一個(gè) Bitmap 并將 Bitmap 轉(zhuǎn)換成 Drawable：

        ?AssetManager manager = getAssets();

       ?// 從 assets 中讀取 bitmap
       ?InputStream open = null;
       ?try {
           ?open = manager.open("imooc.png");
           ?Bitmap bitmap = BitmapFactory.decodeStream(open);
           ?// 給 imageView 設(shè)置 bitmap 對(duì)象
           ?ImageView view = (ImageView) findViewById(R.id.imageView1);
           ?view.setImageBitmap(bitmap);
       ?} catch (IOException e) {
           ?e.printStackTrace();
       ?} finally {
           ?if (open != null) {
               ?try {
                   ?open.close();
               ?} catch (IOException e) {
                   ?e.printStackTrace();
               ?}
           ?}

除此之外，還可以從“res/drawable”文件夾中獲取 Drawable，并在代碼中轉(zhuǎn)換成 Bitmap 對(duì)象，如下：

Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap);

在獲取的同時(shí)，我們還可以對(duì)圖像進(jìn)行任意比例的縮放：

Bitmap originalBitmap = getBitmap();

Bitmap resizedBitmap = Bitmap.createScaledBitmap(originalBitmap, newWidth, newHeight, false);

反過來，我們也可以將 Bitmap 轉(zhuǎn)換成一個(gè) Drawable 對(duì)象：

Drawable drawable = new BitmapDrawable(getResources(),bitmap);

4. 通過 xml 聲明 Drawable

我們可以在 xml 中聲明很多種類型的 Drawable，用于對(duì)各種動(dòng)畫、背景、狀態(tài)等等進(jìn)行描述。

4.1 Shape Drawables

Shape Drawables 可以用來定義一個(gè) View 的外形、顏色、漸變等等屬性，它的最大的有點(diǎn)就是可以根據(jù)任意尺寸的 View
進(jìn)行自適應(yīng)，代碼示例如下：

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="10dp"
        android:color="#FFFFFFFF" />
    <gradient
        android:endColor="#EF3434AB"
        android:startColor="#FF98df9d"
        android:angle="45" />
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
</shape>

以上代碼分別為背景設(shè)置了邊框、漸變、角弧度，編寫完直接作為背景資源設(shè)置即可：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/myshape"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     >
    </EditText>

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/celsius" >
        </RadioButton>

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fahrenheit" >
        </RadioButton>
    </RadioGroup>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/calc"
        android:onClick="myClickHandler">
    </Button>

</LinearLayout>

4.2 State Drawables

State Drawables 用來描述一個(gè) View 在不同狀態(tài)下的形態(tài)，我們可以給每一種狀態(tài)設(shè)置一中背景樣式，比如我們可以讓我們的 Button 在點(diǎn)擊、選擇和默認(rèn)態(tài)下呈現(xiàn)不同的樣式：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/button_checked"
        android:state_checked="true" />
    <item android:drawable="@drawable/button_default" />

</selector>

4.3 Animation Drawables

Animation Drawables 是一種動(dòng)畫資源，我們可以將動(dòng)畫的時(shí)長(zhǎng)、形態(tài)、起終點(diǎn)等信息描述在 xml 中，如下：

 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/phase1" android:duration="100" />
    <item android:drawable="@drawable/phase2" android:duration="200" />
    <item android:drawable="@drawable/phase3" android:duration="300" />
 </animation-list>

同樣在 Java 代碼中直接作為背景設(shè)置：

ImageView image = (ImageView)findViewById(R.id.img);
img.setBackgroundResource(R.drawable.animation);

 AnimationDrawable frameAnimation = (AnimationDrawable) image.getBackground();
 frameAnimation.start();

4.4 自定義 Drawable

除了上面常用的系統(tǒng)提供的 Drawable 之外，我們還可以自定義自己想要的圖片資源，在本節(jié)的示例中我們就來自定義一個(gè)資源樣式。

5. Drawable 使用示例

我們通常使用的 ImageView 都是矩形的，但是為了讓 UI 樣式更

5.1 Drawable 實(shí)現(xiàn)

既然要自定義 Drawable 資源，那么首先需要?jiǎng)?chuàng)建一個(gè)類繼承自 Drawable，然后在構(gòu)造器中創(chuàng)建畫筆“Paint”，然后在draw()方法中繪制圖案即可，代碼示例如下：

package com.emercy.myapplication;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

public class RoundCornerDrawable extends Drawable {

    private Paint mPaint;
    private Bitmap mBitmap;

    public RoundCornerDrawable(Bitmap bitmap) {
        this.mBitmap = bitmap;
        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(bitmapShader);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight()), 100, 100, mPaint);
    }

    @Override
    public void setAlpha(int i) {
        mPaint.setAlpha(i);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    // 返回drawable實(shí)際寬高
    @Override
    public int getIntrinsicWidth() {
        return mBitmap.getWidth();
    }

    @Override
    public int getIntrinsicHeight() {
        return mBitmap.getHeight();
    }
}

我們?cè)跇?gòu)造器中創(chuàng)建了一個(gè)畫筆，并傳入了 Bitmap 對(duì)象，此后系統(tǒng)在繪制的時(shí)候回調(diào)draw()方法，完成圓角形狀的繪制，這樣就完成了一個(gè)圓角 bitmap 的裁剪工作。

5.2 MainActivity 主邏輯

在主邏輯中我們直接拿到 ImageView，然后獲取我們要設(shè)置的 Bitmap 資源，直接通過setBackground()方法設(shè)置給 ImageView，這樣呈現(xiàn)出來的圖片就是圓角形狀。

package com.emercy.myapplication;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;

import java.io.InputStream;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView image = (ImageView) findViewById(R.id.image);
        InputStream resource = getResources().openRawResource(R.raw.avatar);
        Bitmap bitmap = BitmapFactory.decodeStream(resource);
        image.setBackground(new RoundCornerDrawable(bitmap));
    }
}

編譯后效果如下，展示一張圓角圖片：

6. 小結(jié)

本節(jié)學(xué)習(xí)了一個(gè)很多人經(jīng)常用到卻很少留意的類，在給 View 設(shè)置背景、前景等圖片及樣式的時(shí)候都離不開 Drawable 的參與。首先需要學(xué)習(xí)系統(tǒng)提供的一些常用 Drawable 對(duì)象，這樣其實(shí)在大多數(shù)場(chǎng)景都能應(yīng)對(duì)，如果要處理一些特殊的樣式可以采用自定義 Drawable 的方式。