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加入哪項指令?