Microsoft PowerPoint - 08_Android_Spring11_Control2.pptx

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Microsoft PowerPoint - 08_Android_Spring11_Control2.pptx"

Transcription

1 作者 : 李昭賢作者 : 洪振偉編撰整理者 : 陳彥霖

2 學習目標 1. 透過 XML 產生控制項 2. 透過 Java 產生控制項 3. 新增事件 (Event) 處理

3 AnalogClock / DigitalClock 負責顯示時間 AnalogClock: 以傳統鐘錶指針方式顯示時與分 DigitalClock: 以數位數字方式顯示時 分與秒 類比小時鐘 (AnalogClock 類別 ) 數位小時鐘 (DigitalClock 類別 )

4 AnalogClock / DigitalClock AnalogClock 與 DigitalClock 僅負責顯示時間, 若在程式碼內需要取得時間, 則直接取得系統時間, 並透過 Calendar 物件轉換出時間細節資訊 // 取得系統時間 time long time = System.currentTimeMillis(); // 建立日曆 mcalendar Calendar mcalendar = Calendar.getInstance(); mcalendar.settimeinmillis(time); // 讀到當時的時 / 分 int mhour = mcalendar.get(calendar.hour); int mminutes = mcalendar.get(calendar.minute);

5 Chronometer 用來計時之用 MM:SS H:MM:SS 透過 start() 可自動開始計時, 同時顯示當下的計時數值 透過 stop() 可停止計時

6 Chronometer 配合 Button 控制開始或停止計時 // 按下 Button01 按鈕時,Button01 被設計成交替切換按鈕, 可以開始計時或停止計時 button = (Button)findViewById(R.id.Button01); button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { if (button.gettext().equals("start")) { chronometer.start(); button.settext("stop"); else { chronometer.stop(); button.settext("start"); );

7 DatePicker/TimePicker DatePicker 可用來選擇日期 ( 年 月 日 ) TimePicker 可用來選擇時間 ( 時 分 )

8 DatePicker/TimePicker 可透過 getxxx() 取得相關資訊 final DatePicker datepicker = (DatePicker) findviewbyid(r.id.datepicker01); int year = datepicker.getyear(); int month = datepicker.getmonth() + 1; int day = datepicker.getdayofmonth(); final TimePicker timepicker = (TimePicker) findviewbyid(r.id.timepicker01); int hour = timepicker.getcurrenthour(); int minute = timepicker.getcurrentminute();

9 RatingBar / SeekBar 用圖形來設定數值大小的控制項 RatingBar SeekBar

10 RatingBar / SeekBar 可分別接受 RatingBar 與 SeekBar 數值改變的事件 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())); ); SeekBar mseekbar01 = (SeekBar) findviewbyid(r.id.seekbar01); mseekbar01.setonseekbarchangelistener(new OnSeekBarChangeListener() { public void onprogresschanged(seekbar mseekbar, int progress, boolean fromtouch) { mtextview02.settext(" 用 Seek Bar 表示 :" + mseekbar01.getprogress()); );

11 ProgressBar ProgressBar 採用圖形表示正在處理中 長條狀圖形 不斷繞圈圈的圓形圖 是否可視 visible invisible gone 說明可視的, 設定初值不可視的, 但顯示組件仍然存在顯示組件已不存在

12 ProgressBar ProgrssBar 內容常透過額外的 Thread 更新 // 建立一個 Thread 來 Run Thread thread = new Thread() public void run() { try { for (int i = 0; i < progressbar.getmax() / 10; i++) { for (int j = 0; j < progressbar.getmax(); j++) { Thread.sleep(20); handler.post(callback1); handler.post(callback2); handler.post(callback3); catch (InterruptedException e) { e.printstacktrace(); ; thread.start();

13 ProgressBar // 設定 Handler 類別 final Handler handler = new Handler(); // 次要進度顯示處理程式 - callback1 final Runnable callback1 = new Runnable() { public void run() { progressbar.incrementsecondaryprogressby(1); setsecondaryprogress(100 * progressbar.getsecondaryprogress()); ; // 主要進度顯示處理程式 - callback2 final Runnable callback2 = new Runnable() { public void run() { progressbar.incrementprogressby(10); setprogress(100 * progressbar.getprogress()); progressbar.incrementsecondaryprogressby(-100); setsecondaryprogress(100 * progressbar.getsecondaryprogress()); ;

14 ProgressBar // 顯示圖形處理程式 - callback3 final Runnable callback3 = new Runnable() { public void run() { TextView textview = (TextView)findViewById(R.id.TextView01); textview.setvisibility(view.gone); progressbar.setvisibility(view.gone); ImageView imageview = (ImageView)findViewById(R.id.ImageView01); imageview.setimageresource(r.drawable.sakura01); imageview.setvisibility(view.visible); ;

15 警示互動對話盒 Android 提供五種類型的對話盒, 用來提供警示, 或與人互動之用 PopupWindow Dialog AlertDialog ProgressDialog Toast

16 PopupWindow 可設定的屬性較多, 如 : 視窗的長和寬 視窗出現的座標 等 PopupWindow popupwindow = new PopupWindow(PopupActivity.this); popupwindow.setcontentview(button); popupwindow.setfocusable(true); popupwindow.setwidth(200); popupwindow.setheight(100); popupwindow.showatlocation(view, Gravity.CENTER, 0, 0); // 按下對話視窗關閉 PopupWindow 視窗 button.setonclicklistener(new OnClickListener() { public void onclick(view v) { popupwindow.dismiss(); );

17 Dialog 最基本的對話盒類型, 可設定標題 訊息與按鈕, 按下按鈕就會關閉對話盒 Dialog dialog = new Dialog(PopupActivity.this); dialog.settitle(" 這裡可以用來顯示 Dialog 信息!"); dialog.setcontentview(button); dialog.show(); // 按下對話視窗上的按鈕來關閉 Dialog 視窗 button.setonclicklistener(new OnClickListener() { public void onclick(view v) { dialog.dismiss(); );

18 AlertDialog with buttons 專門用來警示的對話盒, 預設沒有按鈕可關閉視窗, 除非利用 AlertDialog.Builder 類別產生對話盒, 可透過 setpositivebutton() 或 setnegativebutton() 加上按鈕 AlertDialog.Builder builder = new AlertDialog.Builder(PopupActivity.this); builder.settitle("alertdialog"); builder.setmessage(" 這裡可以用來顯示 Alert 信息, 要按 [ 回上頁 ] 鍵才會關閉 "); builder.setpositivebutton( OK, new DialogInterface.OnClickListener(){ public void onclick(dialoginterface dialoginterface, int i) { dialoginterface.dismiss(); ); builder.show();

19 AlertDialog with buttons PositiveButton 配置於對話框左邊, 用於提示使用者有關 正確 或者 是 的選項 NeutralButton 配置於對話框中間 NegativeButton 配置於對話框右邊, 用於提示使用者有關 錯誤 否定 或者 否 的選項 Positive/Neutral/Negative 並不絕對用於字面意義, 可視為三個 一般 但是位置固定的按鈕

20 AlertDialog with buttons

21 ProgressDialog 除了產生 ProgressDialog 外, 類似 ProgressBar 必須產生額外的 thread 負責改變進度資料, 結束後連帶關閉對話盒 ProgressDialog progressdialog = ProgressDialog.show(PopupActivity.this, " 處理中...", " 請等一會, 處理完畢會自動結束...");

22 Toast 產生的對話盒, 會出現一段時間後自動消失 maketext() 可設定 " 產生的應用程式 " " 文字訊息 " " 顯示時間長短 " show() 顯示於視窗上 Toast.makeText(PopupActivity.this, 可以用來顯示 Toast 信息, 短時間後自動關閉 ", Toast.LENGTH_SHORT).show();

23 GridView 採用網格選單方式來展示 照片 同時也可以設定網 格選單選項時的監聽功能 程式 Google Android 2.X應用程式開發實戰 碁峰出版

24 GridView 類似 AutoComplteTextView 需要搭配 StringArray, GridView 必須搭配產生繼承 BaseAdapter 的物件用來儲存圖片 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.grid_activity); GridView gridview = (GridView)findViewById(R.id.GridView01); gridview.setadapter(new ImageAdapter(this)); gridview.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View v, int position, long id) { Toast.makeText(GridActivity.this, "" + position, Toast.LENGTH_SHORT).show(); );

25 GridView // 建構 ImageAdapter 類別程式 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;

26 GridView // 建立一個 imageview 來安置每一個圖像, 並提供給 Adapter public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { // if it's not recycled, initialize some attributes 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;

27 GridView // 設定圖像檔案陣列 private Integer[] mthumbids = { R.drawable.sakura01s, R.drawable.sakura02s, R.drawable.sakura03s, R.drawable.sakura04s, R.drawable.sakura05s, R.drawable.sakura06s, R.drawable.sakura07s, R.drawable.sakura08s, R.drawable.sakura09s, R.drawable.sakura10s, R.drawable.sakura11s, R.drawable.sakura12s, R.drawable.sakura02s, R.drawable.sakura04s, R.drawable.sakura06s, R.drawable.sakura08s, R.drawable.sakura10s, R.drawable.sakura12s, R.drawable.icon, R.drawable.icon, R.drawable.icon ; public View getview1(int arg0, View arg1, ViewGroup arg2) { // TODO Auto-generated method stub return null;

28 Gallery 依序排列成一橫列展示圖片 用法類似GridView 必須繼 承BaseAdapter產生負責儲存 圖片的物件 Google Android 2.X應用程式開發實戰 碁峰出版

29 VideoView 播放影像時利用 VideoView 的方法可以設定影像檔案所在路徑和放在媒體控制器 (Media Controller) 容器上, 可以播放 (Play) 暫停 (Pause) 向前 (Fore Forward) 和向後 (Back Forward)

30 VideoView Android 內建僅支援部分影像檔案, 如 :H.263(*.3gp or *.mp4) H.264 AVC (*.3gp or *.mp4) MPEG-4 SP(*.3gp) VP8(*.webm) 等 VideoView videoview = (VideoView)findViewById(R.id.VideoView01); videoview.setvideopath("/data/sample.3gp"); videoview.setmediacontroller(new MediaController(this));

31 總結 了解各個控制項使用的方式與功能 時間控制項 AnalogClock DigitalClock Chronometer DatePicker TimePicker 進度控制項 RatingBar SeekBar ProgressBar 對話盒視窗控制項 PopupWindow Dialog AlertDialog ProgressDialog Toast 其他 GridView Gallery VideoView