View绘制流程之drawable（一）

2016-08-13  本文已影响556人  狮_子歌歌

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属性指定：

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

子节点有：

实例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跟节点中有一些特定的属性生效：

<?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绘画有两种方式：

虽然第二种情况看似和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

上一篇 下一篇

猜你喜欢

热点阅读