Android的Drawable分类汇总

  

Drawable的分类

1、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: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"] />

1.1 属性介绍

  • src :引用一个drawableresource.
  • antialias :是否开启抗锯齿**。
  • dither如果位图与屏幕的像素配置不同时,是否允许抖动.(例如:一个位图的像素设置是 ARGB 8888,但屏幕的设置是RGB 565)
  • filter是否允许对位图进行滤波。对位图进行收缩或者延展使用滤波可以获得平滑的外观效果
  • gravity定义位图的重力(gravity),如果位图小于其容器,使用重力指明在何处绘制,多个之间用 | 分隔
  • tileMode定义tile模式。当tile模式被启用,位图是重复的,并且gravity属性将被忽略。

1.2 特殊:NinePatch介绍

NinePatch 是可伸缩的位图图像,可以用作视图的背景。其实质上就是在原图片(.png)上添加了1px的边框,允许按照我们的需求,把对应的区域设置为黑色线,它在使用的过程中就可以根据我们的实际需求自动调整图形大小以适应视图内容。NinePatch图像保存的后缀名为.9.png


2、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="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        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>

2.1 属性介绍

2.11 根元素: shape

  • android:shape
    表示图形的形状,有四种选项 rectabgle(矩形)、oval(椭圆)、line(横线)、ring(圆环)

针对line和ring
四个当中, line 和 ring 一定需要通过 < stroke > 标签来指定 线的宽和和颜色信息 等。

针对ring有5个特殊的属性

作用
android:innerRadius圆内的内半径,当和innerRadiusRatio同时存在时,以innerRadius为准
android:thickness厚度, 圆环的厚度 = 外半径 - 内半径 ,当和thicknessRatio一起存在时,以thickness为准
innerRadiusRatio内半径在占整个Drawable宽度的比例,默认值是9。如果为n,那么 内半径 = 宽度 / n
android:thicknessRatio厚度占整个Drawable的宽度的比例,默认值是3。如果为n,那么 厚度 = 宽度 / n 。
android:useLevel一般都应该使用false,否则可能无法达到预期的效果,除非他被用来作为 LevelListDrawable 来使用

2.12 corners 角度 ( 只适用于 shape )

corners属性作用
android:radius为四个角同时设定相同的角度,优先级低,会被下面几个覆盖
android:topLeftRadius左上角的角度
android:topRightRadius右上角的角度
android:bottomLeftRadius左下角的角度
android:bottomRightRadius右下角的角度

2.13 solid 纯色填充

利用 android:color 就可以指定颜色。

2.14 gradient 渐变效果 (与solid互斥)

  • android:angle —— 渐变的角度,默认是0,其值必须是45的整数倍。
    0表示从左边到右
    90表示从上到下。具体效果随着角度的调整而产生变化,角度影响渐变方向。
  • android:centerX —— 渐变中心的横坐标点
  • android:centerY —— 渐变中心的纵坐标点
  • android:startColor —— 渐变色的起始色
  • android:centerColor —— 渐变色的中间色
  • android:endColor —— 渐变色的结束色
  • android:type —— 渐变的类型,分3种,linear(线性渐变),radio(径向渐变),sweep(扫描线渐变),默认值是 线性渐变
  • android:gradientRadius —— 渐变的半径(仅当 android:type 为radio时有效)
  • android:useLevel —— 一般为false,当Drawable作为StateListDrawable时有效。

2.15 stroke 描边

stroke的属性作用
android:width描边的宽度,越大则shape的边缘线越粗
android:color描边的颜色
android:dashWidth虚线的宽度
android:dashGap虚线的空隙的间隔

2.16 padding

表示空白,包含整个 view 的空白,分上下左右

2.17 size 大小

android:width 指定shape宽
android:height 指定shape高

严格来说shape没有宽高,但是我们指定size就有了所谓的宽高。
当时当shape作为View 的背景的时候,shape还是会被拉伸的,所以这个宽高并不是指定多少就一定多少(对于Drawable都是没有绝对的宽高的)


3、LayerDrawable

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

可包含多个item

4、StateListDrawable

每个 Drawable 都对应着 View 的一种状态,这样系统就会根据 View 的状态来选择合适的 Drawable

应用场景:例如 View 的点击前与点击后

<?xml version="1.0" encoding="utf-8"?>
<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="@[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"]
        />
</selector>

4.1 属性介绍

4.11 constantSize

表示StateListDrawable的大小是否会随View大小的改变而改变。默认值为false(会随着状态改变而改变),true则相反

4.12 dither

是否开启抖动效果,开启该选项可以让图片在低质量的屏幕上仍然获得较好的显示效果,默认为true

4.13 variablePadding

StateListDrawable的padding表示是否随着其状态的改变而改变,true表示会,false表示StateListDrawable的padding是内部所有Drawable的padding的最大值。默认为false,并且也不建议开启此选项

4.14 item 的常见属性

        android:state_selected //表示选择了View
        android:state_checked //选中了View,适用于 CheckBox 这类在选中和非选中状态之间进行切换的 View
        android:state_enabled //表示 View 正处于可用状态
        android:state_focused //表示 View 获得了焦点
        android:state_pressed //表按下状态
 

4.2 使用

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

    <item android:state_pressed="false">
    <shape>

        <stroke
            android:width="1dp"
            android:color="#D3D3D3"
            />
        <corners android:radius="50dp"/>
    </shape>
</item>

    <item android:state_pressed="true">
        <shape>

            <solid android:color="#D3D3D3"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

</selector>

5、LevelListDrawable

集合中的每个 Drawable 都有一个等级(level)的概念。根据不同的等级,LevelListDrawable会切换为对应的Drawable

<?xml version="1.0" encoding="utf-8"?>
<level-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
</level-list>

6、TransitionDrawable

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

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

7、InsertDrawable

可以将其他Drawable内嵌到自己当中,并可以在四周留一定间距。

应用场景:一个 View 通过自己的背景比自己的实际区域小

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

inserXXX:表示上下左右内凹的大小

8、ScaleDrawable

根据自己的等级(Level)将指定的Drawable缩放到一定比例

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    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" />

9、ClipDrawable

可以根据自己当前的等级(Level)来裁剪另一个 Drawable

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    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"] />

clipOrientation:表示裁剪方向,搭配 gravity 使用

例如:

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation= "vertical"
    android:gravity="top" />

将内部的Drawable放在容器的顶部,不改变它的大小,从底部开始裁剪

相关文章