Android Drawable(可绘制对象资源)

       Drawable:Android中是指可在屏幕上绘制的图形。Android里面有以下几种常见的Drawable(他们都继承自Drawable):位图文件(BitmapDrawable)、9.png文件(NinePatchDrawable)、图层列表(LayerDrawable)、状态列表(StateListDrawable)、级别列表(LevelListDrawable)、转换可绘制对象(TransitionDrawable)、插入可绘制对象(InsetDrawable)、裁剪可绘制对象(ClipDrawable)、缩放可绘制对象(ScaleDrawable)、形状可绘制对象(ShapeDrawable)。

一、位图(BitmapDrawable)

       位图应该是开发过程中使用最多的Drawable资源了。位图分两种:位图文件、XML位图。

1.1、位图文件

       一般美工直接给到我们的就是位图文件了。Android 支持三种格式的位图文件:.png(首选)、.jpg(可接受)、.gif(不建议)。

  1. 位图文件位置:res/drawable/filename.png(.png、.jpg 或 .gif),当然了至于是drawable-xhdpi、drawable-xxhdpi、还是drawable-xxxhdpi等文件夹就需要根据美工的出图标准来了。

  2. 资源类型对象:BitmapDrawable。

1.2、XML位图

       XML位图对应标签,是在XML中定义的资源,指向位图文件。同时可以对位图文件添加一些额外的属性,例如抖动和层叠等等。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:BitmapDrawable。

  3. XML位图标签解释:




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

二、9.png(NinePatchDrawable)

       在Android开发过程中很多控件需要适配不同的手机分辨率进行拉伸或者压缩,这个时候就产生了NinePatchDrawable,它可以指定特定的区域进行拉伸而不失真,同时可以指定前景内容(内容区域)的显示区域。

       和位图一样9.png也分为两种:9.png文件、XML 9.png。

2.1、9.png文件

       .9.png图片格式,保证图片被拉伸的时候不失真,是一种特殊的图片格式。

  1. 9.png文件位置:res/drawable/filename.9.png.

  2. 资源类型对象:NinePatchDrawable。

2.2、XML 9.png

       XML 9.png对应标签,是在XML中定义的资源,指向9.png文件。可以对.9.png文件添加一些额外的属性,例如抖动

  1. 文件位置:res/drawable/filename.xml。

  2. 资源类型对象:NinePatchDrawable。

  3. XML位图标签解释:




    xmlns:android="http://schemas.android.com/apk/res/android"
    
    android:src="@[package:]drawable/drawable_resource"
    
    android:dither=["true" | "false"] />

三、图层列表(LayerDrawable)

       LayerDrawable:对应标签, 将多个drawable按照顺序层叠在一起显示。里面的每一个item都相当于一个Drawable。每个item按照列表的顺序绘制,最后一个item绘于顶部。

  1. 文件位置:res/drawable/filename.xml。

  2. 资源类型对象:LayerDrawable。

  3. XML标签解释:




    xmlns:android="http://schemas.android.com/apk/res/android" >
    
    
        android:drawable="@[package:]drawable/drawable_resource"
        
        android:id="@[+][package:]id/resource_name"
        
        android:top="dimension"
        
        android:right="dimension"
        
        android:bottom="dimension"
        
        android:left="dimension" />

  1. 应用场景:实现阴影效果、单边显示(下划线)、加号等等。


    LayerDrawable.png

四、状态列表(StateListDrawable)

       StateListDrawable:对应标签,这个也是我们开发过程中经常要用到的Drawable。背景选择器让控件可以根据不同状态显示不同的背景(每一种状态对应一个标签)。例如,Button有多种不同状态(按下、松开或这两种状态都不是),这样可以在Button按下的时候显示一种背景,松开的时候又显示另一种背景。

从上到下遍历状态列表,并使用第一个与当前状态匹配的项目 —此选择并非基于“最佳匹配”。这也是默认值为啥要放在最后面的原因。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:StateListDrawable。

  3. XML标签解释:



    android:constantSize=["true" | "false"]
    
    android:dither=["true" | "false"]
    
    android:variablePadding=["true" | "false"] >

    
    
        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里面指定多个状态,例如: android:drawable="@drawable/pic3" /> 触摸模式下单击时的背景图片

五、级别列表(LevelListDrawable)

       LevelListDrawable:对应标签,根据Drawable的setLevel()函数设置的level。显示不同的背景。有时候需要我们确实需要对一个View设置很多不同图片以表示某种应用状态,比如,手机的信号强度从强到弱有多种状态图;wifi有解锁和未解锁状态。使用的时候需要配合Drawable的setLevel()函数设置级别(level范围:0~10000)。 根据设置的级别来找标签里面对应的

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:LevelListDrawable。

  3. XML标签解释:



    
    
        android:drawable="@drawable/drawable_resource"
        
        android:maxLevel="integer"
        
        android:minLevel="integer" />

android:maxLevel和android:minLevel:当Drawable调用setLevel()函数设置的级别处于两者之间则显示该对应的资源。

  1. 实例:


    LevelListDrawable.gif

六、转换可绘制对象(TransitionDrawable)

       TransitionDrawable:对应标签 ,在两个drawable资源之间淡入淡出切换的drawable对象。每个drawable对应一个 元素。只支持两个item。要向前转换,调用 startTransition()。要向后转换,则调用 reverseTransition()。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:TransitionDrawable。

  3. XML标签解释:




    
    
        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。其实切换的过程也只是把哪个item显示在上面,另一个则显示在下面。可以简单的认为是上面的item把下面的item盖住了。

  1. 实例:


    TransitionDrawable.gif

七、插入可绘制对象(InsetDrawable)

       InsetDrawable :对应标签,让InsetDrawable内嵌到自己View当中,并且可以设置InsetDrawable到View边缘的边距(padding)。InsetDrawable咱们可以简单的认为就是给Drawable增加一个padding的效果。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:InsetDrawable。

  3. XML标签解释:



    android:drawable="@drawable/drawable_resource"
    
    android:insetTop="dimension"
    
    android:insetRight="dimension"
    
    android:insetBottom="dimension"
    
    android:insetLeft="dimension" />

InsetDrawable没什么特别的,只是可以设置距离边缘的距离。

  1. 实例:


    InsetDrawable.png

八、裁剪可绘制对象(ClipDrawable)

       ClipDrawable:对应标签,根据Drawable的level等级,将指定的Drawable裁剪到一定的百分比。一定要需要配合Drawable.setLevel(0~10000)函数使用,否则无效。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:ClipDrawable。

  3. XML标签解释:



    android:drawable="@drawable/drawable_resource"
    
    android:clipOrientation=["horizontal" | "vertical"]
    
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
    "fill_vertical" | "center_horizontal" | "fill_horizontal" |
    "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

android:gravity 参数值解释

说明
top 将对象放在其容器顶部,不改变其大小。当clipOrientation是"vertical" 时,在可绘制对象的底部裁剪。
bottom 将对象放在其容器底部,不改变其大小。当 clipOrientation 是 "vertical" 时,在可绘制对象的顶部裁剪。
left 将对象放在其容器左边缘,不改变其大小。这是默认值。当 clipOrientation 是 "horizontal" 时,在可绘制对象的右边裁剪。这是默认值。
right 将对象放在其容器右边缘,不改变其大小。当 clipOrientation 是 "horizontal" 时,在可绘制对象的左边裁剪。
center_vertical 将对象放在其容器的垂直中心,不改变其大小。裁剪行为与重力为 "center" 时相同。
fill_vertical 按需要扩展对象的垂直大小,使其完全适应其容器。当 clipOrientation 是 "vertical" 时,不会进行裁剪,因为可绘制对象会填充垂直空间(除非可绘制对象级别为 0,此时它不可见)。
center_horizontal 将对象放在其容器的水平中心,不改变其大小。裁剪行为与重力为 "center" 时相同。
fill_horizontal 按需要扩展对象的水平大小,使其完全适应其容器。当 clipOrientation 是 "horizontal" 时,不会进行裁剪,因为可绘制对象会填充水平空间(除非可绘制对象级别为 0,此时它不可见)。
center 将对象放在其容器的水平和垂直轴中心,不改变其大小。当 clipOrientation 是 "horizontal" 时,在左边和右边裁剪。当 clipOrientation 是 "vertical" 时,在顶部和底部裁剪。
fill 按需要扩展对象的垂直大小,使其完全适应其容器。不会进行裁剪,因为可绘制对象会填充水平和垂直空间(除非可绘制对象级别为 0,此时它不可见)。
clip_vertical 可设置为让子元素的上边缘和/或下边缘裁剪至其容器边界的附加选项。裁剪基于垂直重力:顶部重力裁剪上边缘,底部重力裁剪下边缘,任一重力不会同时裁剪两边。
clip_horizontal 可设置为让子元素的左边和/或右边裁剪至其容器边界的附加选项。裁剪基于水平重力:左边重力裁剪右边缘,右边重力裁剪左边缘,任一重力不会同时裁剪两边。

ClipDrawable可以用来实现一些简单的进度条。

  1. 实例:可以实现一些简单的进度条之类的


    ClipDrawable.gif

九、缩放可绘制对象(ScaleDrawable)

       ScaleDrawable:对应标签,根据Drawable的level等级,将指定的Drawable缩放到一定的等级。ScaleDrawable一定要需要配合Drawable.setLevel(0~10000)函数使用,否则无效。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:ScaleDrawable。

  3. XML标签解释:



    android:drawable="@drawable/drawable_resource"
    
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
    "fill_vertical" | "center_horizontal" | "fill_horizontal" |
    "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    
    android:scaleHeight="percentage"
    
    android:scaleWidth="percentage" />

注:如果Drawable.setLevel()函数的参数是0,不管android:scaleHeight和android:scaleWidth设置的是多少图片都不会显示。

说明
top 将对象放在其容器顶部,不改变其大小。
bottom 将对象放在其容器底部,不改变其大小。
left 将对象放在其容器左边缘,不改变其大小。这是默认值。
right 将对象放在其容器右边缘,不改变其大小。
center_vertical 将对象放在其容器的垂直中心,不改变其大小。
fill_vertical 按需要扩展对象的垂直大小,使其完全适应其容器。
center_horizontal 将对象放在其容器的水平中心,不改变其大小。
fill_horizontal 按需要扩展对象的水平大小,使其完全适应其容器。
center 将对象放在其容器的水平和垂直轴中心,不改变其大小。
fill 按需要扩展对象的垂直大小,使其完全适应其容器。
clip_vertical 可设置为让子元素的上边缘和/或下边缘裁剪至其容器边界的附加选项。裁剪基于垂直重力:顶部重力裁剪上边缘,底部重力裁剪下边缘,任一重力不会同时裁剪两边。
clip_horizontal 可设置为让子元素的左边和/或右边裁剪至其容器边界的附加选项。裁剪基于水平重力:左边重力裁剪右边缘,右边重力裁剪左边缘,任一重力不会同时裁剪两边。
  1. 实例:


    ScaleDrawable.gif

十、形状可绘制对象(ShapeDrawable)

       ShapeDrawable:对应标签,可绘制对象资源.在Android开发过程中Shape可以用来绘制一些简单的形状或者背景.相对与Android里面其他的资源类型(png图片等)来说.Shape大大减少了安装包的大小,而且能够更好的适配不同的手机。

  1. XML文件位置:res/drawable/filename.xml。

  2. 资源类型对象:ShapeDrawable。

  3. XML标签解释:


元素定义线宽 ring:环形 -->
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    
    android:innerRadius = "integer"
    
    android:innerRadiusRatio = "float"
    
    android:thickness = "integer"
    
    android:thicknessRatio = "integer"
    
    android:useLevel = "boolean"
    
    android:dither = "boolean"
    
    android:tint = "integer"
    
    android:visible = "integer">

    
    
        android:radius="integer"
        
        android:topLeftRadius="integer"
        
        android:topRightRadius="integer"
        
        android:bottomLeftRadius="integer"
        
        android:bottomRightRadius="integer" />

    
    
        android:angle="integer"
        
        android:centerX="float"
        
        android:centerY="float"
        
        android:centerColor="integer"
        
        android:endColor="color"
        
        android:gradientRadius="integer"
        
        android:startColor="color"
        
        android:type=["linear" | "radial" | "sweep"]
        
        android:useLevel=["true" | "false"] />

    
    
        android:left="integer"
        
        android:top="integer"
        
        android:right="integer"
        
        android:bottom="integer" />

    
    
        android:width="integer"
        
        android:height="integer" />

    
    

    
    
        android:width="integer"
        
        android:color="color"
        
        android:dashGap="integer"
        
        android:dashWidth="integer"/>


当android:shape="ring"的时候,一定要小心使用android:innerRadiusRatio和android:thicknessRatio两个属性.给的值不恰当的时候可能出来的效果就不是圆环了.innerRadiusRatio:是内部空心区域的半径占控件宽度的几份之一.thicknessRatio:是圆环占控件宽度的几份之一.

如果发现shape虚线无效果的时候,可以尝试在View对应的xml里面设置android:layerType="software"

  1. 实例:


    TransitionDrawable.png

本文实例下载链接 后续如果看到比较好的效果,我也会慢慢的往实例里面添加的。

上面所有的Drawable都会编译解析成对应的资源类型对象BitmapDrawable、LayerDrawable、ShapeDrawable等,那肯定所有XML里面能实现的功能咱们都可以在JAVA代码中通过对应的资源类型对象实现。

你可能感兴趣的:(Android Drawable(可绘制对象资源))