[译文]Form Stuff - Android SDK Tutorials系列

Form Stuff

本教程介绍几种窗口小部件，利用它们能创建不同的窗体，例如：图片按钮、文本框、复选框以及单选按钮等。

  1. 创建工程：HelloFormStuff.
  2. 打开res/layout/main.xml，里面应该已经有一个基本的LinearLayout: 
    <?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" >
</LinearLayout>
    你可以添加你需要的窗口小部件到LinearLayout里面。

下面的每一章节，都假设HelloFormStuff 已经实现了下面的默认的onCreate()方法：

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

下面，选择你要创建的窗口小部件（也可以不选择，一个一个依次往下看）：

Custom Button

这一节，我们将创建一个图片按钮，而不是通常的文本按钮。使用Button小部件和一个XML布局文件，根据按钮的状态来显示不同的图片。当按钮被按下时，会显示一个文本消息。

  1. 将下面的图片拷贝到res/drawable/。这些图片用于显示按钮的不同状态。
    android_pressedandroid_focusedandroid_normal
  2. 在res/drawable/ 下面创建一个android_button.xml布局文件， 内容如下： 
    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/android_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/android_normal" />
</selector>

    这个XML文件定义了一个图像资源，当按钮状态变化时，显示的图片也跟着变。第一个<item> 定义了当按钮被按下时显示的图片是android_pressed.png；第二个<item> 定义了当按钮被选中时（当按钮被轨迹球或者方向键选中时）显示的图片是android_focused.png；第三个<item> 定义了当按钮既没被按下，也没被选中时显示的图片是android_normal.png。这个XML文件就是一个图像资源，当Button用它做背景时，显示的图片会随着按钮状态的变化而变化。

    注意: <item> 项的顺序是有讲究的。当这个图像资源被引用时，系统会依次检查<item> 项来决定按钮当前状态应该显示哪张图片。因为"normal"图片在最后，显示它的前提是 android:state_pressed （按下）和android:state_focused （选中）两个条件都不满足。

  3. 打开 res/layout/main.xml并在LinearLayout里面添加一个Button： 
        <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/android_button" />

    android:background 属性指定了按钮的背景图片（如果前面创建的android_button.xml文件改名为android.xml，那这里的背景应该设置为@drawable/android）。这个XML文件代替了按钮普通的背景图片，在整个系统里绝大部分按钮是直接用背景图片的。

  4. 在onCreate()末尾添加以下代码来处理点击事件： 
    final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
    public void onClick(View v) {
        // Perform action on clicks
        Toast.makeText(HelloFormStuff.this, "Beep Bop", Toast.LENGTH_SHORT).show();
    }
});
    这段代码获得对界面里面Button的引用，然后给它加上一个点击事件监听器。监听器里面必须实现一个onClick(View) 回调函数来处理点击事件，这里会显示一个文本消息。
  5. 运行应用。

Edit Text

本节里，将用EditText创建一个让用户输入的文本框。输入文本后按下"Enter" (“回车”)会弹出一条文本消息，显示输入的内容。

  1. 打开res/layout/main.xml， 在LinearLayout里面添加一个EditText： 
    <EditText
        android:id="@+id/edittext"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
  2. 在onCreate()方法末尾添加以下代码来处理按键事件： 
    final EditText edittext = (EditText) findViewById(R.id.edittext);
edittext.setOnKeyListener(new OnKeyListener() {
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        // If the event is a key-down event on the "enter" button
        if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
            (keyCode == KeyEvent.KEYCODE_ENTER)) {
          // Perform action on key press
          Toast.makeText(HelloFormStuff.this, edittext.getText(), Toast.LENGTH_SHORT).show();
          return true;
        }
        return false;
    }
});
    这段代码获得对界面里EditText的引用，并给它添加一个 View.OnKeyListener按键监听器，监听器必须实现 onKey(View, int, KeyEvent)方法，该方法处理按键事件（当该部件处于焦点时）。这里只处理回车输入，回车时会弹出一个文本消息框显示输入的内容。onKey(View, int, KeyEvent)方法应该总是在处理事件以后返回true，这样该事件就不会“起泡”（结果是在文本框保存一个回车符）。

     

  3. 运行应用。

Checkbox

本节里，将用CheckBox来创建一个复选框用来选择选项。当复选框被点击时，会弹出一个文本消息显示复选框的当前状态。

  1. 打开res/layout/main.xml，添加一个 CheckBox ： 
        <CheckBox android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="check it out" />
  2. 在 onCreate()末尾添加以下代码来处理复选框状态的变化： 
    final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);
checkbox.setOnClickListener(new OnClickListener() {
    public void onClick(View v) {
        // Perform action on clicks, depending on whether it's now checked
        if (((CheckBox) v).isChecked()) {
            Toast.makeText(HelloFormStuff.this, "Selected", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(HelloFormStuff.this, "Not selected", Toast.LENGTH_SHORT).show();
        }
    }
});

    这段代码首先获得界面里CheckBox的引用，然后给它添加一个点击事件监听器来处理复选框的点击事件。被点击后，isChecked()会被调用来检查复选框的新状态。如果是被选中状态，则弹出文本消息框显示"Selected"，否则显示"Not selected"。注意，View对象被转换成了CheckBox对象，因为isChecked()方法在类View里面没有定义。Checkbox会处理自己的状态变化，因此只要查询他的当前状态就可以了。

  3. 运行应用。

小贴士: 如果你想自己改变复选框的状态（例如当加载一个保存的CheckBoxPreference时），调用setChecked(boolean) 或 toggle() 方法.

Radio Buttons

本节里，将用RadioGroup和RadioButton两个窗口小部件来创建两个互斥的单选按钮。无论点击哪个按钮，都会显示一个文本消息。

  1. 打开res/layout/main.xml，添加如下内容：


    把两个RadioButton放在RadioGroup里分成一组很关键，这样保证了只有一个按钮被选中，这个由Android系统自动完成。当一个组里面的RadioButton被选中时，其他的所有按钮都被自动设置为未选中状态。

  2. 需要添加一个点击事件监听器来处理RadioButton的点击事件。这里，由于需要复用这个监听器，所以添加下面的代码为HelloFormStuff创建一个新的成员： 
    private OnClickListener radio_listener = new OnClickListener() {
    public void onClick(View v) {
        // Perform action on clicks
        RadioButton rb = (RadioButton) v;
        Toast.makeText(HelloFormStuff.this, rb.getText(), Toast.LENGTH_SHORT).show();
    }
};

    首先，把View转换成RadioButton，然后弹出一个文本消息显示被选中的按钮上的文本。

  3. 在onCreate()末尾添加以下内容： 
      final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
  final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);
  radio_red.setOnClickListener(radio_listener);
  radio_blue.setOnClickListener(radio_listener);

    界面获得每个单选按钮RadioButton的引用，并为它们每个设置新创建的监听器。

  4. 运行应用。

Toggle Button

本节里，将用ToggleButton小部件来创建一个开关按钮，这种按钮有两种状态可以切换，是对单选按钮的完美替代，当只有两个简单的互斥状态时（例如：“打开”，“关闭”）。

  1. 打开 res/layout/main.xml，添加ToggleButton： 
        <ToggleButton android:id="@+id/togglebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="Vibrate on"
        android:textOff="Vibrate off"/>


    属性android:textOn 和android:textOff 设置了按钮不同状态下的显示文本，默认是"ON"和"OFF"。

  2. 在onCreate()末尾添加以下代码来处理按钮的点击事件： 
    final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.togglebutton);
togglebutton.setOnClickListener(new OnClickListener() {
    public void onClick(View v) {
        // Perform action on clicks
        if (togglebutton.isChecked()) {
            Toast.makeText(HelloFormStuff.this, "Checked", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(HelloFormStuff.this, "Not checked", Toast.LENGTH_SHORT).show();
        }
    }
});
    首先获得对ToogleButton的引用，然后添加一个点击事件监听器。监听器必须实现onClick(View)回调函数来处理点击事件。这里，回调函数检查按钮的新状态，并弹出一条文本消息显示当前状态。

    注意：ToggleButton会自己处理自己的状态变化（选中、未选中），因此只需要查询是什么状态就可以了。

  3. 运行应用。

Rating Bar

本节里，将用RatingBar来创建一个小部件让用户能够进行等级评价。

  1. 打开res/layout/main.xml 并添加一个RatingBar ： 
        <RatingBar android:id="@+id/ratingbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="1.0"/>
    属性android:numStars 设置显示几颗星星，属性android:stepSize 设置评价等级的粒度（例如，0.5允许评价半颗星）。
  2. 在onCreate()末尾添加以下代码来处理评价事件: 
    final RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
        Toast.makeText(HelloFormStuff.this, "New Rating: " + rating, Toast.LENGTH_SHORT).show();
    }
});

    首先获得对RatingBar的引用，然后设置RatingBar.OnRatingBarChangeListener评价事件监听器。回调函数onRatingChanged() 处理用户的评价。这里，弹出一条文本消息显示最新的评价。

  3. 运行应用。

如果你添加了上面讲到的所有小部件，你的应用看起来应该像这样：

posted on 2011-12-08 12:28  OnionD  阅读(176)  评论(0)  编辑  收藏  举报

导航