Android 之 Drawable资源 分析

1.访问drawable图片

 

以下代码片段演示了如何访问一个图片资源(资源名称drawablefilename):

ImageView imageView=(ImageView)findViewById(R.id.ImageView1);
imageView.setImageResource(R.drawable.drawablefilename);

注：Android中drawable中的资源名称有约束，必须是： [a-z0-9_.]（即：只能是字母数字及_和.），而且不能以数字开头，否则编译会报错： Invalid file name: must contain only [a-z0-9_.]

 

 

 

2.    根据 组件状态 来响应不同的图片 StateListDrawable

 

以下代码片段是一个StateListDrawable资源的XML文件描述样例：

XML 文件存储在： res/drawable/button_statelist.xml:

<span class="kwrd" style="color: rgb(0, 0, 255);"><?</span><span class="html" style="color: rgb(128, 0, 0);">xml</span> <span class="attr" style="color: rgb(255, 0, 0);">version</span><span class="kwrd" style="color: rgb(0, 0, 255);">="1.0"</span> <span class="attr" style="color: rgb(255, 0, 0);">encoding</span><span class="kwrd" style="color: rgb(0, 0, 255);">="utf-8"</span>?<span class="kwrd" style="color: rgb(0, 0, 255);">></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">selector</span> <span class="attr" style="color: rgb(255, 0, 0);">xmlns:android</span><span class="kwrd" style="color: rgb(0, 0, 255);">="http://schemas.android.com/apk/res/android"</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:state_pressed</span><span class="kwrd" style="color: rgb(0, 0, 255);">="true"</span>
          <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/button_pressed"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span> <span class="rem" style="color: rgb(0, 128, 0);"><!-- pressed --></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:state_focused</span><span class="kwrd" style="color: rgb(0, 0, 255);">="true"</span>
          <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/button_focused"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span> <span class="rem" style="color: rgb(0, 128, 0);"><!-- focused --></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:state_hovered</span><span class="kwrd" style="color: rgb(0, 0, 255);">="true"</span>
          <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/button_focused"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span> <span class="rem" style="color: rgb(0, 128, 0);"><!-- hovered --></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/button_normal"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span> <span class="rem" style="color: rgb(0, 128, 0);"><!-- default --></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"></</span><span class="html" style="color: rgb(128, 0, 0);">selector</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>

以下是Button的Layout文件：

<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">Button</span>
    <span class="attr" style="color: rgb(255, 0, 0);">android:layout_height</span><span class="kwrd" style="color: rgb(0, 0, 255);">="wrap_content"</span>
    <span class="attr" style="color: rgb(255, 0, 0);">android:layout_width</span><span class="kwrd" style="color: rgb(0, 0, 255);">="wrap_content"</span>
    <span class="attr" style="color: rgb(255, 0, 0);">android:background</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/button"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>

当然我们也可以通过代码来设置Button的背景图片：

Button imageButton=(Button)findViewById(R.id.imageButton);
imageButton.setBackgroundResource(com.jeriffe.app.R.drawable.button_statelist);

<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color: rgb(54, 46, 43);">StatListDrawable资源所支持的 </span><span style="color:#ff6666;"> 组件状态（Item内的状态）</span><span style="color:#362e2b;"> 如下图所示：</span></p><p style="color: rgb(54, 46, 43); font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/jeriffe/201211/201211141709211352.png" style="color: rgb(34, 0, 0); text-decoration: none;"><img title="image_thumb6_thumb" border="0" alt="image_thumb6_thumb" src="http://images.cnblogs.com/cnblogs_com/jeriffe/201211/201211141709255304.png" width="894" height="473" style="border: 0px none; max-width: 100%; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px;" /></a></p><span style="color:#362e2b;">
</span>

3. <span style="font-weight: bold; font-family: Arial; font-size: 14px;">ClipDrawable  可用于processbar 或者 图片渐显示</span><p style="color: rgb(54, 46, 43); font-family: Arial; font-size: 14px; line-height: 26px;">ClipDrawable资源定义在一个XML中，表示裁剪(Clips)一个其他资源基于ClipDrawable资源的Level。你可以控制裁剪的Drawable的宽度高度及gravity属性，ClipDrawable常常被用来作为一个progressbars的实现。</p><p style="color: rgb(54, 46, 43); font-family: Arial; font-size: 14px; line-height: 26px;">以下样例是一个ClipDrawable资源：</p><pre class="csharpcode" name="code" style="white-space: pre-wrap; word-wrap: break-word;font-size:12px; font-family: consolas, 'Courier New', courier, monospace; line-height: 26px; background-color: rgb(255, 255, 255);"><span class="kwrd" style="color: rgb(0, 0, 255);"><?</span><span class="html" style="color: rgb(128, 0, 0);">xml</span> <span class="attr" style="color: rgb(255, 0, 0);">version</span><span class="kwrd" style="color: rgb(0, 0, 255);">="1.0"</span> <span class="attr" style="color: rgb(255, 0, 0);">encoding</span><span class="kwrd" style="color: rgb(0, 0, 255);">="utf-8"</span>?<span class="kwrd" style="color: rgb(0, 0, 255);">></span>

<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">clip</span> <span class="attr" style="color: rgb(255, 0, 0);">xmlns:android</span><span class="kwrd" style="color: rgb(0, 0, 255);">="http://schemas.android.com/apk/res/android"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/android"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:clipOrientation</span><span class="kwrd" style="color: rgb(0, 0, 255);">="horizontal"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:gravity</span><span class="kwrd" style="color: rgb(0, 0, 255);">="left"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>

下面的ImageView布局文件应用Clipdrawable资源：

 

<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">ImageView</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:id</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@+id/image"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:background</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/clip"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:layout_height</span><span class="kwrd" style="color: rgb(0, 0, 255);">="wrap_content"</span>

<span class="attr" style="color: rgb(255, 0, 0);">android:layout_width</span><span class="kwrd" style="color: rgb(0, 0, 255);">="wrap_content"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>

下面的代码获取drawable并且增加其裁剪，以便于渐增的显示图像

ImageView imageview = (ImageView) findViewById(R.id.image);

ClipDrawable drawable = (ClipDrawable) imageview.getDrawable();

drawable.setLevel(drawable.getLevel() + 1000);

当然我们可以使用一个Timer来实现图片的渐增显示。

注意: 默认的Level值是0，表示图片被这个裁剪，故图片是不可见的。当值达到10000是代码裁剪为0，图片可以完全显示。

4. drawable 实现动画效果

 

AnimationDrawable

AnimationDrawable通过定义一系列的Drawable对象构建一个基于帧的动画(frame-by-frame animations)，可以被用来作为视图的背景色。

最简单的构建一个帧动画是在XML文件中构建一个动画,我们可以设定动画作为视图的背景色，通过调用AnimationDrawable.start()方法来运行动画。

如下代码片段是一个AnimationDrawable资源的XML文件,资源文件位置：res\drawable\spin_animation.xml

<span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">animation-list</span> <span class="attr" style="color: rgb(255, 0, 0);">xmlns:android</span><span class="kwrd" style="color: rgb(0, 0, 255);">="http://schemas.android.com/apk/res/android"</span>
    <span class="attr" style="color: rgb(255, 0, 0);">android:oneshot</span><span class="kwrd" style="color: rgb(0, 0, 255);">="true"</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/rocket_thrust1"</span> <span class="attr" style="color: rgb(255, 0, 0);">android:duration</span><span class="kwrd" style="color: rgb(0, 0, 255);">="200"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/rocket_thrust2"</span> <span class="attr" style="color: rgb(255, 0, 0);">android:duration</span><span class="kwrd" style="color: rgb(0, 0, 255);">="200"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>
    <span class="kwrd" style="color: rgb(0, 0, 255);"><</span><span class="html" style="color: rgb(128, 0, 0);">item</span> <span class="attr" style="color: rgb(255, 0, 0);">android:drawable</span><span class="kwrd" style="color: rgb(0, 0, 255);">="@drawable/rocket_thrust3"</span> <span class="attr" style="color: rgb(255, 0, 0);">android:duration</span><span class="kwrd" style="color: rgb(0, 0, 255);">="200"</span> <span class="kwrd" style="color: rgb(0, 0, 255);">/></span>
<span class="kwrd" style="color: rgb(0, 0, 255);"></</span><span class="html" style="color: rgb(128, 0, 0);">animation-list</span><span class="kwrd" style="color: rgb(0, 0, 255);">></span>

我们可以看到，AnimationDrawable资源文件以<animation-list>元素为根，包含一系列的<Item>节点，每一个节点定义了一个帧(frame)及持续时常。

上述动画运行了3个帧，通过设置android:oneshot 属性(attribute)为true，动画会循环一次并停留在最后一帧，如果为false那么会轮询(loop)的运行动画

我们可以通过编码来加载播放动画：

 <span class="rem" style="color: rgb(0, 128, 0);">// Load the ImageView that will host the animation and</span>
 <span class="rem" style="color: rgb(0, 128, 0);">// set its background to our AnimationDrawable XML resource.</span>
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 <span class="rem" style="color: rgb(0, 128, 0);">// Get the background, which has been compiled to an AnimationDrawable object.</span>
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 <span class="rem" style="color: rgb(0, 128, 0);">// Start the animation (looped playback by default).</span>
 frameAnimation.start();
 

注意：AnimationDrawable. start()方法不能够在Activity的onCreate()方法中调用，因为AnimationDrawable还未完全的附加(attached)到Window,如果你不需要交互而立即播放动画，那么可以在onWindowFocusChanged() 方法中，这个方法会在你的Activity Windows获取焦点是触发。