Android drawable 可绘制资源总结

2016-12-13 本文已影响267人 brucevanfdm

前言

drawable 即可绘制对象资源，Android支持以下几种类型：

Bitmap File ：位图，包括了常用的.png、.jpg、.gif文件
Nine-Patch File：就是我们常说的点九图（.9.png）
Layer List :图层列表
State List：状态列表，常见的Selector
Level List：级别列表
Transition Drawable ：转换可绘制对象
Inset Drawable：插入可绘制对象
Clip Drawable：裁剪可绘制对象
Scale Drawable：缩放可绘制对象
Shap Drawable：形状可绘制对象

Bitmap File

Android 支持以下三种格式的位图文件：.png（首选）.jpg（可接受）.gif（不建议使用）。

NinePatch File

NinePatch 是一种 PNG 图像，在其中可定义当视图中的内容超出正常图像边界时 Android 缩放的可拉伸区域。此类图像通常指定为至少有一个尺寸设置为 "wrap_content"的视图的背景，而且当视图扩展以适应内容时，.9图也会扩展以匹配视图的大小。Android 的标准Button小部件使用的背景就是典型的九宫格图像，其必须拉伸以适应按钮内的文本（或图像）。
与普通位图一样，可以直接引用，也可以从 XML 定义的资源引用。

Layer List

Layer List 是管理其他可绘制对象阵列的可绘制对象。列表中的每个可绘制对象按照列表的顺序绘制，层叠其上，列表中的最后一个可绘制对象绘于顶部。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

使用方法：通过src属性引入。

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/layers" />

可以看到上面的代码引入了3个 <bitmap>，层叠其中，并通过控制<item>分层，并它们的偏移量产生层叠效果。

layers.png

State List

StateListDrawable 是在 XML 中定义的可绘制对象，它根据对象的状态，使用多个不同的图像来表示同一个图形。例如，Button 小部件可以是多种不同状态（按下、聚焦或这两种状态都不是）中的其中一种，而且可以利用状态列表可绘制对象为每种状态提供不同的背景图片。
可以在 XML 文件中描述状态列表。每个图形由单一 <selector>元素内的 <item> 元素表示。每个 <item> 均使用各种属性来描述应用作可绘制对象的图形的状态。
在每个状态变更期间，将从上到下遍历状态列表，并使用第一个与当前状态匹配的项目 —此选择并非**基于“最佳匹配”，而是选择符合状态最低条件的第一个项目。

语法：详细说明

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

一个点击与聚焦与光标悬停的栗子（用在显示点击效果的View中）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default --></selector>

引入方式：

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

一个选中、对象启用（能够接收触摸/点击事件）、当应用窗口有焦点（应用在前台）的栗子（用在我的RadioButton自定义底部导航栏上）
使用方法：通过background属性引入。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_me" android:state_checked="false" android:state_enabled="true" />
    <item android:drawable="@drawable/tab_me_on" android:state_checked="true" android:state_enabled="true" />
    <item android:drawable="@drawable/tab_me_on" android:state_checked="true" android:state_window_focused="false" />
    <item android:drawable="@drawable/tab_me" android:state_checked="false" android:state_window_focused="false" />
</selector>

引入方式：

<RadioButton
            android:id="@+id/center"
            style="@style/nav_button"
            android:drawableTop="@drawable/center_radiobutton"
            android:textColor="@drawable/radiobutton_text" />

Level List

管理大量备选可绘制对象的可绘制对象，每个可绘制对象都分配有最大的备选数量。使用 setLevel() 设置可绘制对象的级别值会加载级别列表中 android:maxLevel 值大于或等于传递到方法的值的可绘制对象资源。

Transition Drawable

Transition Drawable是可在两种可绘制对象资源之间交错淡出的可绘制对象。

Inset Drawable

在 XML 文件中定义的以指定距离插入其他可绘制对象的可绘制对象。

Clip Drawable

在 XML 文件中定义的对其他可绘制对象进行裁剪（根据其当前级别）的可绘制对象。您可以根据级别以及用于控制其在整个容器中位置的重力，来控制子可绘制对象的裁剪宽度和高度。通常用于实现进度栏之类的项目。

Scale Drawable

在 XML 文件中定义的更改其他可绘制对象大小（根据其当前级别）的可绘制对象。

Shap Drawable

这是比较常用的一个在 XML 中定义一般形状的Drawable

语法：

<?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="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"] />
    <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" 跨越包含视图宽度的水平线。此形状需要 <stroke> 元素定义线宽。
"ring" 环形。
仅当 android:shape="ring" 如下时才使用以下属性：

android:innerRadius
尺寸。环内部（中间的孔）的半径，以尺寸值或尺寸资源表示。
android:innerRadiusRatio
浮点型。环内部的半径，以环宽度的比率表示。例如，如果 android:innerRadiusRatio="5"，则内半径等于环宽度除以 5。此值被 android:innerRadius 覆盖。默认值为 9。
android:thickness
尺寸。环的厚度，以尺寸值或尺寸资源表示。
android:thicknessRatio
浮点型。环的厚度，表示为环宽度的比率。例如，如果 android:thicknessRatio="2"，则厚度等于环宽度除以 2。此值被 android:innerRadius 覆盖。默认值为 3。
android:useLevel
布尔值。如果这用作 LevelListDrawable，则此值为“true”。这通常应为“false”，否则形状不会显示。

<corners>
为形状产生圆角。仅当形状为矩形时适用。

属性：
android:radius
尺寸。所有角的半径，以尺寸值或尺寸资源表示。对于每个角，这会被以下属性覆盖。
android:topLeftRadius
尺寸。左上角的半径，以尺寸值或尺寸资源表示。
android:topRightRadius
尺寸。右上角的半径，以尺寸值或尺寸资源表示。
android:bottomLeftRadius
尺寸。左下角的半径，以尺寸值或尺寸资源表示。
android:bottomRightRadius
尺寸。右下角的半径，以尺寸值或尺寸资源表示。
注：（最初）必须为每个角提供大于 1 的角半径，否则无法产生圆角。如果希望特定角不要倒圆角，解决方法是使用 android:radius 设置大于 1 的默认角半径，然后使用实际所需的值替换每个角，为不希望倒圆角的角提供零（“0dp”）。

<gradient>
指定形状的渐变颜色。

属性：
android:angle
整型。渐变的角度（度）。0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0。
android:centerX
浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)。
android:centerY
浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)。
android:centerColor
颜色。起始颜色与结束颜色之间的可选颜色，以十六进制值或颜色资源表示。
android:endColor
颜色。结束颜色，表示为十六进制值或颜色资源。
android:gradientRadius
浮点型。渐变的半径。仅在 android:type="radial" 时适用。
android:startColor
颜色。起始颜色，表示为十六进制值或颜色资源。
android:type
关键字。要应用的渐变图案的类型。有效值为：
值说明
"linear" 线性渐变。这是默认值。
"radial" 径向渐变。起始颜色为中心颜色。
"sweep" 流线型渐变。
android:useLevel
布尔值。如果这用作 LevelListDrawable，则此值为“true”。

<padding>
要应用到包含视图元素的内边距（这会填充视图内容的位置，而非形状）。

属性：
android:left
尺寸。左内边距，表示为尺寸值或尺寸资源
android:top
尺寸。上内边距，表示为尺寸值或尺寸资源
android:right
尺寸。右内边距，表示为尺寸值或尺寸资源
android:bottom
尺寸。下内边距，表示为尺寸值或尺寸资源

<size>
形状的大小。

属性：
android:height
尺寸。形状的高度，表示为尺寸值或尺寸资源
android:width
尺寸。形状的宽度，表示为尺寸值或尺寸资源
注：默认情况下，形状按照此处定义的尺寸按比例缩放至容器视图的大小。在 ImageView 中使用形状时，可通过将 android:scaleType 设置为 "center" 来限制缩放。

<solid>
用于填充形状的纯色。

属性：
android:color
颜色。应用于形状的颜色，以十六进制值或颜色资源表示。

<stroke>
形状的笔划中线。

属性：
android:width
尺寸。线宽，以尺寸值或尺寸资源表示。
android:color
颜色。线的颜色，表示为十六进制值或颜色资源。
android:dashGap
尺寸。短划线的间距，以尺寸值或尺寸资源表示。仅在设置了 android:dashWidth 时有效。
android:dashWidth
尺寸。每个短划线的大小，以尺寸值或尺寸资源表示。仅在设置了 android:dashGap 时有效。

示例代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

引用方式：在background属性中引入：

<TextView
    android:background="@drawable/gradient_box"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

以上重点介绍了常用的几种Drawable类型，日常使用时复制过来稍加修改即可，这大概是这篇文章的价值所在把。

参考资料

Android样式的开发
 可绘制对象资源 | Android Developers