Android中常用的Drawable

作者: daking | 来源:发表于2016-09-15 18:40 被阅读902次

前言

本文是本人阅读《Android开发艺术探索》的第6章《Android的Drawable》后的总结笔记。包含了Android开发中常用的Drawable，详解了它们的属性和用法。
本文的目录结构
- 前言
- Drawable简介
- Drawable分类
  - BitmapDrawable
  - NinePatchDrawable
  - ShapeDrawable
  - LayerDrawable
  - StateListDrawable
  - LevelListDrawable
  - TransitionDrawable
  - InsetDrawable
  - ScaleDrawable
  - ClipDrawable
- 自定义Drawable

Drawable简介

Drawable表示的是一种可以在Canvas上进行绘制的抽象的概念，可以是纯颜色，也可以是图片等。
Drawable一般是通过XML来定义，当然也可以通过代码来创建。
Drawable类是抽象类，它是所有Drawable的基类。
Drawable的getIntrinsicWidth()和getIntrinsicHeight()获取其内部宽/高。并不是所有Drawable都有内部宽/高。图片所形成的Drawable的内部宽/高就是图片的宽/高。颜色所形成的Drawable就没有内部宽/高的概念了。
Drawable是没有大小概念的，当用作View的背景时，会被拉伸至View的同等大小。
Drawable的使用范围很单一：一是作为ImageView中的图像显示，二是作为View的背景。

Drawable分类

BitmapDrawable

对应<bitmap>标签，几乎是最简单的Drawable，表示一张图片。
在实际开发中，我们可直接引用原始的图片，也可通过XML的方式来描述它。

<?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：是否开启图片抗锯齿。开启后会让图片变得平滑，同时也会一定程度上降低图片的清晰度。
android:dither：是否开启抖动效果。开启后可让高质量的图片在低质量的屏幕上能保持较好的显示效果。
android:filter：是否开启过滤效果。当图片尺寸被拉伸或压缩时，开启过滤效果可保持较好的显示效果。
android:gravity：当图片小于容器的尺寸时，设置此属性对图片进行定位。此属性的可选项较多，也可用|来组合使用。

可选项	含义
top	将图片放在容器的顶部，不改变其大小。
bottom	将图片放在容器的底部，不改变其大小。
left	将图片放在容器的左部，不改变其大小。
right	将图片放在容器的右部，不改变其大小。
center_vertical	使图片竖直居中，不改变其大小。
center_horizontal	使图片水平居中，不改变其大小。
fill_vertical	图片竖直方向填充容器
fill_horizontal	图片水平方向填充容器
center	使图片居中，不改变其大小。
fill	图片填充容器，默认值。
clip_vertical	竖直方向的裁剪。
clip_horizontal	水平方向的裁剪。

android:mipMap：是否开启纹理映射。
android:tileMode：平铺模式。

可选项	含义
disabled	默认值，关闭平铺模式。
clamp	图片四周的像素会扩展到周围区域。
repeat	简单的水平和竖直方向上的平铺效果。
mirror	在水平和竖直方向上的镜面投影效果。

NinePatchDrawable

表示一张.9格式的图片。.9图片可自动地根据所需的宽/高进行相应的缩放并保证不失真。
在实际使用中直接引用.9图片，也可以通过XML来描述它。

<?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：是否开启抖动效果。开启后可让高质量的图片在低质量的屏幕上能保持较好的显示效果。

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(横线)和ring(圆环)。默认是rectangle。注意line和ring必须通过<stroke>标签来指定线的宽度和颜色等信息，否则无法达到预期的显示效果。
android:shape="ring"有5个特殊属性。

属性	描述
android:innerRadius	圆环的内半径。<Br>会覆盖android:innerRadiusRatio。
android:innerRadiusRatio	内半径占整个Drawable宽度的比例。默认为9，若为n，则内半径 = 宽度 / n。
android:thickness	圆环的厚度。即外半径减去内半径的大小。<Br>会覆盖android:thicknessRatio
android:thicknessRatio	厚度占整个Drawable宽度的比例。默认为3，若为n，则厚度 = 宽度 / n。
android:useLevel	常为false，除非它被当做是LevelListDrawable。

<corners>：表示shape的四个圆角的角度，只适用于矩形。
1. android:radius：为四个角同事设定相同的角度。优先级比以下4个属性要低。
2. android:topLeftRadius：左上角的角度。
3. android:topRightRadius：右上角的角度。
4. android:bottomLeftRadius：左下角的角度。
5. android:bottomRightRadius：右下角的角度。
<solid>：纯色填充，通过android:color指定填充的颜色。
<gradient>：渐变效果。与<solid>纯色填充是互相排斥的。
1. android:angle：渐变的角度。默认为0，其值必须为45的倍数。此角度会影响渐变的方向，0表示从左到右，90表示从下到上。
2. android:centerX：渐变的中心点的X坐标。
3. android:centerY：渐变的中心点的Y坐标。
4. android:startColor：渐变的起始色。
5. android:centerColor：渐变的中间色。
6. android:endColor：渐变的结束色。
7. android:gradient：渐变半径。仅当android:type="radial"时有效。
8. android:useLevel：一般为false，当Drawable作为StateListDrawable时为true。
9. android:type：渐变的类别。有linear(线性渐变)、radial(径向渐变)、sweep(扫描线渐变)，默认为linear。
<stroke>：描边。
1. android:width：描边的宽度。
2. android:color：描边的颜色。
3. android:dashWidth：虚线的宽度。
4. android:dashGap：虚线之间的间隔。
<padding>：空白。有top等四个属性。
<size>：大小。其android:width和android:height分别设定shape的宽/高。注意，这个表示的是shape的固有大小，但并不是其最终大小。

LayerDrawable

对应<layer-list>标签，表示一种层次化的Drawable集合，通过将不同的Drawable放置在不同的层上面从而达到一种叠加后的效果。

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

一个layer-list可包含多个item，每个item表示一个Drawable。可在android:drawable中引用一个现有的Drawable资源，也可在<item>中自定义Drawable。
默认情况下，layer-list中的所有Drawable都会被缩放至View的大小。可设置Drawable相对于View的上下左右偏移量。另外对于bitmap，需要使用其android:gravity来控制图片的显示效果。
layer-list有层次的概念，下面的item会覆盖上面的item。通过合理的分层，可实现一些特殊的叠加效果。

利用layer-list实现一个文本输入框。

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

对应<selector>标签，表示一个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 | 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的固有大小是否不随着其状态的改变而改变。默认为false，即随着状态的改变而改变大小。若为true，则表示其内部所有Drawable的固有大小的最大值。
android:dither：是否开启抖动效果。
android:variblePadding：StateListDrawable的padding是否随着其状态的改变而改变。默认为false，表示其内部所有Drawable的padding的最大值。若为true，表示会随着状态的改变而改变。
<item>：表示某种状态下的一个具体的Drawable。用android:drawable指定一个现有Drawable的资源id，剩下的属性表示的是View的各种状态。

状态	含义
android:state_pressed	表示按下状态。
android:state_focused	表示已经获取了焦点。
android:state_selected	表示用户选择了View。
android:state_checked	表示用户选中了View。<Br>适用于CheckBox这类在选中和非选中状态之间进行切换的View。
android:state_enabled	表示View当前处于可用状态。

系统会按照从上到下的顺序查找，直至查找到第一条匹配的item。一般来说，默认的item都应该放在selector的最后一条，并且不附带任何的状态。

LevelListDrawable

对应<level-list>标签，表示一个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="@[package:]drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
    <!-- 其他item -->
</level-list>

每个item表示一个Drawable，并且有对应的等级范围，在maxLevel和minLevel之间。取值范围为0~10000，默认为0。
若作为View背景时，可通过Drawable的setLevel()来设置不同的等级来切换具体的Drawable。若作为ImageView的前景，可通过ImageView的setImageLevel()来切换。

TransitionDrawable

对应于<transition>标签，用于实现两个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" />
    <!-- 另一个item，注意transition只包含两个item -->
</transition>

常将TransitionDrawable作为View的背景，再调用它的startTransition()和reverseTransition()来实现淡入淡出效果以及它的逆过程。

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

InsetDrawable

对应<inset>标签，可将其他Drawable内嵌到自己当中，并可在四周留出一定的间距。

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

当一个View希望自己的背景比自己的实际区域小的时候，可采用InsetDrawable，并通过inset*属性来设置留白。

ScaleDrawable

对应<scale>标签，将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%，表示缩放到原来的30%。

从ScaleDrawable的draw()源代码来看，若等级为0时，不可见。等级默认为0，所以调用ScaleDrawable的setLevel()设置一个大于0的等级，它才会可见。

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

分析ScaleDrawable的onBoundsChange()可看出其内部mDrawable的大小和等级以及缩放比例的关系。

// iw常为0
final int iw = min ? d.getIntrinsicWidth() : 0;
// 1. MAX_LEVEL为10000，即等级的取值范围为0~10000。
// 2. 计算得到的最终w为其内部mDrawable最后显示的宽度。因为是-=，所以右边算数得到的值越大，则最终w就越小。
// 3. level越大，其内部mDrawable就越大。
// 4. ScaleDrawable的XML中所定义的缩放比例越大，即mState.mScaleWidth越大，则内部mDrawable就越小。
w -= (int) ((w - iw) * (MAX_LEVEL - level) * mState.mScaleWidth / MAX_LEVEL);

ClipDrawable

对应<clip>标签，用来裁剪另一个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：表示对齐方式，需要和clipOrientation一起发挥作用。它的取值有下表各种选项，可用|来组合使用。

选项	含义
top	放在容器的顶部，不改变大小。若为竖直裁剪，则从底部开始裁剪。
bottom	放在容器的底部，不改变大小。若为竖直裁剪，则从顶部开始裁剪。
left	这是默认值。放在容器的左边，不改变大小。若为水平裁剪，则从右边开始裁剪。
right	放在容器的右边，不改变大小。若为水平裁剪，则从左边开始裁剪。
center_vertical	在容器中竖直居中，不改变大小。若为竖直裁剪，则从上下同时裁剪。
center_horizontal	在容器中水平居中，不改变大小。若为水平裁剪，则从左右同时裁剪。
center	居中，不改变大小。若为竖直裁剪，则从上下同时裁剪。若为水平裁剪，则从左右同时裁剪。
fill_vertical	在竖直方向上填充容器。若为竖直裁剪，仅当等级为0时才能有裁剪行为。
fill_horizontal	在水平方向上填充容器。若为水平裁剪，仅当等级为0时才能有裁剪行为。
fill	完全填充容器。仅当等级为0时才能有裁剪行为。
clip_vertical	附加选项，表示竖直方向的裁剪。较少使用。
clip_horizontal	附加选项，表示水平方向的裁剪。较少使用。

ClipDrawable的裁剪程度由level控制，调用setLevel()可修改此值。其取值范围为0~10000。0表示完全裁剪，即整个Drawable都不可见；而10000表示不裁剪。也可将level理解为可见区域大小，0表示可见区最小，10000表示可见区最大。

自定义Drawable

Drawable的工作原理很简单，其核心就是draw()。系统会调用Drawable的draw()来绘制View的背景或ImageView的图像，于是我们可通过重写其draw()来实现自定义Drawable。
通常我们没有必要去自定义Drawable，因为无法在XML中使用自定义Drawable，这就降低了其使用范围。
创建自定义Drawable，必须重写其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有固有大小时，要重写getIntrinsicWidth()和getIntrinsicHeight()。因为这两个方法会影响到View的wrap_content布局。
注意，Drawable的内部大小不等于Drawable的实际区域大小。可通过getBounds()获得Drawable的实际区域大小，一般与它的View尺寸相同。

我的博客

Android中常用的Drawable

前言

Drawable简介

Drawable分类

BitmapDrawable

NinePatchDrawable

ShapeDrawable

LayerDrawable

StateListDrawable

LevelListDrawable

TransitionDrawable

InsetDrawable

ScaleDrawable

ClipDrawable

自定义Drawable

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

APP开发经验总结

Android知识

首页投稿（暂停使用，暂停投稿）

程序员

Android/NDK开发