Android程序员指南(18)

5.4 使用图形的Hello World!

这一节，您将利用Hello World!程序来熟悉编程中相当常用技巧：图形的显示。离开了图形，现代计算机的屏幕将会巧然失色。我们研究的重点是将图像发送至屏幕的能力。

至少在五年以前，在手机上显示图形是相当困难的事情。作为现代个人电脑用户，与图形一起工作却是理所当然的事情。每天，我们看着各种各样的视窗，而没有考虑过这些真实的图形是怎样显示的。这个版本的Hello World！应用程序就将在屏幕上显示图像，上面写着““Hello World!”

为了开发这个程序，请使用New Android Project wizard来创建一个新的工程并将它命名为HelloWorldImage，如下图所示。

 

 

 

 创建完成以后，找到并删除main.xml中与TextView有关的代码，以便有一个干净的项目。如果您没有删除这段代码，您就无法摆脱基于文本的Hello, world!

在开始编写代码前，您需要找一个用来显示的图形。您可以使用自己的任何图形处理软件创建一个小的图形。为了方便使用，我选择了微软画图(Microsoft Paint)，下面是我的图形：

 

 

将您的图形文件命名问helloworld.png，并保存在目录%workspace%/HelloWorldImage/res/drawable中。

注意：需要特别注意的是，你的图形文件名中不能混合使用大写和小写字母。您应使用小写字母来命名，如果其中混合大写字母，当您在Eclipse中尝试使用该文件时将得到一个错误消息。

当您将图形复制到正确的目录后，刷新该项目，现在helloworld.png应该出现在您的项目视图的drawable目录中，如下图所示。

 

 

打开文件R.java看一下其中代码， Eclipse应该已经增加了一个指向helloworld.png的指针。您的R.java看起来应该是这样：

/* AUTO-GENERATED FILE. DO NOT MODIFY.
*
* This class was automatically generated by the
* aapt tool from the resource data it found. It
* should not be modified by hand.
*/
package android_programmers_guide.HelloWorldImage;
public final class R {
public static final class attr {
}
public static final class drawable {
public static final int helloworld=0x7f020000;
public static final int icon=0x7f020001;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040000;
}
}

有了一个干净的应用程序框架作为起点，以及一个指向要显示的图形的有效句柄，您可以开始添加您的代码。您将使用两种方法来实现，即基于XML的用户界面，及基于代码的用户界面。 

5.4.1  基于代码的Hello World!

假定您已经理解了前一节中HelloWorldText 方案，这个版本的Hello World将会看起来非常相似。首先，您需要导入用于显示图形的Package，显示文本我们用了TextView，图像显示则需要用ImageView。因此，你必须导入ImageView Package。与TextView一样，ImageView包含在android.widgets中。

import android.widgets.ImageView;

注：TextView和ImageView都派生自View。这使得他们在结构上非常类似，并易于实现。

导入了package后，您可以创建ImageView并将它显示到屏幕。实例化ImageView的过程与TextView的实例是完全一样的，创建一个ImageView实例并将当前的上下文环境传给它：

ImageView HelloWorldImageView = new ImageView(this);

在下一行代码中，可以看出ImageView和TextView的不同之处。这一步骤是要将View设置为您要显示的东西。在TextView的例子中，使用了setText()来设置TextView的文本为"Hello World!"，尽管我们已经知道TextView和ImageView都是从View派生的，它们仍有些不同，因此，需要一些不同的方法。很显然，你不能使用setText()来设置您的ImageView。要将图形设置到ImageView，您需要使用setImageResource。如下所示，将指向helloworld.png的句柄作为参数传给setImageResource()。（句柄是R.drawable.helloworld）

HelloWorldImageView.setImageResource(R.drawable.helloworld);

最后，将图形传送到屏幕上，你必须设置ContentView。正如对TextView做的那样，将ImageView传给ContentView。然后ContentView的工作是设置这个对象并且传送到屏幕上。

setContentView(HelloWorldImageView);

您最终的HelloWorldImage.java看起来像这样：

package android_programmers_guide.HelloWorldImage;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class HelloWorldImage extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
/**Hello World Image JFD*/
/**BEGIN */
/**Create the ImageView */
ImageView HelloWorldImageView = new ImageView(this);
/**Set the ImageView to helloworld.png */
HelloWorldImageView.setImageResource(R.drawable.helloworld);
/**Set the ContentView to the ImageView */
setContentView(HelloWorldImageView);
/**END */
}
}

编译并在Android模拟器运行HelloWorldImage，您的应用程序看起来应该类似下图。

 

 

下一节中，您将自此显示helloworld.png，只是这次我们使用XML而不是代码。

 

5.4.2 基于XML的Hello World!

本节为您提供了一个很好的比较来发掘使用基于XML和基于代码的用户界面的不同之处。你将会发现，使用main.xml将图形显示在屏幕上需要的代码的数量与基于代码实现的方式大致相同。但是，两者之间的语句是不同的。

借用上例中的同一项目，将TextView从HelloWorldImage.java中删除，干净的文件应该是这样的：

package android_programmers_guide.HelloWorldImage;
import android.app.Activity;
import android.os.Bundle;
public class HelloWorldImage extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
}
}

现在，您有一个干净的模板，开始时，迁移到main.xml。现在需要添加一个ImageView定义。让我们从在main.xml文件中增加空的ImageView标签开始：

<ImageView
/>

您需要编辑的ImageView四个属性：android:id、android:layout_width、android:layout_height和android:src。您将要把这些属性放在标签里，
它们将管理如何将标签显示在屏幕上。

android:id attribute是ImageView的唯一标识，可以在代码中被引用以表示ImageView。使用@+id/<name>来分配一个ID名称，以便使用R.layout.imageview时找到它。

android:id="@+id/imageview"

此行插入一个自动生成的ID，@+id，到R.java文件的imageview下方。

接下来您必须定义的两个属性是android:layout_width和android:layout_height。他们控制如何用图形填充屏幕。您有两种选择，fill_parent
填充图像并保持它的比例，wrap_content保持图像的原始尺寸，但可能失去了图像的清晰度。在这个例子中，使用wrap_content：

android:layout_width="wrap_content"

android:layout_height="wrap_content"

最后要指定的属性android:src，可以说是最重要的。它指定了您要显示的图形。对于这个例子，设置为drawable/helloworld图形。

android:src="@drawable/helloworld"

您的完整的ImageView标签属性看起来是这样：

<ImageView android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/helloworld"
/>

最后，在图像被显示到视图前，您必须在HelloWorldImage.java将main.xml传给setContentView。

setContentView(R.layout.main);

编译并运行HelloWorldImage，结果如下图所示。

 

 

 在结束这一章中，尝试一件事情。回到main.xml，将View的属性从wrap_content改为fill_parent，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="@+id/imageview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/helloworld"
/>
</LinearLayout>

再次编译并运行，看下它们有什么区别。

 

 

 

练习：使用TextView和ImageView

使用本章中学到的技能和技巧，创建一个同时使用TextView和的ImageView应用程序，将一个图形显示在屏幕上，并加上一个文本的标题。这比在一个Activity中使用一种View稍有点难。尝试一下，看看您能创造出什么。

下一章我们使用从命令行编程，来深入的研究Hello World!程序。

 

Q&A

Q：Android有没有Lable或LabelView，就像其他许多API一样？

A：没有。所有的文本显示都是利用TextView实现。你可以像一些已经做过的那样，创建自定义视图，功能上仿造Label，并将其命名LabelView，但没有一个Package会包含Android LabelView。

Q：使用<application>.java的方式来创建视图是否比使用main.xm要好？

A：没有文档记录两种方式哪个一个的速度更快，更节约处理器效能。但是采用main.xml有一个重要的优点，您可以为Avtivity与预定义视图，这样，在代码中，您可以从随时使用需要的视图而无需再在代码中手动创建它们。