跳到主要内容

图片资源:Drawable

在学习 View 的时候,我们学习过 ImageView。它除了在 xml 的 src 属性中设置图片之外,还可以通过setImageDrawable( )setBackgroundDrawable( )两个 API 设置图片资源。这两个 API 都包含一个关键词——Drawable,那么我们这一节就来看看,Drawable 到底是个什么东西。

1. Drawable 是什么

Drawable 从字面上理解就是一个可绘制的图形对象,最简单的例子就是常用的 Bitmap 对象,在 Android 中可以通过一个 BitmapDrawable 对象来呈现。

每一个 Drawable 内部都保存了一个“res/drawable”目录下的私有文件,比如我们会将不同分辨率的图片资源存储在“mdpi”、“hdpi”、“xhdpi”以及“xxhdpi”里面,这些目录是在创建工程的时候 Android Studio 自动帮我们生成好的,然后在运行的时候系统会根据当前的设备类型自动选择一种合适的 bitmap 图片资源为我们所用。

2. 为 View 设置 Drawable

在 xml 中使用是很最常见的用法,而且我们一直在用,回顾一下我们设置的图片资源,比如一个 TextView 的背景样式,通常会这么写:

<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 属性的值就是一个 Drawable 对象,同样我们可以在 Java 代码中给 View 设置一个 Drawable 参数:

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

3. 加载 Bitmap 和 Drawable

Android 提供了一个Bitmap类来处理 bitmap 图片相关的功能,接下来我们看看如何通过 Java 代码创建一个 Bitmap 并将 Bitmap 转换成 Drawable:

        ​AssetManager manager = getAssets();

​// 从 assets 中读取 bitmap
​InputStream open = null;
​try {
​open = manager.open("imooc.png");
​Bitmap bitmap = BitmapFactory.decodeStream(open);
​// 给 imageView 设置 bitmap 对象
​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,并在代码中转换成 Bitmap 对象,如下:

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

在获取的同时,我们还可以对图像进行任意比例的缩放:

Bitmap originalBitmap = getBitmap();

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

反过来,我们也可以将 Bitmap 转换成一个 Drawable 对象:

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

4. 通过 xml 声明 Drawable

我们可以在 xml 中声明很多种类型的 Drawable,用于对各种动画、背景、状态等等进行描述。

4.1 Shape Drawables

Shape Drawables 可以用来定义一个 View 的外形、颜色、渐变等等属性,它的最大的有点就是可以根据任意尺寸的 View

进行自适应,代码示例如下:

<?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>

以上代码分别为背景设置了边框、渐变、角弧度,编写完直接作为背景资源设置即可:

<?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 用来描述一个 View 在不同状态下的形态,我们可以给每一种状态设置一中背景样式,比如我们可以让我们的 Button 在点击、选择和默认态下呈现不同的样式:

<?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 是一种动画资源,我们可以将动画的时长、形态、起终点等信息描述在 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 代码中直接作为背景设置:

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

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

4.4 自定义 Drawable

除了上面常用的系统提供的 Drawable 之外,我们还可以自定义自己想要的图片资源,在本节的示例中我们就来自定义一个资源样式。

5. Drawable 使用示例

我们通常使用的 ImageView 都是矩形的,但是为了让 UI 样式更

5.1 Drawable 实现

既然要自定义 Drawable 资源,那么首先需要创建一个类继承自 Drawable,然后在构造器中创建画笔“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实际宽高
@Override
public int getIntrinsicWidth() {
return mBitmap.getWidth();
}

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

我们在构造器中创建了一个画笔,并传入了 Bitmap 对象,此后系统在绘制的时候回调draw()方法,完成圆角形状的绘制,这样就完成了一个圆角 bitmap 的裁剪工作。

5.2 MainActivity 主逻辑

在主逻辑中我们直接拿到 ImageView,然后获取我们要设置的 Bitmap 资源,直接通过setBackground()方法设置给 ImageView,这样呈现出来的图片就是圆角形状。


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));
}
}

编译后效果如下,展示一张圆角图片:

drawable

6. 小结

本节学习了一个很多人经常用到却很少留意的类,在给 View 设置背景、前景等图片及样式的时候都离不开 Drawable 的参与。首先需要学习系统提供的一些常用 Drawable 对象,这样其实在大多数场景都能应对,如果要处理一些特殊的样式可以采用自定义 Drawable 的方式。