最全Drawable基础总结

小编阅读后达到的成效与待加强地方:

  • 对Drawable有了更加全面的认知,每种Drewable都能熟练的使用
  • 待加强对自定义Drawable的了解

Drawable在Android开发中最常见的,可能大家最熟悉的就是ShapeDrawable,StateListDrawable一个状态,一形状的,其实还有几种

Drawable.jpg

图像不清晰的请移步,下载原Xmind
同时以下所有类型的例子都在github上有demo可以两者结合阅读
先看下相应的demo图
drawable_demo.jpg

BitmapDrawable

表示一张图片
语法:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:gravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
                     |fill_horizontal|center|fill|clip_vertical|clip_horizontal"
    android:src="@drawable/image" 
    android:mipMap="true"
    android:tileMode="clamp|disabled|repeat|mirror">

    </bitmap>
属性 介绍
android:src 图片的id
android:antialias 是否图片抗锯齿功能
android:dither 是否开启抖动效果
android:filter 是否过滤效果
top 将内部的Drawable放在容器的顶部,不改变其大小,如果为竖直裁剪,则从底部开始裁剪
bottom 将内部的Drawable放在你容器的底部,不改变其大小。如为竖直裁剪,则从顶部开始裁剪
left 将内部的Drawable放在容器的左边,不改变其大小。如为水平裁剪,则从右边开始后裁剪
right 将内部的Drawable放在容器的右边,不改变其大小。如为竖直裁剪,则从左边开始裁剪
center_vertical 将内部的Drawable放在容器的竖直中心,不改变其大小,如为竖直裁剪,那么上下同时开始裁剪
fill_vertical 将内部的Drawable在竖直方向向上填充容器, 如果为竖直裁剪,那么仅当ClipDraewable的等级为0(0表示ClipDrawable被完全裁剪)时才有裁剪行为
center_horizontal 使内部的Drawable在容器中水平居中,不改变它的大小,如果为水平裁剪,那么从左右两边同时开始裁剪
fill_horizontal 使内部的Drawable在水平方向上填充容器,如果为水平裁剪,那么仅当ClipDrawable的等级为0时,才会有裁剪行为
center 使内部的Drawable在容器中水平和竖直方向都居中,不改变其大小,如果为竖直裁剪,那么从上下同时开始裁剪;如果为水平裁剪,那么从左右同时裁剪
fill 是内部的Drawable在水平和竖直方向上同时填充容器。仅当ClipDrawable的等级为0时,才能有裁剪行为
android:mipMap 图像相关的处理技术,纹理映射
android:tileMode 平铺模式

ShapeDrawable

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="10dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/>
    <gradient
        android:angle="45"
        android:centerX="5px"
        android:centerY="5px"
        android:centerColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorPrimaryDark"
        android:gradientRadius="5dp"
        android:type="linear|radial|sweep"
        android:useLevel="true"/>
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
    <solid
        android:color="@color/colorPrimaryDark"/>
    <size
        android:width="40dp"
        android:height="40dp"/>
    <stroke
        android:width="40dp"
        android:color="@color/colorAccent"
        android:dashGap="4dp"
        android:dashWidth="4dp"/>

</shape>

相应属性解释:

属性 介绍
android:shape 图形的形状:rectangle(矩形),oval(椭圆),line(横线),ring(圆形),默认值矩形;

<ring>特有属性:

属性 介绍
android:innerRadius 圆环的内半径
android:thickness 圆环厚度
android:innerRadiusRatio 内半径占整个Drawable宽度的比例,默认为9
android:thicknessRatio 厚度占整个Drawable宽度的比例,默认为3
android:useLevel 一般都是false,当在LevelListDrawable(文章后期会介绍)中使用

<corner>特有属性(用px)

属性 介绍
android:radius 四个角设置相同的角度
android:topLeftRadius 设置最上角的角度
android:topRightRadius 设置右上角的角度
android:bottomLeftRadius 设置最下角的角度
android:bottomRightRadius 设置右下角的角度

<gradient>属性(渐变效果):与<solid>(纯色填充)标签相互排斥

属性 介绍
android:angle 渐变角度,默认为0,其值必须为45的度数,0表示从左到右,90表示从下到上
android:centerX 渐变的中心点的横坐标
android:centerY 渐变的中心点的纵坐标,渐变的中心点,渐变的中心点会影响渐变的具体效果
android:startColor 渐变的起始色
android:centerColor 渐变的中间色
android:endColor 渐变的结束色
android:gradientRadius 渐变半径,仅当android:type="radial"时有效
android:useLevel 一般为fasle,当Drawable作为StateListDrawable(后面会有详细介绍)使用时为true
android:type 渐变的类别,有liner(有线性渐变),radial(径向渐变),sweep(扫描渐变),默认值为线性渐变
属性 介绍
android:color 填充的颜色

<solid>纯色填充

属性 介绍
android:color 填充的颜色

<stroke> Shape的描边

属性 介绍
android:width 描边的宽度
android:color 描边的颜色
android:dashWidth 组成虚线的线段宽度
android:dashGap 组成虚线的线段之间的间隔,间隔越大则虚线之间的空隙越大

<padding>属性 :android:left .android:top ,android:right ,android:bottom
<size> 属性:android:width ,android:height

LayerDrawable

LayerDrawable对应的XML标签<layer-list>,表示一种层次化的Drawable集合,将不同的Drawable放置在不同的层上从而达到一种叠加后的效果。
语法:

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

    <item
        android:bottom="40dp"
        android:drawable="@drawable/image"
        android:left="40dp"
        android:right="40dp"
        android:top="40dp" />
</layer-list>

其中android:top,android:bottom,android:left,android:right表示四周的偏移量

StateListDrawable

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" 
                android:dither="true" 
                android:variablePadding="true">
    <item android:drawable="@drawable/image" 
          android:state_activated="true"
          android:state_checkable="true" 
          android:state_checked="true" 
          android:state_enabled="true" 
          android:state_focused="true"
          android:state_hovered="true" 
          android:state_pressed="true" 
          android:state_selected="true" 
          android:state_window_focused="true" />

</selector>

相应的属性详解:

属性 介绍
android:constantSize StateListDrawable的固定大小是否随着其状态的改变而改变,默认为false
android:dither 是否开启抖动效果,默认值为true
android:variablePadding StateListDrawable 的padding表示是否随着其状态的改变而改变,默认值false
android:state_pressed 表示按下状态
android:state_focused 表示View已经获得焦点
android:state_selected 表示用户选择了View
android: state_checked 表示用户选中了View
android:state_enabled 表示View当前处于可用状态

LevelListDrawable

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="@drawable/image"
        android:maxLevel="20"
        android:minLevel="10" />
    <item
        android:drawable="@drawable/image1"
        android:maxLevel="9"
        android:minLevel="1" />
</level-list>

maxLevel,minLevel设置等级最大最小值,会根据代码设置的相应的level切换相应的drawable

TransitionDrawable

TransitionDrawable对应于<transition>标签,实现Drawable之间的淡入淡出效果
语法:

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


    <item
        android:width="40dp"
        android:height="40dp"
        android:bottom="40dp"
        android:drawable="@drawable/image"
        android:top="40dp" />
</transition>

其中android:top,android:bottom,android:left,android:right表示四周的偏移量

InsetDrawable

InsetDrawable对应<inset>标签,可以将其他Drawable内嵌到自己当中,并且四周留出一定的边界。
语法:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:insetBottom="40dp"
    android:insetLeft="40dp"
    android:insetRight="40dp"
    android:insetTop="40dp" />

其中android:top,android:bottom,android:left,android:right表示四周的偏移量

ScaleDrawable

ScaleDrawable对应的标签为<scale>,可以根据自己的等级(level)将指定的Drawable缩放到一定比例。
语法:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:scaleGravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
|fill_horizontal|center|fill|clip_vertical|clip_horizontal"  
    android:scaleHeight="50%"
    android:scaleWidth="50%" />

android:scaleGravity等同于androiid:gravity,android:scaleHeight和android:scaleWidth分别表示对指定Drawable宽高的缩放比例,用百分比表示。

ClipDrawable

ClipDrawable对应于<clid>标签,根据自己的等级(level)来裁剪另一个Drawable,裁剪的方向根据属性android:clipOrientation和android:gravity两个属性共同决定的。其中clipOrientation表示裁剪方向,分为水平(horizontal)和竖直(vertical)方向

语法:

<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal|vertical"
    android:drawable="@drawable/image"
    android:gravity="top|bottom|left|right|center_vertical|fill_vertical|center_horizontal
                     |fill_horizontal|center|fill|clip_vertical|clip_horizontal" />
选项 意义
top 将内部的Drawable放在容器的顶部,不改变其大小,如果为竖直裁剪,则从底部开始裁剪
bottom 将内部的Drawable放在你容器的底部,不改变其大小。如为竖直裁剪,则从顶部开始裁剪
left 将内部的Drawable放在容器的左边,不改变其大小。如为水平裁剪,则从右边开始后裁剪
right 将内部的Drawable放在容器的右边,不改变其大小。如为竖直裁剪,则从左边开始裁剪
center_vertical 将内部的Drawable放在容器的竖直中心,不改变其大小,如为竖直裁剪,那么上下同时开始裁剪
fill_vertical 将内部的Drawable在竖直方向向上填充容器, 如果为竖直裁剪,那么仅当ClipDraewable的等级为0(0表示ClipDrawable被完全裁剪)时才有裁剪行为
center_horizontal 使内部的Drawable在容器中水平居中,不改变它的大小,如果为水平裁剪,那么从左右两边同时开始裁剪
fill_horizontal 使内部的Drawable在水平方向上填充容器,如果为水平裁剪,那么仅当ClipDrawable的等级为0时,才会有裁剪行为
center 使内部的Drawable在容器中水平和竖直方向都居中,不改变其大小,如果为竖直裁剪,那么从上下同时开始裁剪;如果为水平裁剪,那么从左右同时裁剪
fill 是内部的Drawable在水平和竖直方向上同时填充容器。仅当ClipDrawable的等级为0时,才能有裁剪行为

初写文章,大家请轻点喷QAQ
最后感谢刚哥的Android开发艺术探索

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

推荐阅读更多精彩内容

  • 一、 Drawable简介 1 Drawable表示的是一种可以在Canvas上进行绘制的抽象的概念,可以是纯颜色...
    黄海佳阅读 1,206评论 0 10
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,897评论 25 707
  • 一、概念 Drawable有很多种,它们都表示一种图像的概念,但是它们又不全是图片,通过颜色也可以构造出各式各样的...
    TomyZhang阅读 114评论 0 0
  • 不怕跌倒,所以飞翔 关于Drawable的一些说明类的文字我就不写了,但是Drawable其实挺重要的,一些问题都...
    笔墨Android阅读 667评论 0 2
  • 人类喜好千差万别,永远不要嘲笑和攻击别人觉得快乐的方式。不认同别人的生活方式,可以;指责别人的生活方式,那就是侵...
    一抹凌霄阅读 146评论 1 1