通过上一篇文章,知道了如何创建一个应用程序来显示一个静态的View。然而,在大多数情况下仅仅显示是不够的,应该还需要与用户的交互行为。现在完成一个简单的和用户交互的示例。
这个小程序的需求是:
画面上有三行元素:
  1. 第一行是一个TextView,用来显示文字
  2. 第二行是一个EditText,用户将在此输入文字
  3. 第三行是一个Button
  4. 用户点击Button之后,会在第一行的TextView中显示:Hello,(用户在第二行中输入的文字)。
    比如说用户在输入框中输入:“Roiding.com”,那么点击Button之后,会在显示区域显示:“Hello, Roiding.com”。
要完成这个程序,大概需要用5步:
第1步,先完成UI的设计,修改上次项目在res/layout/目录下main.xml的文件:
<?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"  
        >
  
<TextView
  android:id="@+id/textview_display"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textSize="20px"
  android:textStyle="bold"
  />

<EditText
  android:id="@+id/edittext_content"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  />
  
<Button
  android:id="@+id/button_hi"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/sayhi"
  />
  
</LinearLayout>
如果已经过前两站的学习的话,这个文件还是比较容易懂的,不需要太多的解释了,只解释一下这几个语句:
  • android:id=”@+id/textview_display”
    这个是用来为当前的View声明一个ID,这样,在Java程序中就可以通过这个ID来找到这个元素,进而能够操作这个元素。
  • android:textSize=”20px”
    声明字体大小为20px,对于每种View,都会有一系列的可以设置的属性,具体的需要参考每个View的说明文档。
第2步,创建好这个布局文件之后,再把这个文件需要的android:text=”@string/sayhello”在res/values/strings.xml中补充声明一下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
        <string name="hello">Hello, welcome to get aboard Android adventure!</string>
        <string name="app_name">Adventure</string>
        <string name="sayhi">Hi</string>
</resources>

第3步,基于上一站UI设计的基础上修改Adventure.java,为UI添加交互动作,添加完毕之后:
package com.penguin.adventure;

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 Adventure extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Button btn = (Button) findViewById(R.id.button_hi);
    btn.setOnClickListener(new View.OnClickListener() {

      public void onClick(View v) {
        // TODO Auto-generated method stub
        EditText edt = (EditText) findViewById(R.id.edittext_content);
        TextView txv = (TextView) findViewById(R.id.textview_display);
        String hi = getResources().getString(R.string.sayhi);
        txv.setText(hi + ", " + 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. OMG, it's so easy, isn't it? :)

参考自:http://www.roiding.com/index.php/archives/25