Home » Android 程式片段

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

開發應用程式時最重要的就是使用者的操作介面(UI),Android 中也有一些基本的控制項元件,像是 TextViewButton 或是 CheckBox 等等。筆者會針對幾個常用的 Widgets 元件來做用法的簡介。

TextView
只要開啟一個新的 Android 專案時,預設在 layout 中就有加入一個 TextView 元件:

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 中設定 textColortextStyle 或是 padding 等多種屬性,如果想在程式中控制的話,則要幫它加上個 id 才行:

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 來找到它並存取使用:

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 中使用:

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 來找到元件後,再替它加上事件動作:

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
勾選框可用來讓使用者進行項目的選擇動作:

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() 來設定勾選的狀態:

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());
			}
 
		});
    }
}

發表迴響