Android - Resource 之 Drawable小结

本篇直接选择性地翻译官方开发指南

=============================

Drawable有十种类型，如下

（1） - Bitmap file：这个简单，也可以用xml来更详细的定义，先按下不写。。。。

（2） - Nine-Patch File: 这个是一个自定义绽放区域的Bitmap，一般以.9.png为后缀，可能用 SDK/tools/draw9patch.bat来生成，实际上这个工具在图片外边缘添加一个一像素的边框用来标记“缩放区域”，如下

　　　　

　　调整一下后，会得到这样的效果：

　　　　

（3） - Layer List：一个多层级的Drawable，按顺序绘制到屏幕：

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

效果如下：

（4） - State List: 就是根据该Drawable的状态来决定用哪个Drawable来显示，例如是一个Button有(pressed、focused、niether)各种状态。

　例子如下：

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

（5） - Level List: 在一个View中根据其level显示不同的drawable，创建一个LevelListDrawable。例子：

<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:maxLevel="4" android:drawable="@drawable/stat_sys_battery_0" />
    <item android:maxLevel="14" android:drawable="@drawable/stat_sys_battery_10" />
    <item android:maxLevel="29" android:drawable="@drawable/stat_sys_battery_20" />
    <item android:maxLevel="49" android:drawable="@drawable/stat_sys_battery_40" />
    <item android:maxLevel="69" android:drawable="@drawable/stat_sys_battery_60" />
    <item android:maxLevel="89" android:drawable="@drawable/stat_sys_battery_80" />
    <item android:maxLevel="100" android:drawable="@drawable/stat_sys_battery_100" />
</level-list>

然后在View中，把ImageView的src设置为该xml，调用:

　　imageView.getDrawable().setLevel(50);

android会自动选择对应的图片，显示剩余电量就是这样实现的。选择的规则是选maxLevel大于或等于setLevel传入参数的item.

（6） - Transition Drawable: 用于定义一个能够淡入淡出的效果，创建一个TransitionDrawable。例子：/drawable/transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:drawable="@drawable/ic_m_48"
       android:top="20dp"
       android:left="20dp"/>
   <item android:drawable="@drawable/ic_2_h"/>
</transition>

在Layout中引用如下：

<ImageButton android:id="@+id/btn_3"
    android:contentDescription="@string/content_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/transition"
    android:onClick="TransitionDrawableTest"/>

在回调函数中进行如下调用：

    public void TransitionDrawableTest(View view){
        ImageButton button = (ImageButton) findViewById(R.id.btn_3);
        TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
        drawable.startTransition(500);
    }

（7）- Inset Drawable:嵌入某个Drawable，可以保留一定的边缘。当一个View的背景比View本身大小要小的时候，这个很好用。创建一个InsetDrawable。

例子很简单：

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

（8） - Clip Drawable:裁剪的Drawable，进度条时十分好用。

clip.xml如下：

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

activity里的ImageView与seelbar:

<SeekBar android:id="@+id/seelbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="10000"
        android:progress="5000"
        android:thumb="@drawable/ic_launcher"
        />
<ImageView android:id="@+id/image_clip"
    android:background="@drawable/clip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/content_description"
     />

在activity的onCreate函数里为seekbar添加一个Listener：

        SeekBar seekbar = (SeekBar)findViewById(R.id.seelbar);
        seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {
                // TODO Auto-generated method stub
                ClipDrawable drawable = (ClipDrawable) imageview.getBackground();
                drawable.setLevel(progress);
            }
        });

效果：

（9）Scale Drawable:用于改变其他drawable大小的一个drawable（太拗口），指向一个ScaleDrawable。

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

例子：

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

（10） - Shape 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="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>