Android開發筆記-表單元件設計

內容說明:建立Button與事件、表單物件方法參照表

資料來源:Android南部工作坊、androidbmi

表單元件的建立方式都大同小異,本篇以Button為例,文末有比較列表。

建立 UI 時首先要編輯 res/layout/ 底下的XML檔。這裡一開始就會有一個。如果你希望將這個介面提供給 src/ 底下的程式處理,必需要在標籤內加入「android:id=“@+id/id_name”」屬性。關於XML的使用方式可以參考XHTML架構與準則

為了避免手Key會打錯,建議使用圖形介面來新增物件。要轉換到圖形介面,可以將程式碼下面的頁籤切換到Layout,如下圖所示。切到 Layout 後,可以直接從左下角的 Views 視窗拖移物件到視窗中。請先拉一個 Button 到視窗裡。

建立好 Button 按鈕後,到右下角的 Outline 視窗找到這個 Button 物件,在上面點滑鼠右鍵開啟 Properties 視窗。在這個視窗中,就可以直接輸入此 Button 的屬性,輸入完成後系統會自動產生對應的XML內容。

產生的XML範例如下,可以手動鍵入或是在 Properties 視窗找到相對應的屬性進行編輯。

<button android:id="@+id/button_event_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="check事件測式"
    />

當你在 layout 建立好一個新的具有ID的物件時,gen 裡的 R.java 就會產生相對應的記憶體位置。在 src 目錄的主程式中,可以使用「findViewById(R.id.id_name)」來取出該物件的記憶體位置。由於findViewById只會傳回記憶體位置而已,所以必需要先做型別轉換才可以使用。將 src 目錄中的主程式開啟,在「onCreate」事件裡宣告變數來控制 TextView 和 Button。

txt_hello = (TextView) findViewById(R.id.txt_hello);
        btn_event = (Button) findViewById(R.id.button_event_check);

這個時候你會發現程式中有一些紅色的底線,請將滑鼠停到紅色底線上,在型別上點選Import…載入此型別的Class。當滑鼠停在變數名稱上時,會出現好幾種不同生命周期的宣告以供選擇,本範例的 TextView 請選擇 field,Button 選擇 local 即可。完成後的程式範例如下:

package moke.test;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;

public class main extends Activity {
    private TextView txt_hello;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        txt_hello = (TextView) findViewById(R.id.txt_hello);
        Button btn_event = (Button) findViewById(R.id.button_event_check);
    }
}

建立物件的事件時,可以先直接呼叫事件方法「Object.Event(eventObject)」,以 Button 為例,在 onCreate 中輸入:

btn_event.setOnClickListener(new Button.OnClickListener(){});

這行程式的 Button.OnClickListener() 底下就會出現紅字。將滑鼠移到上面等待一回兒會出現「Add unimplemented methods」的選項,點選後即可建立 Button 的 onClick 方法。在 onClick 中輸入「txt_hello.setText(“”)」來修改 TextView 的內容。完整的程式範例如下:

package moke.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class main extends Activity {
    private TextView txt_hello;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        txt_hello = (TextView) findViewById(R.id.txt_hello);
        Button btn_event = (Button) findViewById(R.id.button_event_check);
        btn_event.setOnClickListener(new Button.OnClickListener(){

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                txt_hello.setText("恭喜你學會OnClickListener事件~^^");
            }});
    }
}

其它的表單物件參考資訊如下:

物件 方法 事件

TextView


EditText
.getText().toString():取得文字
.setText(""):設定文字
 

Button
.setOnClickListener(new Button.OnClickListener(){})

ImageView
.setImageDrawable(new Drawable.createFromPath(pathName))  

Checkbox
.setChecked(boolean)
.isChecked()
.setOnCheckedChangeListener(new CheckBox.OnCheckedChangeListener(){})

RadioGroup


RadioButton
  .setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){})