Android Drawable Resources

一个drawable resource是对图像的一个整体概念,这个图像可以画到屏幕上,可以通过getDrawable(int) 得到这个图像,或者通过xml的属性来应用这个图像资源,例如android:drawable and android:icon。  有几种不同的类型的drawable:

Bitmap File

一个位图图像文件(.png  .jpg  .gif)创建BitmapDrawable
安卓支持Bitmap三种文件格式,.png(推荐),.jpg(可以接受),.gif(不鼓励使用)
你可以直接引用一个位图文件,使用文件名作为resource ID ,或者在xml中创建一个别名的resource ID

Note:构造过程中,位图文件会自动的进行优化,比如真彩色的PNG文件不会需要超过256色,而是通过8位的png进行压缩,以节省内存空间。应该知道在drawable目录下的图像二进制文件会在构建构建过程中改变,如果想要通过比特流读取一个图片,再转为bitmap,把你的图片放到res/raw/目录下,这个目录不会被优化。

 

文件位置

res/drawable/filename.png (.png, .jpg, or .gif)
文件名被用作resource ID

编译的资源数据类型::

资源指向了一个 BitmapDrawable.

引用资源:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

例如:

文件保存在 res/drawable/myimage.png, 这个layout XML 将图像应用到View:

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

 

获取图像作为一个  Drawable:

Resources res =getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);

XML Bitmap

一个XML Bitmap是一个资源,在xml中定义,并指向了一个bitmap文件。效果就是做一个未处理过的bitmap文件的别名。这个XML可以对bitmap指定附加的属性,比如说抖动(dithering)、瓷砖式覆盖(tiling)

 

Note:你可以使用<bitmap>作为<item>的子标签。例如,当创建一个state list 或者 layer list的时候,你可以从<item>下去除android:drawable这个属性,然后嵌套一个<bitmap>并定义一个drawable项。

 

语法:

<?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:mipMap=["true" | "false"]
android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

元素:

<bitmap>

属性:

xmlns:android

String. 定义了 XML 命名空间, 一定要是”http://schemas.android.com/apk/res/android”. 当<bitmap> 是根元素才需要这个命名空间。当 <bitmap> 内嵌在 <item>时是不需要命名空间的.

android:src

需要指向一个resource文件

android:antialias

Boolean. 开启或关闭反锯齿设置

android:dither

Boolean. 开启或者关闭bitmap抖动( dithering),如果bitmap没有和屏幕一样的像素设置 (例子: 一个 ARGB 8888 bitmap 和一个  RGB 565 屏幕).

android:filter

Boolean. 开启或关闭 bitmap 过滤(filtering). 当bitmap光滑伸缩外观时,使用filtering

android:gravity

Keyword. 定义 bitmap 的gravity. 如果bitmap小于它的容器,gravity就指定了drawable图像在包含它的容器内的位置。多个属性可以通过” | ”隔开。例如:top| right

 

描述
top 图像位于容器的顶部,不改变图像大小
bottom 底部,不改变大小
left 左边,不改变大小.
right 右侧,不改变大小
center_vertical 垂直方向的中部,不改变大小
fill_vertical 如果需要的话,扩大图像的垂直方向的大小,垂直方向填充它的容器
center_horizontal 水平方向的中部,不改变大小
fill_horizontal 如果需要的话,扩大图像的水平方向的大小,水平方向填充它的容器
center 水平垂直轴的中心,不改变大小
fill 默认的情况是,如果有需要的话,水平垂直扩展大小,让图像可以完全填充它的容器。
clip_vertical 附加的选项,可以设置子元素的上部或者下部分边界,剪切到子元素容器的边界。这个剪切基于垂直方向的gravity。top gravity 剪切底部边界,bottom gravity 剪切顶部边界,如果既不是top,也不是bottom就同时剪切顶部底部边界。
clip_horizontal 附加的选项,可以设置子元素的左部或者右部分边界,剪切到子元素容器的边界。这个剪切基于水平方向的gravity。left gravity 剪切右部边界,right gravity 剪切左部边界,如果既不是right,也不是left就同时剪切左部右部边界。

 

android:mipMap

Boolean. 开启或者关闭  mipmap hint. 可以查看 setHasMipMap()获取更多信息. 默认值是false,关闭.

android:tileMode

Keyword. 定义了瓷片模式(tile mode). 开启的时候,  bitmap 重复.开启tileMode的时候Gravity属性就会被忽略.

一定是下面常量值之一

Value Description
disabled 默认不重复bitmap
clamp 如果在图片原始位置的边界的外侧进行渲染(shader),重复边界颜色。
repeat 水平,垂直平铺图片
mirror 水平,垂直平铺图片。调整镜像图片以至于相邻的图片总是有缝隙.

 

例子:

<?xml version="1.0" encoding="utf-8"?>
<bitmapxmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/icon"
android:tileMode="repeat"/>

 

Nine-Patch File

一个PNG 的文件,有可以伸缩扩展的区域,允许图像根据内容改变大小(.9.png)创建NighPatchDrable

NinePatch 是一个 PNG 图像,在它里你可以定义可拉伸的区域,当View中的内容超过了正常图片的边界,Android调整图片。你可以代表性地将这种类型的图片设置为view的背景图片,而这个view至少有一维设置为”wrap_content”, 当View增长以适应内容,这个Nige-Patch图片也会调整去适应View的大小. 使用Nine-Patch图片的一个例子就是Android标准的Button 小部件的背景,这个背景必须伸展来适应Button内的文字(或者图片)

和正常的 bitmap一样,你可以直接引用Nine-Patch文件,或者通过XML定义一个资源。

为了完成如何构建一个拥有伸展区域的Nine-Patch文件,查看 2D Graphics 文档.

Nine-Patch File

FILE LOCATION:

res/drawable/filename.9.png
The filename is used as the resource ID.

COMPILED RESOURCE DATATYPE:

Resource pointer to a NinePatchDrawable.

RESOURCE REFERENCE:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

例子:

With an image saved at res/drawable/myninepatch.9.png, this layout XML applies the Nine-Patch to a View:

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

SEE ALSO:

XML Nine-Patch

An XML Nine-Patch is a resource defined in XML that points to a Nine-Patch file. The XML can specify dithering for the image.

FILE LOCATION:

res/drawable/filename.xml

The filename is used as the resource ID.

COMPILED RESOURCE DATATYPE:

Resource pointer to a NinePatchDrawable.

RESOURCE REFERENCE:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

语法:

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@[package:]drawable/drawable_resource"
android:dither=["true" | "false"] />

元素:

<nine-patch>

Defines the Nine-Patch source and its properties.

attributes:

xmlns:android

StringRequired. Defines the XML namespace, which must be”http://schemas.android.com/apk/res/android”.

android:src

Drawable resourceRequired. Reference to a Nine-Patch file.

android:dither

Boolean. 开启或者关闭bitmap抖动( dithering),如果bitmap没有和屏幕一样的像素设置 (例子: 一个 ARGB 8888 bitmap 和一个  RGB 565 屏幕)

例子:

<?xml version="1.0" encoding="utf-8"?>
<nine-patchxmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/myninepatch"
android:dither="false"/>

 

Layer List

 

一个 Drawable可以管理一组其他的drawable,按照数组的顺序,被画到屏幕上去,所以数组最大的标志位的元素被画到了顶部。创建LayerDrawable

 

res/drawable/layers.xml:

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

用<bitmap> 来给每个item定义drawable资源,gravity都是center,这个保证没有图片会被调整以适应容器,因为图片有偏移会导致调整的调整。

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

结果如下:

androidlist

State List

一个XML文件,为不同的状态引用不同的位图图片。(例如,当Button被按下时用不同的图片显示)创建 StateListDrawable.

使用 state list drawable可以提供不同状态下的背景图片

你可以在一个XML文件中描述state list.每一个图形都通过<item>元素来展现,<item>在一个<selector>中。每一个 <item>使用各种不同的属性来描述状态,在每一个状态中应该为这个drawable使用图形.

在各个状态改变的过程中,state list从顶到底(top to bottom),使用匹配当前状态的第一个item ––selection不是基于“最优匹配”,是简单得满足状态中第一个最小的标准。

语法::

<?xml version="1.0" encoding="utf-8"?>
<selectorxmlns: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>

元素:

<selector>

根元素.包含多个 <item> 元素.

属性:

xmlns:android

StringRequired. 定义命名空间, 必须是”http://schemas.android.com/apk/res/android”.

android:constantSize

Boolean. 设置为”true” ,随着状态的改变,drawable的上报的内部尺寸大小保持不变, (大小尺寸是所有states中最大的); 设置为”false”,基于当前的状态改变尺寸大小。默认是 false.

android:dither

Boolean. “true” 开启抖动功能,”false” 关闭抖动. 默认开启

android:variablePadding

Boolean. “true” drawable的padding根据当前选择的状态改变。设置”false”, padding保持不变。 (基于所有状态的最大的padding)。设置这个特征,当状态改变的时候,需要你处理展现的layout,这经常是不支持的. 默认是false.

<item>

通过属性描述drawable时,在某些状态中定义一个 drawable来使用,必须是<selector> 子元素.

属性:

android:drawable

Required. 指向一个 drawable resource.

android:state_pressed

Boolean. “true” 当对象被按下,要使用这个item, (例如当一个button被触碰或者点击了); “false” ,如果在默认情况下使用这个item,非按压状态。

android:state_focused

Boolean. “true” 输入焦点状态时使用(例如用户在输入款选择上文本);

“false” 默认无焦点状态.

android:state_hovered

Boolean. “true” 被光标悬浮状态。

“false” 默认无悬浮状态.经常性,这个drawable和facused状态的drawable使用是相同的.

Introduced in API level 14.

android:state_selected

Boolean.

android:state_checkable

Boolean.

android:state_checked

Boolean.

android:state_enabled

Boolean.

android:state_activated

Boolean.

android:state_window_focused

Boolean.

Note: Android用state list中第一个item匹配对象的当前状态,所以,如果在list中第一个item,不包含以上状态属性,然后这个item每次都会应用,这就是为什么最后一个item是默认值(正如下来例子展示的).

 

例子:

XML 文件保存在 res/drawable/button.xml:

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

这个 layout XML 把这个 state list drawable 应用到Button:

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

Level List

一个XML文件,定义了一个drawable,可以管理好多个可轮流选择的Drawable,每一个可以赋值一个最大的数字值。创建  LevelListDrawable.

setLevel() 可以设置level value,它从level list获取drawable resource,的android:maxLevel值,大于或等于这个值会传递到setLevel函数

<?xml version="1.0" encoding="utf-8"?>
<level-listxmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/status_off"
android:maxLevel="0"/>
<item
android:drawable="@drawable/status_on"
android:maxLevel="1"/>
</level-list>

Once this is applied to a View, the level can be changed with setLevel() or setImageLevel().

 

Transition Drawable

一个XML文件,定义一个drawable,可以在两个drawable文件资源间渐变,交替变化。创建TransitionDrawable.

例子:

XML file saved at res/drawable/transition.xml:

<?xml version="1.0" encoding="utf-8"?>
<transitionxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:drawable="@drawable/on"/>
<itemandroid:drawable="@drawable/off"/>
</transition>

XML应用到 View:

<ImageButton
android:id="@+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/transition"/>

代码展示从第一个item到第二个item,500毫秒渐变 500ms transition from the first item to the second:

ImageButton button =(ImageButton) findViewById(R.id.button);
TransitionDrawable drawable =(TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

 

Inset Drawable

一个XML文件,定义一个drawable,通过指定距离可以嵌入另一个drawable。当view需要一个背景drawable,而又需要背景小于view的实际边界,inset drawable就有用了。

<?xml version="1.0" encoding="utf-8"?>
<insetxmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/background"
android:insetTop="10dp"
android:insetLeft="10dp"/>

 

Clip Drawable

一个XML文件,定义一个drawable,基于drawable当前的的level值,修剪另一个drawable。创建 ClipDrawable.

EXAMPLE:

XML file saved at res/drawable/clip.xml:

<?xml version="1.0" encoding="utf-8"?>
<clipxmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/android"
android:clipOrientation="horizontal"
android:gravity="left"/>

The following layout XML applies the clip drawable to a View:

<ImageView
android:id="@+id/image"
android:background="@drawable/clip"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>


The following code gets the drawable and increases the amount of clipping in order to progressively reveal the image:

ImageView imageview =(ImageView) findViewById(R.id.image);
ClipDrawable drawable =(ClipDrawable) imageview.getDrawable();
drawable.setLevel(drawable.getLevel()+1000);

Increasing the level reduces the amount of clipping and slowly reveals the image. Here it is at a level of 7000:

half

Note: The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.

 

Scale Drawable

一个XML文件,定义一个drawable,根据它当前的level值改变另一个drawable的尺寸大小。创建 ScaleDrawable

<?xml version="1.0" encoding="utf-8"?>
<scalexmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/logo"
android:scaleGravity="center_vertical|center_horizontal"
android:scaleHeight="80%"
android:scaleWidth="80%"/>

 

Shape Drawable

一个XML文件,定义一个几何图形,包括颜色(colors)和渐变(gradients)。创建 ShapeDrawable.

Also see the Animation Resource document for how to create an AnimationDrawable.

Note: color resource 也可以在xml中用作一个drawable. 例如, 当建立一个 state list drawable, 你可以对android:drawable 属性引用一个color resource, (android:drawable=”@color/green”).

 

语法:

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

元素:

<shape>  根元素

属性:

xmlns:android

StringRequired. 命名空间”http://schemas.android.com/apk/res/android”.

android:shape

 

Value Desciption
“rectangle” 默认方形
“oval” 椭圆形
“line” 一根水平线横穿包含它的View.这个形状需要 <stroke> 来定义线宽
“ring” 环形

The following attributes are used only when android:shape=”ring”:

android:innerRadius

Dimension. The radius for the inner part of the ring (the hole in the middle), as a dimension value or dimension resource.

android:innerRadiusRatio

Float. The radius for the inner part of the ring, expressed as a ratio of the ring’s width. For instance, if android:innerRadiusRatio=”5″, then the inner radius equals the ring’s width divided by 5. This value is overridden by android:innerRadius. Default value is 9.

android:thickness

Dimension. The thickness of the ring, as a dimension value or dimension resource.

android:thicknessRatio

Float. The thickness of the ring, expressed as a ratio of the ring’s width. For instance, ifandroid:thicknessRatio=”2″, then the thickness equals the ring’s width divided by 2. This value is overridden by android:innerRadius. Default value is 3.

android:useLevel

Boolean. “true” if this is used as a LevelListDrawable. This should normally be “false” or your shape may not appear.

<corners>

Creates rounded corners for the shape. Applies only when the shape is a rectangle.

attributes:

android:radius

Dimension. The radius for all corners, as a dimension value or dimension resource. This is overridden for each corner by the following attributes.

android:topLeftRadius

Dimension. The radius for the top-left corner, as a dimension value or dimension resource.

android:topRightRadius

Dimension. The radius for the top-right corner, as a dimension value or dimension resource.

android:bottomLeftRadius

Dimension. The radius for the bottom-left corner, as a dimension value or dimension resource.

android:bottomRightRadius

Dimension. The radius for the bottom-right corner, as a dimension value or dimension resource.

Note: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radiusto set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero (“0dp”) where you don’t want rounded corners.

<gradient>渐变

Specifies a gradient color for the shape.

attributes:

android:angle

Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.

android:centerX

Float. The relative X-position for the center of the gradient (0 – 1.0).

android:centerY

Float. The relative Y-position for the center of the gradient (0 – 1.0).

android:centerColor

Color. Optional color that comes between the start and end colors, as a hexadecimal value orcolor resource.

android:endColor

Color. The ending color, as a hexadecimal value or color resource.

android:gradientRadius

Float. The radius for the gradient. Only applied when android:type=”radial”.

android:startColor

Color. The starting color, as a hexadecimal(十六进制) value or color resource.

android:type

Keyword. The type of gradient pattern to apply. Valid values are:

Value Description
“linear” A linear gradient. This is the default.
“radial” A radial gradient. The start color is the center color.
“sweep” A sweeping line gradient.

android:useLevel

Boolean. “true” if this is used as a LevelListDrawable.

<padding>

Padding to apply to the containing View element (this pads the position of the View content, not the shape).

attributes:

android:left

Dimension. Left padding, as a dimension value or dimension resource.

android:top

Dimension. Top padding, as a dimension value or dimension resource.

android:right

Dimension. Right padding, as a dimension value or dimension resource.

android:bottom

Dimension. Bottom padding, as a dimension value or dimension resource.

<size>

The size of the shape.

attributes:

android:height

Dimension. The height of the shape, as a dimension value or dimension resource.

android:width

Dimension. The width of the shape, as a dimension value or dimension resource.

Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting theandroid:scaleType to “center”.

<solid>  填充

A solid(纯色) color to fill the shape.

attributes:

android:color

Color. The color to apply to the shape, as a hexadecimal value or color resource.

<stroke>

A stroke line for the shape. 围住形状的所有边线

attributes:

android:width

Dimension. The thickness of the line, as a dimension value or dimension resource.

android:color

Color. The color of the line, as a hexadecimal value or color resource.

android:dashGap

Dimension. The distance between line dashes, as a dimension value or dimension resource. Only valid if android:dashWidth is set.

android:dashWidth

Dimension. The size of each dash line, as a dimension value or dimension resource. Only valid if android:dashGap is set.

例子:

XML file saved at res/drawable/gradient_box.xml:

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

This layout XML applies the shape drawable to a View:

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

This application code gets the shape drawable and applies it to a View:

Resources res =getResources();
Drawable shape = res.getDrawable(R.drawable.gradient_box);

TextView tv =(TextView)findViewByID(R.id.textview);
tv.setBackground(shape);

 

解释下 dither(抖动)

Dither(图像的抖动处理,当每个颜色值以低于8位表示时,对应图像做抖动处理可以实现在可显示颜色总数比较低(比如256色)时还保持较好的显示效果: Dither on Wikipedia

dither

Tagged on:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>