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

本文转载自查看原文 2012-11-14 23:28 2910

教程索引

Android 拖拽（Drag and Drop）教程
Android 绘制（Drawables）教程
Android 样式和主题（Styles and Themes）教程
Android 动态壁纸（Live Wallpaper）教程
Android 主屏幕小部件（Homescreen Widgets）教程
Android 自定义视图（Custom Views）教程
Android 支持不同大小屏幕（Support different screensize）教程
Android 动画（animations）教程
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。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Android开发系列---UI篇---添加和消除通知栏图标 Android项目实战--手机卫士开发系列教程【Java学习系列】第3课--Java 高级教程 Android系列之UI组件----Menu菜单 Android UI系列-----ImageView的scaleType属性【ASP.NET Identity系列教程（三）】Identity高级技术 python Matplotlib 系列教程(三)——绘制直方图和条形图 eeglab中文教程系列(9)-绘制ERP图像 Android开发之使用Handler刷新UI控件 Android开发中内存和UI优化