開發應用程式時最重要的就是使用者的操作介面(UI),Android 中也有一些基本的控制項元件,像是 TextView、Button 或是 CheckBox 等等。筆者會針對幾個常用的 Widgets 元件來做用法的簡介。
TextView
只要開啟一個新的 Android 專案時,預設在 layout 中就有加入一個 TextView 元件:
檢視原始碼 XML
1 2 3 4 5 6 7 8 9 10 11 12 | <?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:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> |
我們能在 layout 中設定 textColor、textStyle 或是 padding 等多種屬性,如果想在程式中控制的話,則要幫它加上個 id 才行:
檢視原始碼 XML
1 2 3 4 5 6 7 8 9 10 11 | ...以上省略 <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="hello world" android:textColor="#FF0000" android:textStyle="italic" android:padding="30px" android:id="@+id/hello" /> ...以下省略 |
因為已經有幫它命名 id 為 hello 了,所以就能透過該 id 來找到它並存取使用:
檢視原始碼 Android
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final TextView txt = (TextView)findViewById(R.id.hello); txt.setText("這是一個基本的 TextView"); } } |
執行後的畫面:
Button
不管怎樣的程式都不可或缺的就是按鈕,而 Button 是繼續自 TextView 而來的,因此 TextView 有的屬性或方法大多能在 Button 中使用:
檢視原始碼 XML
1 2 3 4 5 6 7 8 9 | ...以上省略 <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="我是按鈕" android:textStyle="bold" android:id="@+id/btn" /> ...以下省略 |
我們可以在 layout 中使用 onClick 來指定按鈕被點擊時所要執行的動作之外,還可以透過 id 來找到元件後,再替它加上事件動作:
檢視原始碼 Android
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final Button btn = (Button)findViewById(R.id.btn); btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // do something... } }); } } |
CheckBox
勾選框可用來讓使用者進行項目的選擇動作:
檢視原始碼 XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ...以上省略 <CheckBox android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="目前狀態 : 尚未勾選" android:id="@+id/chk" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="反向勾選" android:id="@+id/btn" /> ...以下省略 |
我們可以透過 isChecked() 來判斷是否已勾選;而可用 setChecked() 來設定勾選的狀態:
檢視原始碼 Android
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; public class main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final CheckBox chk = (CheckBox)findViewById(R.id.chk); chk.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(isChecked){ chk.setText("目前狀態 : 已勾選"); }else{ chk.setText("目前狀態 : 尚未勾選"); } } }); final Button btn = (Button)findViewById(R.id.btn); btn.setOnClickListener(new OnClickListener(){ @Override public void onClick(View arg0) { // 反向勾選 chk.setChecked(!chk.isChecked()); } }); } } |