Android Drawable 基础常识

一、 Drawable简介

1 Drawable表示的是一种可以在Canvas上进行绘制的抽象的概念,可以是纯颜色,也可以是图片等。

2 Drawable一般是通过XML来定义,当然也可以通过代码来创建。

3 Drawable类是抽象类,它是所有Drawable的基类。

4 Drawable的 getIntrinsicWidth()getIntrinsicHeight() 获取其内部宽/高。并不是所有Drawable都有内部宽 / 高。图片所形成的Drawable的内部宽 / 高就是图片的宽 / 高。颜色所形成的Drawable就没有内部宽/高的概念了。

5 Drawable是没有大小概念的,当用作View的背景时,会被拉伸至View的同等大小。

6 Drawable的使用范围很单一:一是作为ImageView中的图像显示,二是作为View的背景。

dd.jpg
二、Drawable的分类
(一)、BitmapDrawable

在这之前先说一下Bitmap
Bitmap 代表一个位图图像,Android支持三种格式的位图图像:.png (preferred)(支持最好),.jpg (acceptable), .gif (discouraged)(支持最差)。

在构建应用的时候,Bitmap文件可能会被appt工具压缩自动优化为无损图像。例如,一个真彩色PNG,不需要超过256的颜色可以被转换成一个8位PNG和调色板。这将导致一个图像质量相同,但这需要更少的内存。所以要意识到,在drawable目录中图像的二进制文件在构建程序时可以改变。如果你打算读一个图像作为字节流并将它转换成一个位图,把你的图片放在在res /raw/文件夹里,在那里他们不会被优化。

BitmapDrawable 是可以设定背景的对齐方式、是否平铺的Bitmap。在实际开发中的例子如下:

<?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:antialias 抗锯齿

是否开启抗锯齿,图片会更加平滑,会降低清楚度,但是基本忽略,所以,开。

  • android:dither 抖动效果

是否开启抖动,开。
抖动的作用:让高质量的图片的比较低质量的屏幕上不失真,得到比较好的显示效果。
比如图片的色彩模式是 ARGB8888,但是手机设备的支持RGB555的色彩模式,那么开启这么就可以有效减少失真现象。
(Android中我们创建的Bitmap一般会选择ARGB888模式,ARGB每个通道各占8位,8位1个字节,一个像素4个字节,一个像素的位数总和越高,图片越逼真)

  • android:filter 过滤效果

开。在图片图片被拉伸或者压缩的时候开启过滤效果可以显示更加好的效果。

  • android:gravity 图片的对齐效果

是否开启抗锯齿,图片会更加平滑,会降低清楚度,但是基本忽略,所以,开。

  • android:mipmap

纹理映射,先默认为false。

  • gravity 选项的可选项

top | bottom | left | right | center_vertical | center_horizontal | center:保持原有大小,图片至于容器的顶部|底部|左部|右部|垂直居中|图片水平居中 |同时水平和垂直居中
fill_vertical | fill_horizontal 图片垂直方向|水平方向填充容器
fill 默认值,同时水平和垂直拉伸
**clip_vertical | clip_horizontal **附加项,表示垂直 | 水平方向的裁剪
需要说明的是,这些对其方式可以利用 | 符号同时使用,比如
android:gravity="top|left"

  • android:tileMode

平铺模式, 当开启 tileMode 之后 ,gravity 属性会被忽略
**disabled ** 关闭平铺模式
**clamp ** 大小不变,像素在四周扩散
**repeat ** 常见的水平和垂直方向的平铺
**mirror ** 水平和垂直方向的镜面投影

Paste_Image.png
(二) 、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]" />
(三) 、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。注意linering必须通过<stroke>标签来指定线的宽度和颜色等信息,否则无法达到预期的显示效果。

  • android:shape="ring"有5个特殊属性。
android:innerRadius

圆环的内半径。会覆盖android:innerRadiusRatio。

android:innerRadiusRatio

内半径占整个Drawable宽度的比例。
默认为9,若为n,则内半径 = 宽度 / n。

android:thickness

圆环的厚度。即外半径减去内半径的大小。
会覆盖android:thicknessRatio

android:thicknessRatio

厚度占整个Drawable宽度的比例。
默认为3,若为n,则厚度 = 宽度 / n。

android:useLevel

常为false,除非它被当做是LevelListDrawable。

  • <corners>:表示shape的四个圆角的角度,只适用于矩形。

android:radius:为四个角同事设定相同的角度。优先级比以下4个属性要低。
android:topLeftRadius:左上角的角度。
android:topRightRadius:右上角的角度。
android:bottomLeftRadius:左下角的角度。
android:bottomRightRadius:右下角的角度。

  • <solid>

纯色填充,通过android:color指定填充的颜色。

  • <gradient>:表示shape的四个圆角的角度,只适用于矩形。
    渐变效果。与<solid>纯色填充是互相排斥的。

android:angle:渐变的角度。默认为0,其值必须为45的倍数。此角度会影响渐变的方向,0表示从左到右,90表示从下到上。
android:centerX:渐变的中心点的X坐标。
android:centerY:渐变的中心点的Y坐标。
android:startColor:渐变的起始色。
android:centerColor:渐变的中间色。
android:endColor:渐变的结束色。
android:gradient:渐变半径。仅当android:type="radial"时有效。
android:useLevel:一般为false,当Drawable作为StateListDrawable时为true。
android:type:渐变的类别。有linear(线性渐变)、radial(径向渐变)、sweep(扫描线渐变),默认为linear。

  • <stroke>:描边。

android:width:描边的宽度。
android:color:描边的颜色。
android:dashWidth:虚线的宽度。

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实现一个文本输入框。

 <?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一起发挥作用。它的取值有下表各种选项,可用|来组合使用。
Paste_Image.png
  • 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尺寸相同。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,973评论 25 707
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,822评论 1 19
  • 1、Drawable 简介 Drawable——可简单理解为可绘制物,表示一些可以绘制在 Canvas 上的对象。...
    牧秦丶阅读 14,773评论 0 15
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,383评论 0 17
  • 黑白尺幅一点朱, 经纬方寸显亲疏; 纸上劳作无寒暑, 管他收成有也无。
    左立夫阅读 324评论 0 0