Document

Download Report

Transcript Document 

Chapter 4
手機控制項應用
本投影片（下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師（下稱老師）專用，老師為教學使用之目的，得摘錄、編輯、重製教用資
源（但使用量不得超過各該教用資源內容之80%）以製作為輔助教學之教學投影片，並於授課時搭配旗標書籍公開播放，但不得為網際網路公開傳輸之遠距教學、
網路教學等之使用；除此之外，老師不得再授權予任何第三人使用，並不得將依此授權所製作之教學投影片之相關著作物移作他用。
著作權所有 © 旗標出版股份有限公司
Component Placement
<LinearLayout>
線性佈局共有兩個方向：
– 垂直（vertical）
– 水平（horizontal）
決定垂直或是水平的屬性為Orientation
– android:orientation="vertical"
<LinearLayout>
線性佈局就是將在< LinearLayout >內的元
件以線性的方式來呈現
<LinearLayout> - Example
在這個範例中，使用了<TextView>元件，
共使用了三個<TextView>，這三個元件都
以垂直向下的方式來呈現
<LinearLayout> - Example
布局文件(res/layout/main.xml)：
<?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:text="這是第一列"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="這是第二列"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="這是第三列"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout> - 常用屬性設定
android:orientation
– 在<LinearLayout>中，此屬性代表元件的排列
是垂直或水平佈局
android:layout_width
– 代表此元件佈局的寬度，若值為fill_parent則會
填滿parent的寬度；若值為wrap_content則元件
寬度會依照內容大小而調整
<LinearLayout> - 常用屬性設定
android:layout_height
– 代表此元件佈局的高度，若值為fill_parent則會
填滿parent的高度；若值為wrap_content則元件
高度會依照內容大小而調整
android:layout_margin
– 指定這個view距離上下左右的額外距離
<LinearLayout> - 常用屬性設定
android: layout_marginBottom
– 指定這個view距離下方的額外距離
android: layout_marginLeft
– 指定這個view距離左方的額外距離
android: layout_marginRight
– 指定這個view距離右方的額外距離
android: layout_marginTop
– 指定這個view距離上方的額外距離
<FrameLayout>
FrameLayout是所有佈局中最單純的
若同個FrameLayout中若有數個元件
– 以最上層的元件為主
若同個FrameLayout中有同大小的元件
– 只會看到最上層的元件
若同個FrameLayout中有不同大小的元件
– 會看到由下至上的元件
<FrameLayout> - 範例
This is 蓋過 That is
<FrameLayout> - Example
布局文件-1 (res/layout/main.xml) ：
<?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">
<FrameLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- 最底層的元件 -->
<EditText android:text="That is a framelayout example"
android:id="@+id/text01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<FrameLayout> - Example
布局文件-2(res/layout/main.xml)：
<!-- 最上層的元件 -->
<EditText android:text="This is"
android:id="@+id/text02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
下層元件為"That is a framelayout example"
上層元件為"Thit is"
<RelativeLayout>
<RelativeLayout> - Example
用RelativeLayout展示
如LinearLayout的結果
<RelativeLayout> - Example
布局文件架構(res/layout/main.xml)：
<!-- 顯示第一行的TextView -->
android:id="@+id/TextView01"
<!-- 顯示第二行的TextView -->
android:id="@+id/ TextView02"
android:layout_below="@id/ TextView01"
<!-- 顯示第三行的TextView -->
android:id="@+id/ TextView03"
android:layout_below="@id/ TextView02"
程式以TextView01為參考，TextView02置放在
TextView01下方，TextView03放置在TextView02下方
<RelativeLayout> - Example
布局文件架構(res/layout/main.xml)：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="這是第一列"
android:id="@+id/TextView01"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="這是第二列"
android:id="@+id/TextView02"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TextView01" />
<TextView
android:text="這是第三列"
android:id="@+id/TextView03"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TextView02" />
</RelativeLayout>
此範例用到三個TextView，利用三個
TextView作RelativeLayout
<RelativeLayout> - 常用屬性設定
android:layout_above
– 置於目標id元件的上方
android:layout_alignBaseline
– 置於與目標id元件同樣的基準線上
android:layout_alignBottom
– 讓自己的下邊界與目標id元件的下邊界在同一
個位置
<RelativeLayout> - 常用屬性設定
android:layout_alignLeft
– 讓自己的左邊界與目標id元件的左邊界在同一
位置
android:layout_alignParentBottom
– 若為true，讓自己的下邊界與Parent的下邊界同
位置
android:layout_alignParentLeft
– 若為true，讓自己的左邊界與Parent的左邊界同
位置
<RelativeLayout> - 常用屬性設定
android:layout_alignParentRight
– 若為true，讓自己的右邊界與Parent的右邊界同
位置
android:layout_alignParentTop
– 若為true，讓自己的上邊界與Parent的上邊界同
位置
android:layout_alignRight
– 讓自己的右邊界與目標id元件的右邊界在同一
位置
<RelativeLayout> - 常用屬性設定
android:layout_alignTop
– 讓自己的上邊界與目標id元件的上邊界在同一
個位置
android:layout_alignWithParentIfMissing
– 若設為true，當參考的目標id不可用時，會以
Parent為參考目標
android:layout_below
– 置於目標id元件的下方
<RelativeLayout> - 常用屬性設定
android:layout_centerHorizontal
– 若為true，置於Parent水平位置的中心
android:layout_centerInParent
– 若為true，置於Parent水平以及垂直位置的中心
android:layout_centerVertical
– 若為true，置於Parent垂直位置的中心
android:layout_toLeftOf/toRightOf
– 置於目標id元件的左方/右方
<TableLayout>
<TableLayout> - Example
範例使用了三個<TableRow>，意
即有三個row。
<TableLayout> - Example
布局文件-1(res/layout/main.xml)：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow android:layout_marginTop="20px">
<TextView
android:layout_column="0"
android:text="第一列\n第一行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>
<TextView
android:layout_column="1"
android:text="第一列\n第二行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>/>
</TableRow>
<TableRow android:layout_marginTop="20px">
<TextView
<TableLayout> - Example
布局文件-2(res/layout/main.xml)：
android:layout_column="0"
android:text="第二列\n第一行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>
<TextView
android:layout_column="1"
android:text="第二列\n第二行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>/>
</TableRow>
<TableRow android:layout_marginTop="20px">
<TextView
android:layout_column="0"
android:text="第三列\n第一行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>
<TextView
android:layout_column="1"
android:text="第三列\n第二行"
android:textSize="22sp"
android:layout_marginLeft="60px"/>/>
</TableRow>
</TableLayout>
Text Component
TextView
TextView是個基本常用的元件
– 可使用XML來操作
– 可使用程式碼中的Method方法來操作
下列敘述XML與Method相對應之屬性功能
– 格式為 XML <-> Method
TextView – 屬性功能介紹
android:autoLink <-> setAutoLinkMask(int)
– 可讓文字上的連結自動變成可點擊的連結
android:gravity <-> setGravity(int)
– 設定文字在View中x軸和y軸相關數值
android:height <-> setHeight(int)
– 設定TextView的高度
android:width <-> setWidth(int)
– 設定TextView的寬度
TextView – 屬性功能介紹
android:hint <-> setHint(int)
– 當Text是空的時候，就會顯示hint中的文字
android:lines <-> setLines(int)
– 設置TextView高度為幾個Line的高度，值必須
為整數型別
android:maxLength <-> setFilters(InputFilter)
– 設定TextView文字的最大長度
TextView – 屬性功能介紹
android:password <->
setTransformationMethod(Transformation)
– 讓Text顯示成其他符號，常用於輸入或顯示密
碼時
android:text <-> setText(CharSequence)
– 顯示的文字
android:textStyle <-> setTypeface(Typeface)
– 設定文字樣式
TextView – 屬性功能介紹
android:textColor <->
setTextColor(ColorStateList)
– 設定文字的顏色
android:textColorLink <->
setLinkTextColor(int)
– 設定連結的顏色
android:textSize <-> setTextSize(float)
– 設定文字大小
TextView – Example
若點擊上述的網址，則會自動開
啟瀏覽器跳至指定之網頁
TextView – Example 1
純粹用XML語法產生連結(res/layout/main.xml)：
<?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:gravity="center"
設置autoLink為web
android:autoLink="web"
android:text="Google - www.google.com" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
設置autoLink為web
android:autoLink="web"
android:text="Yahoo - www.yahoo.com.tw" />
</LinearLayout>
TextView – Example 2
布局文件(res/layout/main.xml)：
<?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"
android:id="@+id/my_layout" >
</LinearLayout>
用程式碼產生連結 – 1(TextView.java)：
package ncu.bnlab;
import android.app.Activity;
import android.os.Bundle;
import android.text.util.Linkify;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.TextView;
TextView – Example 2
用程式碼產生連結 – 2(TextView.java)：
public class TextViewExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout layout = (LinearLayout)findViewById(R.id.my_layout);
TextView tv1 = new TextView(this);
tv1.setGravity(Gravity.CENTER);
tv1.setAutoLinkMask(Linkify.WEB_URLS);
tv1.setText("Google - www.google.com");
layout.addView(tv1);
TextView tv2 = new TextView(this);
tv2.setGravity(Gravity.CENTER);
tv2.setAutoLinkMask(Linkify.WEB_URLS);
tv2.setText("Yahoo - www.yahoo.com.tw");
layout.addView(tv2);
}
}
TextView – autoLink屬性
 android:autoLink <-> setAutoLinkMask(int)
– none
• autoLink預設值
– all <-> Linkify.ALL
• 目前所有連結種類
– email <-> Linkify. EMAIL_ADDRESSES
• Email連結
– phone <-> Linkify. PHONE_NUMBERS
• 電話號碼連結
– web <-> Linkify.WEB_URLS
• 網址連結
AutoCompleteTextView
 AutoCompleteTextView可達到簡易自動完
成Text的功能
假設已有定義台灣的縣市英文名稱，當輸
入Ta時，程式會自動將符合Ta的縣市名稱
給列出來，如範例所展示。
AutoCompleteTextView – Example
AutoCompleteTextView – Example
布局文件(res/layout/main.xml)：
<?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" >
<AutoCompleteTextView
android:text=""
android:id="@+id/city"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
AutoCompleteTextView – Example
程式碼(TextView.java)：
package ncu.bnlab;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
public class AutoCompleteTextViewExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, TAIWAN);
AutoCompleteTextView TaiwanCity =
(AutoCompleteTextView)findViewById(R.id.city);
TaiwanCity.setAdapter(adapter);
}
private static final String[] TAIWAN = new String[] {
"Keelung", "Taipei", "Taoyuan", "Hsinchu", "Miaoli", "Taichung", "Changhua",
"Nantou", "Yunlin", "Chiayi", "Tainan", "Kaohsiung", "Pingtung ", "Yilan",
"Hualien", "Taitung"
};
}
Form Component
Button
Button的layout方面會有兩種屬性
– wrap_content
• layout_width為wrap_content時，這個button會依據
button上的text長度為基準
– fill_parent
• layout_width為fill_parent時，則會以parent最寬的長
度為主
Button – Example
利用XML建立Button即可
ImageButton
ImageButton可以將圖片當作button的背景
– 利用此屬性 layout:src="圖片位置"
ImageButton 範例
ImageButton – Example
布局文件(res/layout/main.xml)：
<?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">
<ImageButton android:id="@+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/heart" />
<ImageButton android:id="@+id/ImageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/lightning" />
<ImageButton android:id="@+id/ImageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/star" />
</LinearLayout>
RadioButton
RadioButton為個別的一個按鈕
若要做成有多選一這種功能時，則需將這
些RadioButton放置一個<RadioGroup>中
RadioButton – Example
RadioButton – Example
布局文件-1(res/layout/main.xml)：
<?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:text="您對此次教學感到?"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal“>
RadioButton – Example
布局文件-2(res/layout/main.xml)：
<RadioButton
android:text="滿意"
android:id="@+id/RadioButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"/>
<RadioButton
android:text="普通"
android:id="@+id/RadioButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:text="不滿意"
android:id="@+id/RadioButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
</LinearLayout>
ToggleButton
ToggleButton是一種類似開關的Button
– 預設為 Off，點擊後變為 On
開關上的文字也可以自訂
– android:textOn和android:textOff當中的文字即為
開關On或Off時顯示的文字
ToggleButton – Example
此範例中，使用到一個簡單的事件處理，當開
關變動時在開關下方的TextView會跟著改變。
ToggleButton – Example
布局文件-1(res/layout/main.xml)：
<?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">
<ToggleButton
android:text="@+id/ToggleButton01"
android:id="@+id/ToggleButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Now is Off"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
ToggleButton – Example
布局文件-2(res/layout/main.xml)：
<ToggleButton
android:text="@+id/ToggleButton02"
android:id="@+id/ToggleButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30sp"
android:textOn="開"
android:textOff="關"/>
<TextView
android:text="Now is Off"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
ToggleButton – Example
程式碼-1(ToggleButtonExample.java)：
public class ToggleButtonExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TextView textView01 =
(TextView)findViewById(R.id.TextView01);
final ToggleButton toggleButton01 = (ToggleButton)
findViewById(R.id.ToggleButton01);
toggleButton01.setOnClickListener(new OnClickListener()
{
public void onClick(View v) {
if (toggleButton01.isChecked()) {
textView01.setText("Now is ON");
} else {
textView01.setText("Now is OFF");
}
}
});
ToggleButton – Example
程式碼-2(ToggleButtonExample.java)：
final TextView textView02 =
(TextView)findViewById(R.id.TextView02);
final ToggleButton toggleButton02 = (ToggleButton)
findViewById(R.id.ToggleButton02);
toggleButton02.setOnClickListener(new
OnClickListener() {
public void onClick(View v) {
if (toggleButton02.isChecked()) {
textView02.setText("Now is ON");
} else {
textView02.setText("Now is OFF");
}
}
});
}
在toggleButton01以及toggleButton02設置onClick事件
處理並利用isCheck()來判斷toggleButton的開關狀態，
再依照狀態改變TextView01和TextView02的文字內容。
CheckBox
CheckBox只有兩種型態
– checked
– unchecked
CheckBox可用在勾選多項選擇時
CheckBox – Example
CheckBox – Example
布局文件-1(res/layout/main.xml)：
<TextView
android:text="你喜歡的顏色? (可複選)"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation=“horizontal”
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox
android:text="紅色"
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="黃色"
android:id="@+id/CheckBox02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="綠色"
android:id="@+id/CheckBox02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
CheckBox – Example
布局文件-2(res/layout/main.xml)：
<TextView
android:text="平常的休閒活動? (可複選)"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox
android:text="打球"
android:id="@+id/CheckBox04"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="游泳"
android:id="@+id/CheckBox05"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="上網"
android:id="@+id/CheckBox06"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
DatePicker
DatePicker可讓使用者選擇年、月、日
當使用者按下button後，TextView會顯示
DatePicker所選的日期。
DatePicker
布局文件-1(res/layout/main.xml)：
<?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">
<DatePicker
android:id="@+id/DatePicker01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15sp"/>
<Button
android:text="確定"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25sp"/>
<TextView
android:text=""
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35sp"/>
</LinearLayout>
DatePicker
程式碼(DatePickerExample.java)：
public class DatePickerExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final DatePicker datePicker = (DatePicker) findViewById(R.id.DatePicker01);
final Button myButton = (Button) findViewById(R.id.Button01);
final TextView textView = (TextView) findViewById(R.id.TextView01);
myButton.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
int year = datePicker.getYear();
int month = datePicker.getMonth() + 1;
int day = datePicker.getDayOfMonth();
textView.setText( year + "-" + month + "-" + day );
}
});
}
}
TimePicker
TimePicker可讓使用者選擇時間
– 預設可讓使用者選擇AM或是PM
TimePicker – Example
布局文件(res/layout/main.xml)：
<TimePicker
android:id="@+id/TimePicker01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15sp"/>
<Button
android:text="確定"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25sp"/>
<TextView
android:text=""
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35sp"
android:textSize="20sp"/>
TimePicker – Example
程式碼(TimePickerExample.java)：
public class TimePickerExample extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TimePicker timePicker = (TimePicker) findViewById(R.id.TimePicker01);
final Button myButton = (Button) findViewById(R.id.Button01);
final TextView textView = (TextView) findViewById(R.id.TextView01);
myButton.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
int hour = timePicker.getCurrentHour();
int minute = timePicker.getCurrentMinute();
textView.setText( hour + " : " + minute );
}
});
}
}
EditText
EditText可讓使用者輸入文字
– layout_width為wrap_content時，EditText的寬度
會隨著輸入的字而變寬
– 當為fill_parent時則會固定為parent的寬度
EditText – Example
ProgressBar
ProgressBar可用於顯示程式執行進度
ProgressBar 有上述四種型態
ProgressBar – Example例
布局文件(res/layout/main.xml)：
<ProgressBar
android:id="@+id/ProgressBar01"
android:layout_height=“wrap_content”
android:layout_width=“200px”
android:layout_gravity=“center_horizontal”
android:layout_marginTop=“20sp”
style=“?android:attr/progressBarStyleHorizontal” />
<ProgressBar
android:id=“@+id/ProgressBar02”
android:layout_height=“wrap_content”
android:layout_width=“wrap_content”
android:layout_gravity=“center_horizontal”
android:layout_marginTop=“20sp”
style=“?android:attr/progressBarStyleSmall” />
<ProgressBar
android:id=“@+id/ProgressBar03”
android:layout_height=“wrap_content”
android:layout_width=“wrap_content”
android:layout_gravity=“center_horizontal”
android:layout_marginTop=“20sp”
style=“?android:attr/progressBarStyle” />
<ProgressBar
android:id=“@+id/ProgressBar04”
android:layout_height=“wrap_content”
android:layout_width=“wrap_content”
android:layout_gravity=“center_horizontal”
android:layout_marginTop=“20sp”
style="?android:attr/progressBarStyleLarge" />
改變style即可變更ProgressBar的樣式
RatingBar
RatingBar可用來製作評分系統
– 使用者可碰觸RatingBar的星星來達到評分
• 若碰觸星星的右半部則會加分
• 碰觸左半部則會扣分
• 最多為五顆星，星星間隔為0.5顆星
RatingBar – Example
RatingBar – 範例
布局文件(res/layout/main.xml)：
<?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">
<RatingBar android:id="@+id/RatingBar01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3" />
<TextView
android:text=""
android:id="@+id/TextView01"
android:textSize="50sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<RatingBar android:id="@+id/RatingBar02"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text=""
android:id="@+id/TextView02"
android:textSize="50sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
RatingBar – Example
程式碼(RatingBarExample.java)：
public class RatingBarExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TextView textView01 = (TextView) findViewById(R.id.TextView01);
final TextView textView02 = (TextView) findViewById(R.id.TextView02);
final RatingBar ratingBar01 = (RatingBar) findViewById(R.id.RatingBar01);
ratingBar01.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
textView01.setText(Float.toString(ratingBar01.getRating()));
}});
final RatingBar ratingBar02 = (RatingBar) findViewById(R.id.RatingBar02);
ratingBar02.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){
public void onRatingChanged(RatingBar ratingBar, float rating,boolean fromUser) {
textView02.setText(Float.toString(ratingBar02.getRating()));
}});
}
}
對話視窗Component
AlertDialog
AlertDialog為警告對話視窗，像是離開程式
或是刪除檔案時會跳出的對話視窗元件
AlertDialog – Example
程式碼-1(AlertDialogExample.java)：
public class AlertDialogExample extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Button button01 = (Button) findViewById(R.id.Button01);
final Button button02 = (Button) findViewById(R.id.Button02);
button01.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
About();
}
});
button02.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
Leave();
}
});
}
private void About() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("關於")
.setMessage("這是 Alert Dialog")
.show();
}
AlertDialog – Example
程式碼-2(AlertDialogExample.java)：
private void Leave() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("確定要離開本程式嗎?")
.setPositiveButton("Yes", new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
AlertDialogExample.this.finish();
}
})
.setNegativeButton("No", new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
dialog.cancel();
}
});
AlertDialog about_dialog = builder.create();
about_dialog.show();
}
}
AlertDialog.Builder - 屬性
 create()
– 創建一個AlertDialog
 setCancelable(boolean)
– 設為false時，使用者無法使用其他方式關閉這個對
話視窗，只可使用對話視窗上給的操作方式來操作
 setIcon(Drawable or int)
– 設置Title上的Icon
 setTitle(CharSequence or int)
– 設定要顯示的Title
AlertDialog.Builder - 屬性
 setMessage(CharSequence or int)
– 設定要顯示的內容
 setPositiveButton(CharSequence text,
DialogInterface.OnClickListener listener)
– 設定正向(左邊)的按鈕
 setNegativeButton(CharSequence text,
DialogInterface.OnClickListener listener)
– 設定反向(右邊)的按鈕
 show()
– 顯示AlertDialog
ProgressDialog
ProgressDialog可用於在等待其他程式或是
在等待上傳時使用
ProgressDialog有兩種形式
– 圓型 ProgressDialog
– 長條型 ProgressDialog
ProgressDialog – Example 1
圓形的 ProgressDialog
ProgressDialog – Example 1
程式碼(AlertDialogExample01.java)：
public class ProgressDialogExample extends Activity {
int nowProgressStatus = 0;
Handler myHandler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ProgressDialog dialog01 = ProgressDialog.show(this, "", "程式正在開啟
中...", false);
Thread thread01 = new Thread(new Runnable() {
public void run() {
while (nowProgressStatus < 100) {
try {
Thread.sleep(500);
}
catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
nowProgressStatus+=5;
} // While
myHandler.post(new Runnable() {
public void run() {
dialog01.cancel();
}
});
}
});
thread01.start();
}
}
圓形的ProgressDialog
ProgressDialog – Example 2
長條型 ProgressDialog
ProgressDialog – Example 2
程式碼(AlertDialogExample02.java)：
public class ProgressDialogExample02 extends Activity {
int nowProgressStatus = 0;
Handler myHandler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ProgressDialog dialog02 = new ProgressDialog(this);
dialog02.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
dialog02.setMessage("讀取中...");
dialog02.show();
Thread thread02 = new Thread(new Runnable() {
public void run() {
while (nowProgressStatus < 100) {
try {
Thread.sleep(500); }
catch (InterruptedException e) {
e.printStackTrace(); }
nowProgressStatus+=5;
myHandler.post(new Runnable() {
public void run() {
dialog02.setProgress(nowProgressStatus); }
});
} // While
myHandler.post(new Runnable() {
public void run() {
dialog02.cancel();
}});
}});
thread02.start();
}
}
DatePickerDialog
DatePickerDialog除了選擇日期外，在預設
的對話視窗上會顯示目前挑選的日期以及
星期幾的資訊。
DatePickerDialog – Example
程式碼(DatePickerDialogExample.java)：
public class DatePickerDialogExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
DatePickerDialog dpd = new DatePickerDialog(this,myOnDateSetListener,2009, 10, 05);
dpd.show();
}
private DatePickerDialog.OnDateSetListener myOnDateSetListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
// TODO Auto-generated method stub
}
};
}
DatePickerDialog – 屬性
DatePickerDialog有兩種建構種類：
– public DatePickerDialog (Context context,
DatePickerDialog.OnDateSetListener callBack, int
year, int monthOfYear, int dayOfMonth)
– public DatePickerDialog (Context context, int
theme, DatePickerDialog.OnDateSetListener
callBack, int year, int monthOfYear, int
dayOfMonth)
TimePickerDialog
TimePickerDialog選擇時間外，預設在對話
視窗會顯示所選的時間。
TimePickerDialog – Example
程式碼(TimePickerDialogExample.java)：
public class TimePickerDialogExample extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TimePickerDialog tpd = new TimePickerDialog(this,
myTimeSetListener, 12, 25, false);
tpd.show();
}
private TimePickerDialog.OnTimeSetListener myTimeSetListener =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
// TODO Auto-generated method stub
}
};
}
TimePickerDialog – 屬性
TimePickerDialog有兩種建構種類：
– public TimePickerDialog (Context context,
TimePickerDialog.OnTimeSetListener callBack,
int hourOfDay, int minute, boolean is24HourView)
– public TimePickerDialog (Context context, int
theme, TimePickerDialog.OnTimeSetListener
callBack, int hourOfDay, int minute, boolean
is24HourView)
Menu Component
Options Menu
Options Menu就是透過按手機或模擬器上的
menu鍵顯示的功能表
– 最多可以顯示六項，稱為Icon Menu
– 超過六項就會以More的功能項來表示其餘的選
項，稱為Expanded Menu。
Options Menu – Example 1
此種型式的Menu就稱為OptionsMenu
Options Menu – Example 1
程式碼-1(OptionsMenuEX.java)：
public class OptionsMenu extends Activity
{
public static final int aboutBtnID = Menu.FIRST;
public static final int exitBtnID = Menu.FIRST + 1;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public boolean onCreateOptionsMenu(Menu menu)
{
menu.add(0, aboutBtnID, 0, "About");
menu.add(0, exitBtnID, 0, "Exit");
return true;
}
Options Menu – Example 1
程式碼-2(OptionsMenuEX.java)：
public boolean onOptionsItemSelected(MenuItem item) {
super.onOptionsItemSelected(item);
switch( item.getItemId() ) {
case aboutBtnID:
openDialog();
break;
case exitBtnID:
finish();
break;
}
return true;
}
public void openDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("About OptionsMenu");
builder.setTitle("About");
builder.setPositiveButton("OK",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
}).show();
}
}
Options Menu – Example 2
Options Menu – Example 2
程式碼-1(OptionsMenuEX.java)：
public class OptionsMenu2 extends Activity
{
public static final int aboutBtnID = Menu.FIRST;
public static final int exitBtnID = Menu.FIRST + 1;
public static final int searchBtnID = Menu.FIRST + 2;
public static final int addBtnID = Menu.FIRST + 3;
public static final int playBtnID= Menu.FIRST + 4;
public static final int delBtnID = Menu.FIRST + 5;
public static final int openBtnID = Menu.FIRST + 6;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public boolean onCreateOptionsMenu(Menu menu)
{
menu.add(0, aboutBtnID, 0, "About");
menu.add(0, exitBtnID, 0, "Exit");
menu.add(0, searchBtnID, 0, "Search");
menu.add(0, addBtnID, 0, "Add");
menu.add(0, playBtnID, 0, "Play");
menu.add(0, delBtnID, 0, "Delete");
menu.add(0, openBtnID, 0, "Open");
return true;
}
Options Menu – Example 2
程式碼-2(OptionsMenuEX2.java)：
public boolean onOptionsItemSelected(MenuItem item)
{
super.onOptionsItemSelected(item);
switch( item.getItemId() )
{
case aboutBtnID:
openDialog();
break;
case exitBtnID:
finish();
break;
}
return true;
}
public void openDialog()
{
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("About OptionsMenu");
builder.setTitle("About");
builder.setPositiveButton(“OK”, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
}).show();
}
}
Options Menu – 範例三
在功能表中增加圖示
Options Menu – Example 3
程式碼(OptionsMenuEX.java)：
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(0, aboutBtnID, 0, "About").setIcon(R.drawable.icon);
menu.add(0, exitBtnID, 0, "Exit").setIcon(R.drawable.icon);
return true;
}
透過setIcon()方法在功能表中增加圖示
Context Menu
Android中的Context Menu與一般個人電腦
中的滑鼠右鍵非常類似
– 當在View上，使用者長按螢幕不放兩秒，將會
出現一個浮動功能表
– Context Menu不支援圖示或快捷鍵
Context Menu – Example
Context Menu – Example
程式碼(ContextMenuEX.java)：
public class ContextMenu extends Activity {
public String checkedItem = "";
public static final int newBtnID = Menu.FIRST;
public static final int openBtnID = Menu.FIRST + 1;
public static final int closeBtnID = Menu.FIRST + 2;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button fileBtn = (Button)findViewById(R.id.fileBtn);
Button editBtn = (Button)findViewById(R.id.editBtn);
registerForContextMenu(fileBtn);
registerForContextMenu(editBtn);
}
public void onCreateContextMenu(android.view.ContextMenu conMenu, View v, ContextMenuInfo menuInfo) {
super.onCreateContextMenu(conMenu, v, menuInfo);
conMenu.setHeaderTitle("Context Menu");
conMenu.add(0, newBtnID, 0, "New").setNumericShortcut('1');
conMenu.add(0, openBtnID, 0, "Open").setCheckable(true);
conMenu.add(0, closeBtnID, 0, "Close").setIcon(R.drawable.icon);
}
public boolean onContextItemSelected(MenuItem item)
{
super.onContextItemSelected(item);
return false;
}
}
Sub Menu
一個子功能表可以被加入任何功能表中，
但不能加入另外的子功能表中。
當應用程式有很多功能可以被分類時，會
非常好用，就像是一般電腦的功能表。
Sub Menu – Example
Sub Menu – Example
程式碼-1(SubMenuEX.java)：
public class SubMenus extends Activity
{
public String checkedItem = "";
public static final int newBtnID = Menu.FIRST;
public static final int openBtnID = Menu.FIRST + 1;
public static final int closeBtnID = Menu.FIRST + 2;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button fileBtn = (Button)findViewById(R.id.fileBtn);
Button editBtn = (Button)findViewById(R.id.editBtn);
registerForContextMenu(fileBtn);
registerForContextMenu(editBtn);
}
Sub Menu – Example
程式碼-2(SubMenuEX.java)：
public void onCreateContextMenu(android.view.ContextMenu conMenu, View v, ContextMenuInfo menuInfo)
{
super.onCreateContextMenu(conMenu, v, menuInfo);
/*
conMenu.setHeaderTitle("Context Menu");
conMenu.add(0, newBtnID, 0, "New").setNumericShortcut('1'); //利用數字選擇
conMenu.add(0, openBtnID, 0, "Open").setCheckable(true); //設定checkbox
conMenu.add(0, closeBtnID, 0, "Close").setIcon(R.drawable.icon); //ContextMenu不支援icon*/
SubMenu sub = conMenu.addSubMenu("Submenu");
sub.add("Add...");
sub.add("Delete...");
}
public boolean onContextItemSelected(MenuItem item)
{
super.onContextItemSelected(item);
return false;
}
}
Spinner
Spinner是一個widget，允許使用者從一群選
項中選出其中一個。
Spinner就類似下拉式選單，當列表超過螢
幕大小時也可允許捲動。
Spinner – Example
Spinner – Example
布局文件-1(res/layout/main.xml)：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="Please select a planet:"
/>
首先我們將main.xml改寫成下列範例中
<Spinner
的程式碼
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:prompt="@string/planet_prompt"
/>
</LinearLayout>
Spinner – 範例
布局文件(res/value/strings.xml)：
<string name="planet_prompt">Choose a item</string>
布局文件(res/value/arrays.xml)：
其中我們新增了Spinner的標籤，接著新
增這段程式碼至strings.xml中。
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<string-array name=“cards">
<item>VISA</item>
<item>MasterCard</item>
接著在res/value/中建立一下名為
<item>JBC</item>
arrays.xml的文件，arrays.xml程式碼如下
<item>HSBC</item>
<item>CitiBank</item>
<item>SD</item>
</string-array>
</resources>
Spinner – Example
程式碼-1(SpinnerEX.java)：
package ncu.bnlab.SpinnerExample;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
最後將Spinner的JAVA原始檔開啟，
在onCreate()中加入程式碼。
public class SpinnerEX extends Activity
{
/** Called when the activity is first created. */
@SuppressWarnings("unchecked")
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Spinner s = (Spinner)findViewById(R.id.spinner);
Spinner – Example
程式碼-2(SpinnerEX.java)：
/* 設定功能表項目陣列，使用createFromResource方法 */
ArrayAdapter adapter = ArrayAdapter.createFromResource(
this, R.array.cards, android.R.layout.simple_spinner_item);
/* 設定選單 */
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
/* 設定Adapter */
s.setAdapter(adapter);
}
}
Notifying Component
Toast Notification
消息條通知是一個在視窗彈出的訊息，它
只顯示內容所需的空間且使用者當前活動
仍然保持可見和可互動。
這個通知自動淡入淡出，且不接受互動事
件，因為消息條可以從一個後台服務
Service中建立，即便應用程式不可見，它
也將呈現出來。
Toast Notification
一個消息條是用來顯示簡短文字訊息的好
方法，例如說「檔案已儲存」，當使用者
正在注意螢幕時，這種方式就可以提醒使
用者動作已完成。
一個消息條不能接受使用者互動事件；如
果希望使用者回答並採取對應動作，可以
考慮使用一個狀態條通知Status Bar
Notification，在下一小節將會介紹。
Toast Notification
首先，Toast物件有一個maketext的方法，這
個方法帶有三個參數：
– 應用程式內容
– 文字訊息
– 顯示時間長短
接著它會回傳一個初始化的Toast物件，在
程式中可以使用show()方法來顯示。
Toast Notification
一般標準的Toast預設位置是靠底下偏中間，
可以透過setGravity(int, int, int)方法改變，
在下面的範例中程式設定讓Toast物件靠左
上角顯示。
如果要讓Toast物件往右移動，增加第二個
參數(x-postion)的數值。
如果要讓Toast物件往下移動，增加第三個
參數(y-postion)的數值。
Toast Notification – Example
Toast Notification – Example
程式碼(ToastNotificationEX.java)：
public class ToastNotification extends Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/* 第一種makeText用法 */
Context context1 = getApplicationContext();
CharSequence text1 = "Short Toast";
int duration1 = Toast.LENGTH_SHORT; // 設定停留長短
Toast toast = Toast.makeText(context1, text1, duration1);
toast.setGravity(Gravity.TOP | Gravity.LEFT, 0, 0); //設定Toast物件位置
toast.show();
/* 第二種makeText用法 */
Context context2 = getApplicationContext();
CharSequence text2 = "Long Toast";
int duration2 = Toast.LENGTH_LONG; // 設定停留長短
Toast.makeText(context2, text2, duration2).show();
}
}
Status Bar Notification
一個狀態條通知會增加一個圖示到
– 系統狀態列上
– 一個可選的滾動訊息
– 在這個「通知」視窗中的一個擴展消息。
當使用者選擇這個擴展消息時，Android發
出這個通知所定義的一個Intent（通常是啟
動一個活動）。
也可配置這個通知使用聲音、震動和設備
上的閃燈來警告用戶。
Status Bar Notification
當應用程式是以後台服務運行且需要通知
使用者事件時，這類通知是一種理想的方
式。
如果需要在活動仍處於焦點下時警告使用
者一個發生的事件，可以使用對話框通知
Dialog Notification。
Status Bar Notification
一個活動或服務可以起始一個狀態條通知，
然而活動只有在啟動狀態及處於焦點狀態
時才可以完成這個動作。
所以當使用者在使用其他應用程式或設備
處於休眠狀態時，服務可以在背景中建立
狀態條通知。
Status Bar Notification
一個活動或服務可以起始一個狀態條通知，
然而活動只有在啟動狀態及處於焦點狀態
時才可以完成這個動作。
所以當使用者在使用其他應用程式或設備
處於休眠狀態時，服務可以在背景中建立
狀態條通知。
Status Bar Notification – Example
Status Bar Notification – Example
程式碼(StatusBarNotificationEX.java)：
public class StatusBarNotification extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
String ns = Context.NOTIFICATION_SERVICE;
NotificationManager mNotificationManager = (NotificationManager) getSystemService(ns);
int icon = R.drawable.icon;
// 通知圖示
CharSequence tickerText = "Hello!!!";
// ticker-text
long when = System.currentTimeMillis();
// 通知時間
Context context = getApplicationContext();
// 應用程式內容
CharSequence contentTitle = "這是訊息標題";
// 訊息標題
CharSequence contentText = "這是訊息內文";
// 訊息內文
Intent notificationIntent = new Intent(this, StatusBarNotification.class);
PendingIntent contentIntent = PendingIntent.getActivity(this, 0, notificationIntent, 0);
Notification notification = new Notification(icon, tickerText, when);
notification.setLatestEventInfo(context, contentTitle, contentText, contentIntent);
final int HELLO_ID = 1;
mNotificationManager.notify(HELLO_ID, notification); // 傳送通知
}
}
Dialog Notification
一個對話框通知一般是出現在當前活動前
面的一個視窗。
背後的活動遺失焦點而由此對話框接受所
有的使用者互動。
對話框通常用於和運行中應用程式直接相
關的通知和短暫活動。
Dialog Notification
應該使用對話框來顯示一個進度條或者一
個需要使用者確認的訊息
例如說帶有「確認」和「取消」按鈕的警
告。
也可將對話框作為構成應用程式界面整體
的元件以及用於除了通知之外的其它目的。
Display Component
ImageView
用於顯示一個圖樣，例如說一個圖示或圖
片。
ImageView類別可以載入來自不同來源的圖
片(可能來自資源或內容提供商)，它可以用
於任何佈局管理器，並提供多種顯示選項，
例如：縮放、著色。
ImageView - 屬性功能介紹
android:adjustViewBounds <->
setAdjustViewBounds(boolean)
– 如果要讓ImageView根據drawable資源大小去調
整邊界，必須將此值設為true
android:cropToPadding
– 如果為真，此圖片將被裁剪成適合的大小
android:maxHeight <-> setMaxHeight(int)
– 設定最大高度
ImageView - 屬性功能介紹
 android:maxWidth <-> setMaxWidth(int)
– 設定最大寬度
 android:scaleType <->
setScaleType(ImageView.ScaleType)
– 控制圖片如何縮放或移動且配合ImageView的大小
 android:src <-> setImageResource(int)
– 為此ImageView內容設定資源圖檔
 android:tint <->
setColorFilter(int,PorterDuff.Mode)
– 設定著色的過濾器
ImageView – Example
ImageView – Example
程式碼-1(ImageViewEX.java)：
public class ImageViewEX extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.christmas);
setContentView(imageView);
}
}
將drawable中的圖檔資源置入imageView
的圖片來源。
ListView
Android 除了提供CheckBox與RadioButton的
物件之外，還提供另一種更為方便且表現
多樣化的物件 – ListView
ListView – Example
ListView – 範例一程式碼
程式碼-1(ListViewEX.java)：
public class ListViewEX extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
String[] Data = {"網路概論","通訊網路實驗","通訊概論"};
ListView listView = new ListView(this);
// 設定ListView選擇的方式 :
// 單選：ListView.CHOICE_MODE_SINGLE
// 多選：ListView.CHOICE_MODE_MULTIPLE
listView.setChoiceMode( ListView.CHOICE_MODE_SINGLE );
ArrayAdapter vArrayData = new ArrayAdapter(
this
, android.R.layout.simple_list_item_single_choice
, Data
);
// 設定ListView的接收器，做為選項的來源
listView.setAdapter( vArrayData );
// ListView 設定為 ContentView
setContentView(listView);
}
}
ListView – Example 2 程式碼
程式碼-2(ListViewEX.java)：
public class ListViewEX2 extends ListActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
String[] Data = { "葷食","素食","兩者皆可" };
ListView listView = this.getListView();
listView.setChoiceMode( ListView.CHOICE_MODE_SINGLE );
// ListView 的選項來源由陣列提供
this.setListAdapter( new ArrayAdapter( this
, android.R.layout.simple_list_item_single_choice
, Data
));
}
}
GridView
GridView可以顯示一個二維滾動格框，也可
搭配其他元件，呈現類似一般手機上的功
能表。
GridView – Example
GridView – 範例
GridView程式碼-1(GridViewEX.java)：
public class GridViewEX extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
}
}
GridView – Example
ImageAdapter程式碼-1(ImageAdapter.java)：
public class ImageAdapter extends BaseAdapter
{
private Context mContext;
public ImageAdapter(Context c)
{
mContext = c;
}
public int getCount()
{
return mThumbIds.length;
}
public Object getItem(int position)
{
return null;
}
public long getItemId(int position)
{
return 0;
}
GridView – Example
ImageAdapter程式碼-2(ImageAdapter.java)：
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
private Integer[] mThumbIds =
{
R.drawable.icon, R.drawable.christmas,
R.drawable.favorite, R.drawable.ipod
};
}
SurfaceView
依照傳統的作法，要快速更新畫面，如果
做遊戲之類的應用
– 通常會新增執行緒處理工作後，使用handler傳
送訊息給View顯示畫面
– 或在非使用者執行緒呼叫View。
做法就是透過SurfaceView的getHolder()取得
SurfaceHolder，然後對SurfaceHolder的
Canvas畫圖。
SurfaceView – Example
SurfaceView – Example
程式碼-1(SurfaceViewEX.java)：
public class SurfaceViewEX extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
//內部類別
class MyView extends SurfaceView implements SurfaceHolder.Callback
{
SurfaceHolder holder;
public MyView(Context context)
{
super(context);
holder = this.getHolder();//獲取Holder
holder.addCallback(this);
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height)
{
}
SurfaceView – Example
程式碼-2(SurfaceViewEX.java)：
@Override
public void surfaceCreated(SurfaceHolder holder)
{
new Thread(new MyThread()).start();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder)
{
}
//執行緒
class MyThread implements Runnable
{
@Override
public void run()
{
Canvas canvas = holder.lockCanvas(null);//獲得畫布
Paint mPaint = new Paint();
mPaint.setColor(Color.BLUE);
canvas.drawRect(new RectF(40,60,80,80), mPaint);
holder.unlockCanvasAndPost(canvas);//解鎖畫布並更新顯示
}
}
}
}
WebView
Webview是用於顯示web頁面的視景。
在活動中的任何一個瀏覽器或簡易地顯示
一些線上內容。
它使用Webkit繪圖引擎去顯示頁面且包含
– 上一頁
– 下一頁
– 放大縮小
– 文字搜尋…等等方法
WebView – Example
WebView – Example
<uses-permission android:name="android.permission.INTERNET" />
為了使活動可以在WebView存取Internet及讀取web頁面，
需在AndroidManifest.xml中加入INTERNET權限
布局文件(res/layout/main.xml)：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
修改main.xml中的布局方
式
WebView – Example
程式碼(WebViewEX.java)：
public class WebViewEX extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webview;
webview = (WebView) findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("http://www.google.com");
}
此處以Google網站作為連接範例
}
MapView
可在活動中顯示Google Map地圖畫面，並
可於地圖上進行標示動作，與一般在瀏覽
器上操作類似。
在此範例中需使用到Google Map API金鑰，
此部分將於後面章節作詳細介紹。
MapView – Example
MapView – Example
<uses-library android:name="com.google.android.maps" />
首先必須在AndroidManifest.xml中的
<application>標籤內加入Google Map API
<uses-permission android:name="android.permission.INTERNET" />
接著在AndroidManifest.xml中的
<manifest>標籤內加入存取網路的權限
MapView – Example
布局文件(res/layout/main.xml)：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<view class = "com.google.android.maps.MapView"
android:id="@+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey=“你的apiKey"
/>
</LinearLayout>
其中android:apiKey需要去Google網站申請。
MapView – Example
程式碼(MapViewEX.java)：
public class MapViewEX extends MapActivity
{
/** Called when the activity is first created. */
@Override
protected boolean isRouteDisplayed()
{
return false;
}
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MapView mv = (MapView) findViewById(R.id.mapview);
MapController controller = (MapController)mv.getController();
GeoPoint p = new GeoPoint((int) (25 * 1000000),(int)(121.5 * 1000000));
controller.animateTo(p);
controller.setZoom(15);
}
}
Customized Component
Customized Component
介紹完Android所提供的各類元件後，其實
Android本身也可以自行製作客製化元件來
用，像是Button、TextView、 EditText、
ListView、CheckBox、RadioButton
與一些其他有特殊用途的
AutoCompleteTextView、ImageSwitcher和
TextSwitcher…等等搭配Layout組成新元件。
Customized Component
如果只是需要改變某個元件的小部分，那
就可以直接覆寫元件中的方法即可。
完全客製化元件的方法可以建立一些用於
顯示的圖形元件，也許一個像電壓的圖形
計量器，或者是卡拉OK中的波紋隨著音樂
滾動。
Customized Component
 在Android中，可以用自訂的要求輕鬆地建立客製化元
件，下面將簡單介紹如何創造客製化元件：
– 最為通用的毫無疑問是View類別，因此，最開始要建立一個
基於此類別的一個子類別。
– 寫一個函數從XML文件中取得屬性和參數，當然也可以自
行定義這些屬性和參數。
– 可能有必要撰寫本身的事件監聽器、修改函數和一些元件本
身功能上的程式碼。
– 如果希望元件能夠顯示什麼東西，可能會重
載 onMeasure() 函數。當兩個函數都用預設的，那
onDraw() 函數將不會做任何事情，並且預設
的 onMeasure() 函數會自動的設定一個100x100的尺寸，這個
尺寸可能非我們所要的。
– 其他有必要重載的on...開頭 系列函數都需要重新撰寫一次。
Customized Component
onDraw()函數將會傳送一個 Canvas 對象，
透過它即可在2D圖形上做任何事情，包含
其他的一些標準和通用的元件、格式化本
文，任何可以想到的東西都可以透過它呈
現。
但此不包含3D圖形，如果想使用3D圖形，
應該把父類別由View改為SurfaceView類，
並使用獨立的執行緒。
Customized Component
onMeasure() 函數較為複雜一些，因為這個
函數是呈現元件和容器互動的關鍵部分，
onMeasure()應該重載，讓它能夠有效且準
確的表現它所包含部分的測量值。
一旦測量寬度和高度出來後，就要立即呼
叫setMeasuredDimension() 方法。
Customized Component
 整體來說，執行onMeasure()函數分為以下幾個
步驟：
– 重載的onMeasure()方法會被呼叫，高度和寬度參數
同時也會牽涉到(widthMeasureSpec 和
heighMeasureSpec兩個參數都是整數類型)，同時還
要考慮產品螢幕的尺寸限制。
– 元件要透過onMeasure()計算得到必要的測量長度和
寬度，用來顯示元件。另外它可以實現一些規格以
外的功能，像是滑動、捲動、裁切…等等。
– 一旦高度和寬度計算出來之後，必須呼叫
setMeasuredDimension(int width, int height)，否則就
會導致系統異常。
After-Class Exercise
1. 在<LinearLayout>中有兩種方向，請問要更改Layout方
向的屬性為何？
2. 請問<RelativeLayout>的佈局概念為何？試舉例說明。
3. 試說明<TableLayout>和<TableRow>之間的關係。
4. 如何讓<TextView>中的文字有自動連結的功能？
5. 如何讓某個RadioButton為預設勾選項目？
6. ProgressBar有幾種樣式？若要更改樣式要如何修改？
After-Class Exercise
7.
Options Menu最多可顯示幾個項目，若超過上限會如何？
8.
ContextMenu是否可支援圖示或快捷鍵?
9.
Toast可否更改顯示時間之間隔？需如何修改？
10. StatusBarNotification如欲通知使用者需在程式中呼叫哪個方法？
11. ListView如何設定單選或多選？
12. 若要實現手機上之程式選單，可使用本章中何種元件？
13. 如需在手機上使用MapView，需在AndroidManifest.xml加入哪項指令？