View绘制流程之drawable(一)

Drawable

Drawable,Bitmap,Canvas,View之间的关系

以下纯属于个人理解,参考自文献1文献2文献2

Bitmap是一种像素存储介质,图像最终要保存下来要通过它。Canvas则是绘图工具,提供了2D的绘图方法,方便我们绘图。View是一种容器,装在Bitmap,将其呈现出来。Drawable:Android把可绘制的图像抽象成了Drawable,封装了一系列绘图时需要做的工作(例如设定角度、長度、大小、顏色),最后在draw()方法中用Canvas以及Bitmap绘制。那么有了疑问既然Canvas能完成绘图的工作和必要Drawable呢?其实绘图还需要Paint,来设置画笔的颜色,尺寸等属性。Drawable相当于一个框架,集合了绘图的一些列工作(Paint,Canvas,Bitmap),封装起来,方便开发者使用。

Drawable类型

Android内置了如下几种Drawable类型:ColorDrawable、GradientDrawable、BitmapDrawable、 NinePatchDrawable、InsetDrawable、ClipDrawable、ScaleDrawable、RotateDrawable、AnimationDrawable、LayerDrawable、LevelListDrawable、StateListDrawable、TransitionDrawable

在实际的开发过程中,会把使用到的资源都放置在res/drawable目录,AndroidStudio会把该目录下的资源在项目R文件中生成相应的id。当需要使用图片资源的时候,可以使用@drawable标志在xml中引用drawable资源,也可以在代码中使用id引用这些drawable资源。

drawable是内存共享的,也就是说不同地方使用同一个id,指向的是同一个drawable资源,具有相同的状态。当改变drawable资源的状态,引用该资源的地方都会改变。

ColorDrawable

ColorDrawable 是最简单的Drawable,它实际上是代表了单色可绘制区域,它包装了一种固定的颜色,当ColorDrawable被绘制到画布的时候会使用颜色填充Paint,在画布上绘制一块单色的区域。
XML

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

在xml文件中使用color作为根节点来创建ColorDrawable,它只有一个android:color属性,通过它来决定ColorDrawable的颜色,Android并没有提供修改这个颜色值的Api,所以这个颜色一旦设置之后,就不能直接修改了。

我们也可以通过java代码来创建ColorDrawable对象。Android中使用一个int类型的数据表示颜色值,通常习惯使用十六进制格式的数据表示颜色值。一个int类型包含四个字节,分别代表颜色的4个组成部分:透明度(Alpha)、红(RED)、绿(GREEN)、蓝(BLUE),每个部分由一个字节(8个bit)表示,取值范围为0~255。在xml中使用颜色时可以省略透明度(Alpha)部分,如#ff0000表示红色。但是在代码中必须要明确指出透明度(Alpha)代表的数据,如果省略了就表示完全透明的颜色,例如0xFFFF0000表示红色,而0xFF0000虽然也表示红色,但它却是完全透明的,也就是说当绘制到画布上时,看不出有任何效果。
java

ColorDrawable drawable = new ColorDrawable(0xffff0000);

GradientDrawable

GradientDrawable 表示一个渐变区域,可以实现线性渐变、发散渐变和平铺渐变效果,在Android中可以使用GradientDrawable表示很多复杂而又绚丽的界面效果。
在xml文件中使用shape作为根节点来创建GradientDrawable,它包含很多属性和子节点:
shape属性是形状定义,通过android:shape属性指定:

  • rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
  • oval: 椭圆形,用得比较多的是画正圆
  • line: 线形,可以画实线和虚线
  • ring: 环形,可以画环形进度条

shape还有一些特定场合的属性,适用于android:shape属性指定为ring时生效:

  • android:innerRadius 内环的半径
  • android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
  • android:thickness 环的厚度
  • android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
  • android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true

子节点有:

  • solid: 设置形状填充的颜色,只有android:color一个属性

    android:color 填充的颜色

  • padding: 设置内容与形状边界的内间距,可分别设置左右上下的距离

    1. android:left 左内间距
    2. android:right 右内间距
    3. android:top 上内间距
    4. android:bottom 下内间距
  • gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变

    1. android:type 渐变的类型
      • linear 线性渐变,默认的渐变类型
      • radial 放射渐变,设置该项时,android:gradientRadius也必须设置
      • sweep 扫描性渐变
    2. android:startColor 渐变开始的颜色
    3. android:endColor 渐变结束的颜色
    4. android:centerColor 渐变中间的颜色
    5. android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
    6. android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
    7. android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
    8. android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
    9. android:useLevel 如果为true,则可在LevelListDrawable中使用
  • corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了

    1. android:radius 圆角半径,会被下面每个特定的圆角属性重写
    2. android:topLeftRadius 左上角的半径
    3. android:topRightRadius 右上角的半径
    4. android:bottomLeftRadius 左下角的半径
    5. android:bottomRightRadius 右下角的半径
  • stroke: 设置描边,可描成实线或虚线。

    1. android:color 描边的颜色
    2. android:width 描边的宽度
    3. android:dashWidth 设置虚线时的横线长度
    4. android:dashGap 设置虚线时的横线之间的距离
  • size: 设置形状默认的大小,可设置宽度和高度

    1. android:width 宽度
    2. android:height 高度

实例XML:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- shape可以定义四种形状的drawable,矩形,椭圆形,线性,环形.默认矩形-->
    <!--指定形状的填充色,唯一属性color-->
    <solid android:color="@android:color/holo_blue_light"/>

    <gradient
        android:type="linear"
        android:startColor="#E3F2FD"
        android:centerColor="#90CAF9"
        android:endColor="#0D47A1"
        android:angle="0"/>
    <!-- 设置内边距-->
    <padding
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp"/>
    <!-- corners设置圆角,只适用于rectangle -->
    <corners android:radius="200dp"/>
    <!-- stroke设置drawable边框
         width设置变宽宽度
         color设置边框颜色
         dashGap设置虚线段的间隔
         dashWidth设置虚线段的长度-->
    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray"
        android:dashGap="4dp"
        android:dashWidth="4dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <!-- android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用 -->
    <gradient
        android:type="radial"
        android:startColor="@android:color/holo_blue_light"
        android:endColor="@android:color/holo_red_light"
        android:centerColor="@android:color/holo_green_light"
        android:gradientRadius="50dp"
        android:centerX="1"
        android:centerY="0.8"
        />

    <padding
        android:bottom="4dp"
        android:top="4dp"
        android:right="4dp"
        android:left="4dp"/>

    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- line主要用于画分割线,是通过stroke和size特性组合 -->

    <!-- 实际显示的线 -->
    <stroke
        android:width="1dp"
        android:color="@android:color/black"
        android:dashGap="3dp"
        android:dashWidth="8dp"/>

    <!-- 形状的高度-->
    <size
        android:height="4dp"/>

    <!-- 这里需要注意:
         只能够画水平线;
         线的高度由stroke节点的android:width属性指定;
         形状的高度由size节点的android:height属性指定,
         其值必须大于stroke节点的android:width的,
         否则线将无法显示;
         线在形状中时居中的;
         引用虚线的view需要添加属性android:layerType,
         值设为"software",否则显示不了虚线。
         -->
</shape>

当android:shape属性制定为ring时,在shape跟节点中有一些特定的属性生效:

  • android:innerRadius 内环的半径
  • android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
  • android:thickness 环的厚度
  • android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
  • android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadiusRatio="4"
       android:thicknessRatio="5"
       android:shape="ring"
       android:useLevel="false">
    <!--环形的宽度是指环形drawable外面矩形的宽度,
        环形的厚度指的是外径减去内径的大小-->
    <gradient
        android:centerColor="@android:color/holo_green_light"
        android:endColor="@android:color/holo_red_light"
        android:startColor="@android:color/holo_blue_light"
        android:type="sweep"/>
    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>

效果图:

TestDrawable.png

细说Drawable和View之间的关系

每一个View包括其子类都有一个drawable成员变量。在View.java中有一个Drawable作为背景。
其实改变View图形显示的2D绘画有两种方式:

  • 调用 View 及其子类提供的方法如 View:setBackground(Drawable)ImageView:setImageBitmap(Bitmap), 这些方法直接或间接设置相应类中的 Drawable 私有成员。
  • 继承 View 并重载 onDraw(Canvas),回调中得到画布 Canvas,调用其一系列基本图形的绘画 draw 方法操作其 Bitmap 中的像素数据。

虽然第二种情况看似和drawable无关,其实在View.java中的draw()方法调用了drawable.draw(canvas)将背景绘制:

public class View {
  ...
  private Drawable mBackground; // 背景
  ...

  public void draw(Canvas canvas) {
    ...
    // Step 1, draw the background, if needed
    if (!dirtyOpaque) {
      drawBackground(canvas);
    }
    ...
  }

  private void drawBackground(Canvas canvas) {
    final Drawable background = mBackground;
    ...
    background.draw(canvas);
    ...
  }
}

参考资料,资料1资料2

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

推荐阅读更多精彩内容