1、引言

在Eclipse中android程式專案目錄結構下的res資料夾新建drawable資料夾，並在drawable資料夾下新建各類的xml樣式檔案，供layout資料夾下的xml佈局檔案引用，以滿足對程式介面的需求開發。如圖1和圖2是drawable下xml樣式檔案的樣式型別。

圖1、drawable下xml樣式檔案的樣式型別（一）

圖2、drawable下xml樣式檔案的樣式型別（二）

接下來我們要詳細解析以下各類xml樣式檔案的作用及其使用方法，請點選目錄檢視相應解析。

2、animation-list

使用animation-list樣式可以實現逐幀動畫效果，例如WiFi網路訊號的強弱表示或者語音聊天聲音的強弱表示，分為增強和減弱兩種逐幀動畫效果。
首先是放置圖片素材，如圖3所示。將其根據螢幕解析度大小分別放一套圖片到不同螢幕解析度的drawable資料夾下，android系統會根據機器的螢幕解析度到相應螢幕解析度的drawable資料夾裡面去找相應的圖片素材，以相容不同螢幕解析度的安卓機器螢幕。

圖3、iv1到iv4
其次是訊號增強即圖片順序播放的效果，在drawable下新建animation_list_sequence.xml樣式檔案。

<?xml version="1.0" encoding="utf-8"?>
<!-- 
    根標籤為animation-list；
    其中oneshot代表著是否只展示一遍，設定為false會不停的迴圈播放動畫；
    其中visible規定drawable的初始可見性，預設為flase；
    其中variablePadding若為true則允許drawable的距離在當前選擇狀態下有所改變（If true, allows the drawable’s padding to change based on the current state that is selected.），預設為false；
    根標籤下，通過item標籤對動畫中的每一個圖片進行宣告；
    android:duration 表示展示所用的該圖片的時間長度，單位為毫秒；
 -->
 

<animation-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="true"
  android:visible="false"
  android:variablePadding="false"
  >
    <item android:drawable="@drawable/iv1" android:duration="200"></item>
    <item android:drawable="@drawable/iv2" android:duration
 
="200"></item>
    <item android:drawable="@drawable/iv3" android:duration="200"></item>
    <item android:drawable="@drawable/iv4" android:duration="200"></item>
</animation-list>

再者是訊號增強即圖片順序播放的效果，在drawable下新建animation_list_reverse.xml樣式檔案。

<?xml version="1.0" encoding="utf-8"?>
<!-- 
    根標籤為animation-list；
    其中oneshot代表著是否只展示一遍，設定為false會不停的迴圈播放動畫；
    其中visible規定drawable的初始可見性，預設為flase；
    其中variablePadding若為true則允許drawable的距離在當前選擇狀態下有所改變（If true, allows the drawable’s padding to change based on the current state that is selected.），預設為false；
    根標籤下，通過item標籤對動畫中的每一個圖片進行宣告；
    android:duration 表示展示所用的該圖片的時間長度，單位為毫秒；
 -->
<animation-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="true"
  android:visible="false"
  android:variablePadding="false"
  >
    <item android:drawable="@drawable/iv4" android:duration="200"></item>
    <item android:drawable="@drawable/iv3" android:duration="200"></item>
    <item android:drawable="@drawable/iv2" android:duration="200"></item>
    <item android:drawable="@drawable/iv1" android:duration="200"></item>
</animation-list>

然後在layout資料夾下新建xml佈局檔案activity_animation_list.xml，引用上面寫好的drawable資料夾下的xml樣式檔案。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_animation_list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/animation_list_sequence" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="sequence"
        android:text="順序顯示" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="stop"
        android:text="停止動畫" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="reverse"
        android:text="倒序顯示" />

</LinearLayout>

然後在src包下新建Activity的Java檔案AnimationListActivity.java，用於演示操作。

package com.zcz.drawablexmltest;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;

public class AnimationListActivity extends Activity{
    private ImageView mIv;  
    private AnimationDrawable mAd;  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.activity_animation_list);  
        mIv = (ImageView) findViewById(R.id.iv_animation_list); 
    }  

    public void sequence(View view){
        mIv.setImageResource(R.drawable.animation_list_sequence);  
        mAd = (AnimationDrawable) mIv.getDrawable();  
        mAd.start();  
    }
    public void stop(View view){
        mAd = (AnimationDrawable) mIv.getDrawable();  
        mAd.stop();  
    }
    public void reverse(View view){
        mIv.setImageResource(R.drawable.animation_list_reverse);  
        mAd = (AnimationDrawable) mIv.getDrawable();  
        mAd.start(); 
    }
}

其中動畫的播放和暫停用到了AnimationDrawable 這個類的方法，通過檢視AnimationDrawable 類的原始碼我們就知道了animation-list的逐幀動畫就是通過每隔指定時間變換不同的圖片來實現的。

    /**
     * <p>Starts the animation, looping if necessary. This method has no effect
     * if the animation is running. Do not call this in the {@link android.app.Activity#onCreate}
     * method of your activity, because the {@link android.graphics.drawable.AnimationDrawable} is
     * not yet fully attached to the window. If you want to play
     * the animation immediately, without requiring interaction, then you might want to call it
     * from the {@link android.app.Activity#onWindowFocusChanged} method in your activity,
     * which will get called when Android brings your window into focus.</p>
     *
     * @see #isRunning()
     * @see #stop()
     */
    public void start() {
        if (!isRunning()) {
            run();
        }
    }

    /**
     * <p>Stops the animation. This method has no effect if the animation is
     * not running.</p>
     *
     * @see #isRunning()
     * @see #start()
     */
    public void stop() {
        if (isRunning()) {
            unscheduleSelf(this);
        }
    }
    /**
     * <p>Indicates whether the animation is currently running or not.</p>
     *
     * @return true if the animation is running, false otherwise
     */
    public boolean isRunning() {
        return mCurFrame > -1;
    }

    /**
     * <p>This method exists for implementation purpose only and should not be
     * called directly. Invoke {@link #start()} instead.</p>
     *
     * @see #start()
     */
    public void run() {
        nextFrame(false);
    }

    @Override
    public void unscheduleSelf(Runnable what) {
        mCurFrame = -1;
        super.unscheduleSelf(what);
    }

最後讓我們看一下執行之後的逐幀動畫效果，如圖4和圖5所示。

圖4 順序顯示

圖5 倒序顯示

3、bitmap

XML Bitmap是定義在XML檔案當中，指向一個位圖檔案的資源，為原生的點陣圖檔案起了一個別名，其最終將被編譯成BitmapDrawable物件。
首先，在drawable資料夾下新建一個bitmap型別的xml樣式檔案bitmap.xml。

<?xml version="1.0" encoding="utf-8"?>
<!--
antialias:開啟或關閉抗鋸齒
autoMirrored:是否自動映象
dither:開啟或關閉影象抖動（如果點陣圖與顯示螢幕的畫素配置不相同時會用到，比如一張ARGB8888點陣圖和一個RGB565的顯示屏）
filter:開啟或關閉濾鏡。當收縮或是拉伸點陣圖時使用這個來使點陣圖看上去更平滑
gravity:當點陣圖大小比它所在的容器小的時候，使用這個屬性來決定點陣圖在容器中的位置
mipMap:是否使用文理對映過濾提示
src:設定資源圖片
tileMode——定義平鋪模式。如果定義了，那麼點陣圖將會重複，並且Gravity屬性將失效。可取的值有disabled（預設值，不啟用平鋪）、clamp（複製點陣圖邊緣的顏色來填充容器剩下的空白部分）、repeat（複製整個點陣圖來填充容器）、mirror（與repeat類似，但是是交替的映象複製，即相鄰的兩張是映象對稱的）
-->
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:antialias="false"
    android:autoMirrored="true"
    android:dither="true"
    android:filter="true"
    android:gravity="center"
    android:mipMap="true"
    android:src="@drawable/ic_launcher"
    android:tileMode="mirror" >

</bitmap>

其次在layout資料夾下新建xml佈局檔案activity_bitmap.xml，並引用之前寫的bitmap.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bitmap"
    android:orientation="vertical" >

</LinearLayout>

然後在src包下新建Activity的Java檔案BitmapActivity.java，用於演示操作。

package com.zcz.drawablexmltest;

import android.app.Activity;
import android.os.Bundle;

public class BitmapActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bitmap);
    }
}

最後讓我們看一下執行之後的mirror平鋪模式效果，如圖6所示。

圖6 mirror平鋪模式效果

4、clip

使用剪下影象資源可以只顯示一部分影象，這種資源經常被用在進度條的製作上，其最終將被編譯成ClipDrawable物件。
首先，在drawable資料夾下新建一個bitmap型別的xml樣式檔案clip.xml。

<?xml version="1.0" encoding="utf-8"?>
<!--
android:drawable：指定要剪下的原影象。

android:clipOrientation：擷取的方向。可取的值：horizontal和vertical。分別表示水平和垂直方向擷取影象。

android:gravity：表示如何擷取影象。例如，left表示從左側擷取影象，right表示從右側擷取影象。

-->
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ic_launcher"
    android:gravity="top" >

</clip>

其次在layout資料夾下新建xml佈局檔案activity_clip.xml，並引用之前寫的clip.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <ImageView 

        android:id="@+id/iv_clip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/clip"

        />

</LinearLayout>

然後在src包下新建Activity的Java檔案ClipActivity.java，用於演示操作。

package com.zcz.drawablexmltest;

import android.app.Activity;
import android.graphics.drawable.ClipDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class ClipActivity extends Activity {
    private ImageView mIv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_clip);

        mIv = (ImageView) findViewById(R.id.iv_clip);
        ClipDrawable drawable = (ClipDrawable) mIv.getBackground();
        drawable.setLevel(5000);
        /**
         * ClipDrawable類內部預設了一個最大的level值10000（Android
         * SDK未提供API修改該值）。如果這個level的值為0
         * ，表示擷取影象的寬度或高度為0，也就是說，影象就無法顯示了。如果level的值為10000，表示顯示全部的影象（不進行任何擷取）。
         */
    }
}

最後讓我們看一下執行之後的半截圖片效果，如圖7所示。

圖7 半截圖片效果

4、color

首先，在drawable資料夾下新建一個bitmap型別的xml樣式檔案color.xml。

<?xml version="1.0" encoding="utf-8"?>
<!-- color：指定顏色值 -->
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#555555" >

</color>

其次呢，給activity_clip.xml的LinearLayout加個背景： android:background=”@drawable/color”。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/color"
    android:orientation="vertical" >
    <ImageView 

        android:id="@+id/iv_clip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/clip"

        />

</LinearLayout>

最後讓我們看一下執行之後的顏色效果，如圖8所示。

圖8 顏色效果

5、inset

嵌入影象資源，用於通過指定的間距把圖片顯示出來，它在View需要比自身小的背景時常用，有些像padding的作用。

首先，在drawable資料夾下新建一個bitmap型別的xml樣式檔案inset.xml。

<?xml version="1.0" encoding="utf-8"?>
<!--
    android:insetBottom="100dp"
    android:insetLeft="100dp"
    android:insetRight="100dp"
    android:insetTop="100dp"
    各方向距離
-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher"
    android:insetBottom="100dp"
    android:insetLeft="100dp"
    android:insetRight="100dp"
    android:insetTop="100dp"
    android:visible="true" >

</inset>

其次呢，給activity_animation_list.xml的LinearLayout加個背景： android:background=”@drawable/inset “。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/inset"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_animation_list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/animation_list_sequence" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="sequence"
        android:text="順序顯示" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="stop"
        android:text="停止動畫" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="reverse"
        android:text="倒序顯示" />

</LinearLayout>

最後讓我們看一下執行之後的距離效果，背景檢視距各方向邊距均為100dp，如圖8所示。

圖8 距離效果

6、未完待續……