设计Android的用户界面(三)

通过上一篇文章，知道了如何创建一个应用程序来显示一个静态的View。然而，在大多数情况下仅仅显示是不够的，应该还需要与用户的交互行为。现在完成一个简单的和用户交互的示例。

这个小程序的需求是：

画面上有三行元素：

1. 第一行是一个TextView，用来显示文字
2. 第二行是一个EditText，用户将在此输入文字
3. 第三行是一个Button
4. 用户点击Button之后，会在第一行的TextView中显示：Hello,(用户在第二行中输入的文字)。
   比如说用户在输入框中输入：“Roiding.com”，那么点击Button之后，会在显示区域显示：“Hello, Roiding.com”。

要完成这个程序，大概需要用5步：

第1步，先完成UI的设计，在res/layout/目录下创建一个文件，名为：sayhello.xml：

如果已经看过前一篇文章的话，这个文件还是比较容易懂的，不需要太多的解释了，只解释一下这几个语句：

• android:id=”@+id/textview_display”
  这个是用来为当前的View声明一个ID，这样，在Java程序中就可以通过这个ID来找到这个元素，进而能够操作这个元素。
• android:textSize=”20px”
  声明字体大小为20px，对于每种View，都会有一系列的可以设置的属性，具体的需要参考每个View的说明文档。

第2步，创建好这个布局文件之后，再把这个文件需要的android:text=”@string/sayhello”在res/values/strings.xml中声明一下：

say hello

第3步，现在，UI已经设计好了，那么创建一个Activity(命名为：SayHello.java)来显示这个UI：

package com.roiding.study;import android.app.Activity;import android.os.Bundle;public class SayHello extends Activity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.sayhello);}}

在这一步完成的时候，就可以运行一下这个Activity，看看最终显示的效果是否和预期的一致，如果有差别，再调整一下。

第4步，为UI添加交互动作，添加完毕之后的SayHello.java：

package com.roiding.study;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.TextView;public class SayHello extends Activity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.sayhello);Button btn = (Button) findViewById(R.id.button_sayhello);btn.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {EditText edt = (EditText) findViewById(R.id.edittext_name);TextView tv = (TextView) findViewById(R.id.textview_display);tv.setText("Hello," + edt.getText());}});}}

这里面有些语句需要解释：

• Button btn = (Button) findViewById(R.id.button_sayhello)
  这个语句中的findViewById()s是一个比较简单、重要、常用并且是一直用的语句，他的功能就是在当前的ContentView中按ID来找到 对应的View。例如这里，通过R.id.button_sayhello，就能找到第1步提到的Button了。这个用法和javascript中 的：document.getElementById()有异曲同工之妙。
  那这里面的R.id.button_sayhello又是怎么出来的呢？前文中 说过，在Build的时候，aapt会自动生成R.java，对资源文件中的 android:id=”@+id/textview_display”，就会在R.java中向对应的生成一个ID。
• btn.setOnClickListener(new View.OnClickListener())
  现在的GUI程序，好像都喜欢事件驱动的模型，有人这样描述过GUI系统本质： 在事件驱动下动态地展现数据模型的图形系统。在这个语句中，setOnClickListener就是为btn添加一个事件监听，监听OnClick事件，也就是说，如果一旦触发btn的OnClick事件，就会执行后面定义的功能。

第5步，运行程序，欣赏这部作品吧，Done。Oh My God，真是太容易了！

[待续]