美文网首页
Drawable学习

Drawable学习

作者: _Rice_ | 来源:发表于2019-06-11 11:31 被阅读0次
  • 概念:是一种可以在Canvas上进行绘制的抽象的概念
  • 优点:使用简单,比自定义View的成本低。使用非图片类型的Drawable可减少空间占用。
  • 应用场景:常被用来做View的背景,一般通过xml定义

Drawable宽高可通过getIntrinsicWidth()和getIntrinsicHeight()获取其内部宽/高。实际区域大小可以通过getBounds获取,通常和View的尺寸相同

但并不是所有Drawable都有内部宽/高。

  • 图片所形成的Drawable的内部宽/高就是图片的宽/高。
  • 颜色所形成的Drawable没有内部宽/高的概念。

Drawable类是抽象类,是所有Drawable的基类。继承关系如下:

image.png

Drawable常用子类

ShapeDrawble

可表示纯色、有渐变效果的基础几何图形(矩形,圆形,线条等)。

用法如下:

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

shape:图形的形状。

  • android:shape=["rectangle" | "oval" | "line" | "ring"]
    

    shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线(line)、环形(ring)
    下面的属性只有在android:shape="ring时可用:
    android:innerRadius 内环的半径。
    android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,
    例如,如果android:innerRadiusRatio,表示内环半径等于环的宽度除以5,这个值是可以被覆盖的,默认为9.

  • android:thickness              环的厚度
    
  • android:thicknessRatio      浮点型,以环的宽度比率来表示环的厚度,
    

    例如,如果android:thicknessRatio="2",
    那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的,默认值是3.

  • android:useLevel  , boolean值         
    

    如果当做是LevelListDrawable使用时值为true,否则为false.

radius:表示shape的四个圆角的角度,只适用于矩形。

  •   android:radius                 整型 半径
    
  •   android:topLeftRadius           整型 左上角半径
    
  •   android:topRightRadius            整型 右上角半径
    
  •   android:bottomLeftRadius          整型 左下角半径
    
  •   android:bottomRightRadius         整型 右下角半径
    

gradient:渐变

  • android:startColor 颜色值 起始颜色

  • android:endColor 颜色值 结束颜色

  • android:centerColor 整型 渐变中间颜色,即开始颜色与结束颜色之间的颜色

  • android:angle 整型

    渐变角度(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)

  • android:type ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)

    linear 线性渐变,这是默认设置
    radial 放射性渐变,以开始色为中心。
    sweep 扫描线式的渐变。

  • android:useLevel ["true" | "false"]

    如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色

  • android:gradientRadius 整型

    渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。

  • android:centerX 整型 渐变中心X点坐标的相对位置

  • android:centerY 整型 渐变中心Y点坐标的相对位置

padding:与四周空白的距离。

  • android:left 整型 左内边距
  • android:top 整型 上内边距
  • android:right 整型 右内边距
  • android:bottom 整型 下内边距

solid:纯色填充

  • android:color 颜色值 填充颜色

stroke:描边

  • android:width 整型 描边的宽度
  • android:color 颜色值 描边的颜色
  • android:dashWidth 整型 表示描边的样式是虚线的宽度,

值为0时,表示为实线。值大于0则为虚线。

  • android:dashGap 整型 表示描边为虚线时,虚线之间的间隔 即“ ”

size:图形的固有大小,非最终大小。

  • android:width和android:height分别设定shape的宽/高。

参考:Android XML shape 标签使用详解

StateListDrawable

标签selector,表示Drawable集合,每个item都是Drawable,对应View的一种状态

应用场景:如button

<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="@drawable/image"
        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_accelerated="[true | false]"
        android:state_window_focused="[true | false]"/>

</selector>
  • android:constantSize:固有大小是否随其状态的改变而改变。
  • android:dither:是否开启抖动效果。
  • android:variblePadding:其padding是否随状态的改变而改变。
  • android:drawable :所引用的位图资源id


    image.png

系统会从上往下的顺序查找,直到找到一条匹配的,如无法匹配会选择默认item,也就是只有drawable属性的item

BitmapDrawable

表示一张图片,设置更多效果

<?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:mipmap=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] >

</bitmap>
  • android:src: 图片资源id
  • android:antialias:是否开启图片抗锯齿。开启后会让图片会更加平滑,同时清楚度降低。
  • android:dither:是否开启抖动效果。开启后让高质量的图片的比较低质量的屏幕上不失真。
  • android:filter:是否开启过滤效果。当图片尺寸被拉伸或压缩时,开启过滤效果可保持较好的显示效果。
  • android:gravity 图片的对齐效果
可选性 说明
top 保持原有大小,图片至于容器的顶部
bottom 保持原有大小,图片至于容器的底部
left 保持原有大小,图片至于容器的左部
right 保持原有大小,图片至于容器的右部
center_vertical 保持原有大小,图片垂直居中
fill_vertical 图片垂直方向填充容器
center_horizontal 保持原有大小,图片水平居中
fill_horizontal 图片水平方向填充容器
center 保持原有大小,图片同时水平和垂直居中
fill 默认值,同时水平和垂直拉伸
clip_vertical 附加项,表示水平方向的裁剪
clip_horizontal 附加项,表示水平方向的裁剪
  • android:tileMode:平铺模式。可选值的具体含义:

disabled 关闭平铺模式,默认
clamp 大小不变,像素在四周扩散
repeat 常见的水平和垂直方向的平铺
mirror 水平和垂直方向的镜面投影

image.png image.png image.png image.png

LayerDrawable

表示一种层次化的Drawable集合,通过将不同的Drawable放置在不同的层上面从而达到一种叠加后的效果。

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

    <item
        android:id="@+id/xxx_id"
        android:drawable="@drawable/drawable_id"
        android:top="dimension"
        android:bottom="dimension"
        android:left="dimension"
        android:right="dimension"/>
</layer-list>

一个layer-list可以包含多个item

  • android:drawable:所引用的位图资源id,如果为空需要有一个Drawable类型的子节点。
  • android:id:层id。
  • android:left:层相对于容器的左边距。
  • android:right:层相对于容器的右边距。
  • android:top:层相对于容器的上边距。
  • android:bottom:层相对于容器的下边距。

还可以结合ShapeDrawable使用,例如

<?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>
        <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>

效果图:


image.png

TransitionDrawable

实现两个Drawable之间的淡入淡出效果

常用属性与LayerDrawable相同

实例

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</transition>

//通过startTransition和reverseTransition实现淡入淡出效果
TransitionDrawable background = (TransitionDrawable) mDrawableTransitionTv.getBackground();
        background.reverseTransition(1000);

LevelListDrawable

  1. 概念:表示一个Drawable集合,集合中的每个Drawable都有一个等级的概念。
  2. 功能:可根据不同等级切换具体的drawable
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/xxx_id"
        android:drawable="@drawable/drawable_id"
        android:maxLevel="integer"
        android:minLevel="integer"/>
</level-list>
  • android:maxLevel:对应的最大值,取值范围为0~10000,默认为0。(常用)
  • android:minlevel:对应的最小值,取值范围为0~10000,默认为0。

使用方法:

  • 若作为View背景,都需要在Java代码中调用setLevel()方法
  • 若作为ImageView前景,需要调用setImageLevel()。

InsetDrawable

概念:表示一个drawable根据指定的距离嵌入到另外一个drawable内部
应用场景:当控件需要的背景比实际边框小的时候

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/id"
    android:insetLeft="dimension"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:visible="[true | false]"/>
  • android:drawable:所引用的位图资源id。
  • android:visible:是否留有边距。
  • android:insetTop 与顶部的距离
  • android:insetRight 与右边的距离
  • android:insetBottom 与底部的距离
  • android:insetLeft 与左边的距离

实例

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="15dp"
    android:insetTop="20dp"
    android:insetRight="15dp"
    android:insetBottom="5dp"
    android:visible="true">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorAccent"/>
    </shape>
</inset>

效果:

image.png

ScaleDrawable

功能:放缩一定比例

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/id"
    android:scaleGravity="[top | bottom | left | right |
        center_vertical | center_horizontal | center |
        fill_vertical | fill_horizontal | fill |
        clip_vertical | clip_horizontal]"
    android:scaleHeight="percentage"
    android:scaleWidth="percentage">
</scale>
  • android:drawable:所引用的位图资源id。
  • android:scaleGravity:等同于BitmapDrawable的android:gravity。
  • android:scaleWidth/android:scaleHeight:指定Drawable宽/高的缩放比例,以百分比的形式表示。

使用方法:设置控件背景,调用setLevel()方法控制Drawable等级。

  • level取值范围为0~10000。
  • 默认值为0:表示不可见;1~10000:表示可见。

ClipDrawable

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/id"
    android:gravity="[top | bottom | left | right |
        center_vertical | center_horizontal | center |
        fill_vertical | fill_horizontal | fill |
        clip_vertical | clip_horizontal]"
    android:clipOrientation="[vertical | horizontal]">
</scale>
  • android:drawable :指定截取的源Drawable对象
  • android:clipOrientaton :指定截取方向,可设置水平或垂直截取
  • android:gravity :指定截取时的对齐方式


    image.png

使用方法:设置控件背景,调用setLevel()方法控制裁剪区域大小。

  • level取值范围为0~10000。
  • 0:表示完全裁剪,即不可见;10000:表示不裁剪。
  • level越大,表示裁剪区域越小。

参考:要点提炼|开发艺术之Drawable,Android开发艺术探索(任玉刚)

相关文章

网友评论

      本文标题:Drawable学习

      本文链接:https://www.haomeiwen.com/subject/ombffctx.html