《Learning Android中文版》学习笔记06.9

图片与色彩

我们的程序运行良好，但它的外观仍略显粗糙，不太好看。这时可以利用Android的相关特性，为程序添加一些图片和色彩。

添加图片

先给界面加上背景图片。在Android中，多数图片都是放在一个名为drawable的资源目录中。可以留意，我们有三个这样的目录：

• /res/drawable-hdpi 用于较高分辨率的设备
• /res/drawable-mdpi 用于中等分辨率的设备
• /res/drawable-ldpi 用于较低分辨率的设备

我们新建另一个目录，名为/res/drawable。右键单击res目录，选择New→Folder，输入名称为drawable。然后把分辨率无关的图片都放在这里即可。假定你已经找到了不错的背景图，并保存为background.png。Android支持多种图片格式，但我们在这里优先选择PNG格式而非GIF，这是因为PNG是无损格式，而且不需要专利许可。

Tip:

PNG官方的全称是Portable Network Graphics。它也常常被人称作PNG's Not Gif，从这里可以看出它与GIF的分道扬镳。

留意，所有的资源文件都被Eclipse“监视”着，在我们加入新资源的同时，Eclipse就会利用Android SDK工具自动更新R类。像刚才我们新加入了一个图片，R类中就多了一项R.drawablw.background。随后就可以在Java中引用它了。

不过我们不是在Java中引用它。要将背景图铺到整个界面上，就更改顶层布局，将它的背景置为这个新加入的PNG文件。接下来要修改的是StatusActivity的布局文件res/layout/status.xml。有两种方法：

使用Eclipse的所见即所得编辑器

第一种方法是使用Eclipse的所见即所得工具，如 图6.13 "Eclipse的所见即所得工具"。使用它，我们需要先选择主布局。其中列的组件比较多，因此选起来可能会费些力气。红色边框表示当前选择的Layout或者View。

图 6.13. Eclipse****的所见即所得工具

图6.13. Eclipse的所见即所得工具

选择的主布局另一种方式是使用Eclipse的Outline视图，选择顶层元素。Outline这个视图的显示与否，与你Eclipse中窗口的个人设置有关。保险的方式是选择Window→Show View→Outline，这一定可以打开它。进入这个视图，选择顶层布局，在这里是我们的LinearLayout。若有红色边框围着整个Activity，那就表示选择对了。

接下来打开Eclipse的Properties视图。同Outline视图一样，它也不一定显示在外面。这时可以选择Window→Show View→Other，然后在General下选择Properties即可。这样可以打开一个视图，提供各种属性的设置。

我们想要修改的属性是background。你可以点击…按钮打开Reference Chooser对话框，如 图6.14 "Reference Chooser"。然后选择Drawable→background。

图 6.14. Reference Chooser

图 6.14. Reference Chooser

这将为你的顶层布局设置背景为@drawable/background。这是一种在XML资源里引用另一个资源的方式。在本例中，我们的status.xml布局引用了background.png drawable。注意到我们没有在引用其他资源时使用扩展名。Android会在出现相同名字不同扩展名时，自动选择最合适的文件类型。

设置顶层布局的background属性为@drawable/background。回想下，这正是在资源文件中引用其它资源文件的方式。放在这里，就是status.xml引用了drawable中的background.png文件。留意在引用其它文件的时候，我们不需要写扩展名。遇到名字相同但扩展名不同时，Android会自动检查出最合适的扩展名。

直接修改XML代码

另一种办法是直接修改XML代码。记住，所有用Eclipse工具所做的事情，在纯文本编辑器内也能做。要切换到XML代码视图，选择窗口底部的标签页status.xml，在Layout标签页后。这将会用标准XML编辑器打开文件。

第二种办法是直接修改XML代码。记住，凡是Eclipse工具能做的事情，纯文本编辑器也都能做。在窗口底部，Layout标签之右，就是status.xml标签。选择它即可切换到XML的文本编辑器。

为整个Activity添加背景资源，我们只在<LinearLayout>中简单加上android:background="@drawable/background"即可。

相比使用所见即所得工具所需的步骤，直接修改XML显然要清晰的多。从现在开始，我们将直接修改XML代码，毕竟所见即所得的灵活性有限。

设置颜色

现在界面有了背景图，但是文本框呢？依然乏善可陈。接下来为它设置下颜色，同时添加透明效果。

Android使用标准的RGB颜色，加上可选的Alpha项，你可以使用RGB或ARGB两种方式描述颜色。其中A表示透明度，R表示红色，G表示绿色，B表示蓝色。每个值都在0~255之间，通过它们的混合，即可调和出各种不同的颜色以及不同的透明度。颜色的数目是有限的，这一点可能会让莫奈这样的大画家不高兴，但对电子设备来说，这已经绰绰有余了。

0到255之间的值，换成十六进制就是0到FF。表示颜色的话，一般还是十六进制用的多。格式是AARRGGBB，其中的每个字符都是0到F之间的数字。这一格式有一种简化形式，那就是ARGB，其中每个字符表示重复的两个字符。比如#3A9F与#33AA99FF相同，对应的Alpha为#33、红为#AA、绿为#99、蓝为#FF。可以留意这里的#号，它用来表示这是个十六进制数，与十进制做区别。

好，更新EditText的background属性为#cfff，表示背景色为半透明的白色。

也可以修改textColor属性更改TextView的文本颜色。比如我们觉得白色不错，可以把它设置为#fff，也可以输入@android:color/white引用操作系统内置的资源定义，也就是白色。

例 6.8. res/layout/status.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Main Layout of Status Activity -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:orientation="vertical" android:layout_width="fill_parent"
   android:layout_height="fill_parent" 
   android:background="@drawable/background"><!-- 1 -->

  <!-- Title TextView-->
  <TextView android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:gravity="center"
    android:text="@string/titleStatus" android:textSize="30sp"
    android:layout_margin="10dp" android:textColor="@android:color/white" /><!-- 2 -->

  <!-- Text Counter TextView -->
  <TextView android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_gravity="right"
    android:id="@+id/textCount" android:text="000"
    android:layout_marginRight="10dp" />

  <!-- Status EditText  -->
  <EditText android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:layout_weight="1"
    android:hint="@string/hintText" android:id="@+id/editText"
    android:gravity="top|center_horizontal" android:background="#cfff" /><!-- 3 -->

  <!-- Update Button -->
  <Button android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:text="@string/buttonUpdate"
    android:textSize="20sp" android:id="@+id/buttonUpdate" />
</LinearLayout>

1. 设置主布局的背景为/res/drawable/目录下的background.png。
2. 设置标题文本的颜色为系统资源定义中的白色。
3. 设置文本框的背景为透明白色，十六进制格式，也就是#cfff。

到这里，我们已观察了设置View颜色的几种方法。Android为开发者提供了丰富的控件，它们的属性也数目繁多、功能各异，但道理都是相同的。要设置哪个控件的哪个属性，我们完全可以凭经验推断出来，这就是最小立异原则的一种体现。