[Android]Android高级UI开发系列教程（二） Android绘制教程

教程索引

---

1. Android 拖拽（Drag and Drop）教程
2. Android 绘制（Drawables）教程
3. Android 样式和主题（Styles and Themes）教程
4. Android 动态壁纸（Live Wallpaper）教程
5. Android 主屏幕小部件（Homescreen Widgets）教程
6. Android 自定义视图（Custom Views）教程
7. Android 支持不同大小屏幕（Support different screensize）教程
8. Android 动画（animations）教程
9. Android 触摸（Touch）教程

Android绘制教程

---

---

1. Drawables 简介

    Drawable 资源是一个笼统的概念，暂且我就笼统地叫它绘制吧，使用它可以来一个图形。一个最简单的案例就是 bitmap 文件，在 Android 中可以通过 BitmapDrawable 类来封装该文件。Bitmaps 文件通常存放在 res/drawable-**目录下，当你创建一个 Android 项目的时候，伴随着也会默认创建几个 drawable 目录，drawable-hdpi|drawable-ldpi|drawable-mdpi|drawable-xhdpi，你可以为不同的 Android 设备提供不同尺寸的文件。如果你为不同尺寸的 Android 系统只提供一个文件，那么该文件在不同分辨率的设备上可能显示不同的效果。

    Android 除了支持图形文件，还支持 XML drawables 和 9-patch 图形文件。XML drawables 被用来描述shapes（color, border, gradient），State 和 Transitions 等。9-patch 图形文件的作用是当图形整个扩大，例如某个文件充当 Button 的背景图片，当按钮变得很大的时候，背景图片也会变大，那么图片自然也会变得模糊，而9-patch可以给该图片划定一个区域，用来指定图片变大后，那一块也跟着变大，哪个区域不变。

2. 获取 Drawables

   在XML文件中直接通过 @drawable/filename 来获取 Drawables，需要注意的是filename不包含扩展名。在Java代码中同样可以获取 Drawables。绝大多数的视图（Views）接受一个 resource ID来作为输出的参数。例如下面的例子展示了如何将一个 Drawables 作为 ImageView 的背景图片。

ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setImageResource(R.drawable.hello);

3. XML Drawables

3.1 Shape Drawables

    Shape Drawables XML文件可以用来定义一个几何对象，你可以定义该几何对象颜色（colors）， 边框（borders）以及渐变效果（gradients），并将该对象效果应用到视图（Views）上面。使用 Shape Drawables XML的优势在于，他们可以根据不同尺寸的手机自动调整大小。

    下面我将定义一个 Shape Drawable -- myshape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <stroke
    android:width="2dp"
    android:color="#FFFFFFFF" />
  <gradient
    android:endColor="#DDBBBBBB"
    android:startColor="#DD777777"
    android:angle="90" />
  <corners
    android:bottomRightRadius="7dp"
    android:bottomLeftRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp" />
</shape>

    接着我们将上面定义的 drawable 应用到你的 layout 中。注意下面例子中的第 5 行代码。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@drawable/myshape"
 6     android:orientation="vertical" >
 7 
 8     <EditText
 9         android:id="@+id/editText1"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12    >
13     </EditText>
14 
15     <RadioGroup
16         android:id="@+id/radioGroup1"
17         android:layout_width="match_parent"
18         android:layout_height="wrap_content" >
19 
20         <RadioButton
21             android:id="@+id/radio0"
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:checked="true"
25             android:text="@string/celsius" >
26         </RadioButton>
27 
28         <RadioButton
29             android:id="@+id/radio1"
30             android:layout_width="wrap_content"
31             android:layout_height="wrap_content"
32             android:text="@string/fahrenheit" >
33         </RadioButton>
34     </RadioGroup>
35 
36     <Button
37         android:id="@+id/button1"
38         android:layout_width="wrap_content"
39         android:layout_height="wrap_content"
40         android:text="@string/calc" 
41         android:onClick="myClickHandler">
42     </Button>
43 
44 </LinearLayout>

3.2 State Drawables

    State Drawables可以用来指定不同的状态， 针对视图（View）的不同状态可以给该视图赋予不同的 drawable。最常见的例子就是根据按钮不同的状态，显示不同的 drawable。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@drawable/button_pressed"
    android:state_pressed="true" />
  <item android:drawable="@drawable/button_checked"
    android:state_checked="true" />
  <item android:drawable="@drawable/button_default" />

</selector>

3.3 Transition Drawables

    Transition Drawables可以用来在代码中进行图片转换。

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/first_image" />
  <item android:drawable="@drawable/second_image" />
</transition>

final ImageView image = (ImageView) findViewById(R.id.image);
final ToggleButton button = (ToggleButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(final View v) {
    TransitionDrawable drawable = (TransitionDrawable) image.getDrawable();
    if (button.isChecked()) {
      drawable.startTransition(500);
    } else {
      drawable.reverseTransition(500);
    }
  }
});

4. 9-Patch Drawables

    9 Patch drawables 是一些具有额外 1px 外边框的图片资源。在9-Patch 图片的上边和左边你可以定义一块区域， 当图片资源相对于视图而言太小的时候，这些区域将被缩放。在图片的右边和下面你也可以定义一块区域，如果视图可以添加文字信息，那么这些文字信息将被放置在这些区域，例如Button。

    在 android-sdk/tool安装目录下，你可以找到 draw9patch 程序，使用该程序你可以轻松地绘制 9 Patch drawables。