Home » Android 程式片段

[Android]基本的 Widget 元件介紹 (一)

[ 日期： | 瀏覽：21,626 | 迴響：搶沙發 ]

開發應用程式時最重要的就是使用者的操作介面(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());
			}
 
		});
    }
}

發表迴響