Download presentation
Presentation is loading. Please wait.
1
其他視窗
2
選單
3
選項選單(Option Menu) 其他選項 Android 3.0之前 1 4 2 3
選項選單為Android內建的選單,Android 3.0之前都會提供menu硬體按鈕 3 其他選項 Android 3.0之前
4
選項選單(Option Menu) Android 3.0之前都會提供menu硬體按鈕,但3.0後不一定會提供,選單會呈現在上方標題列(ActionBar)中或下方 Android 3.0之後不一定會提供menu硬體按鈕,選單會呈現在上方或下方標題列(ActionBar)中
5
ActionBar 移除ActionBar
在專案中的AndroidManifest.xml中的activity標籤中,設定無ActionBar的樣式,如: 在src/MainActivity.java的onCreate()方法中 <activity ActionBar 是在3.0開始才能使用的新物件,在圖中程式上方框選處,即為ActionBar,可直接將選單鑲嵌在ActionBar 上,也可為選項加入圖示 ActionBar在Android 3.0以上預設是會顯示的,若想要移除可以採用兩種方式 2.在src/MainActivity.java的onCreate()方法中輸入以下程式 ActionBar actionBar = getActionBar();//取得程式中的ActionBar 物件 actionBar.hide();//利用ActionBar 類別中的hide()方法,將ActionBar 隱藏 ActionBar actionBar = getActionBar(); actionBar.hide();
6
在ActionBar上加入選項 在專案的res資料夾中加入menu資料夾,再在menu 資料夾中加入一個XML檔案,如:mymenu.xml
1 在專案的res資料夾中加入menu資料夾,再在menu 資料夾中加入一個XML檔案,如:mymenu.xml 此檔案的根標籤為<menu>,根標籤內可有的子標籤如下: <item> :用來標示一個選項,重要屬性如下: android:id android:icon android:title android:showAsAction ifRoom, withText, never, always, collapseActionView android:actionViewLayout collapseActionView的選項點下後要顯示的view資源 android:actionViewClass collapseActionView的選項點下後要顯示的view類別名稱,需還package名稱 在itme中可再加入<menu>構成一個子選單 <group>:用來將多個選項變成一個群組 android:checkableBehavior none, all(複選),single(單選) 如果想要在ActionBar上加入選項,可以透過以下幾個步驟來製作: 1.在專案的res資料夾中加入menu資料夾,再在menu 資料夾中加入一個XML檔案,如:mymenu.xml 此檔案的根標籤為<menu>,根標籤內可有的子標籤如下: <item> :用來標示一個選項,在itme中可再加入<menu>構成一個子選單,重要屬性如下: android:id選項代號 android:icon選項圖示 android:title選項文字 android:showAsAction選項顯示方式,可設定的值如下: ifRoom表示當ActionBar有空間時,這個選項會被放置在ActionBar上 withText是否要顯示文字,空間不夠就不會顯示文字 never表示直接被收納到最右邊的選項中,變成一個選項選單的型式出現 always有空間總是會顯示在ActionBar上 collapseActionView點下選項後會產生另一個view在ActionBar上 android:actionViewLayout設定collapseActionView的選項點下後要顯示的view資源 android:actionViewClass設定collapseActionView的選項點下後要顯示的view類別名稱,需還加上套件名稱 <group>:用來將多個選項變成一個群組,重要屬性如下: android:checkableBehavior設定群組選項的單複選情形,可設定的值:none, all(複選),single(單選)
7
加入選項選單 在目前專案的Activity中加入onCreateOptionsMenu方法,用Alt+/自動產生完整的方法
2 public class hello extends Activity { public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); } 首先先在src的活動程式中加入onCreateOptionsMenu來覆寫Activity中的onCreateOptionsMenu( )方法,可利用快速鍵Alt+/自動產生完整的函數。 註:在新版的ADT開發工具在新建專案時,即會自動在程式碼中加入onCreateOptionsMenu()方法,不必自行新增,且預設有一個選項“Settings”,在舊版則無。 public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); } 覆寫Activity中的onCreateOptionsMenu方法
8
在ActionBar上加入選項 載入選單 public boolean onCreateOptionsMenu(Menu menu){
3 public boolean onCreateOptionsMenu(Menu menu){ MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.mymenu, menu); return true; } 透過Activity類別中的MenuInflater getMenuInflater()方法,取得MenuInflater物件, MenuInflater是用來將XML的選單物件化 透過MenuInflater類別中的void inflate(int menuRes, Menu menu)方法,將XML的選單物件化,參數menuRes為選單XML資源檔案;參數menu為要將XML的選項加入到那的選單物件
9
加入選項選取事件(1/2) 4 在目前專案的Activity中加入onOptionsItemSelected()方法,用Alt+/自動產生完整的方法 public class hello extends Activity { public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); } 在src的活動程式中加入onOptionsItemSelected()來覆寫Activity中的onOptionsItemSelected ( )方法,可利用快速鍵Alt+/自動產生完整的函數。 public boolean onOptionsItemSelected(MenuItem item){ return super.onOptionsItemSelected(item); } 覆寫Activity中的onOptionsItemSelected方法 src/MainActivity.java
10
加入選項選單選取事件(2/2) 當選取某個選項時會執行,onOptionsItemSelected()方法
public boolean onOptionsItemSelected(MenuItem item) { switch( item.getItemId() ) case Menu.FIRST: ….. break; default: } return true; //若是true,則不會將後續動作傳遞到item的view中 可以取得選取選項的id,來判斷哪個選項被選取 在onOptionsItemSelected(MenuItem item)方法中,參數item為被選取的選項物件,可利用MenuItem類別中的getItemId()方法取得選項代號(id) ,來判斷哪個選項被選取,最後此方法會有回傳值(true或false),表示是否需要停止傳遞此事件,true表示不傳遞,反之false
11
ActionBar選項練習(ActionBarMenu)
在ActionBar上加入四個選項: 新增, 刪除, 編輯, 分享,其中刪除, 編輯兩個選項為複選群組,分享有子選單,子選單中有兩個選項: twitter, Facebook,點選選項時會在LogCat視窗中顯示點選到的選項代號
12
1 2 3 在專案的res資料夾中加入menu資料夾(若已存在就不需再加入menu資料夾),再在menu 資料夾中加入一個XML檔案 main.xml(若此檔案已存在就不需再加入),點選main.xml開啟檔案,選取Layout頁籤視窗 若視窗中有選項,請點選該選項,點選Remove按鈕移除該選項 點選Add,跳出視窗 在跳出視窗中選取item,按下確定
13
4 5 6 7 9 8 4.選擇剛剛加入的選項 5.右方可編輯選項相關屬性,Id:設定選項代號,預設就會自動產生@+id/item1
6.Title:設定選項文字,在此輸入新增 7. 8. Show as action:設定選項呈現方式,點選右邊Select按鈕,跳出視窗 9. 選取ifRoom和withText 8
14
加入群組 11 10 10. 點選Add,跳出視窗 11.選取Create a new element at the top level…,選取Group,點選確定
15
設定群組複選 14 12 13 12.點選剛剛建立的group物件
13.右方屬性視窗中的Checkable behavior屬性可設定群組選項的單複選模式,在此選all(複選) 14.再一次點選Add
16
加入群組選項 15 15.上方選項選擇create a new element in the selected element, group (Group),點選item,按下確定,此動作可在group物件下建立一個新的選項
17
建立群組選項 17 16 18 16.在群組中加入兩個選項,分別將Title:設定為刪除和編輯;在Icon:設定為
内建圖示;Show as action:設定為ifRoom 17.點選Add加入選項 18.選取Create a new element at the top level…,選取Item,確定
18
設定分享選項 20 19 内建圖示;Show as action設定為ifRoom 20.點選Add加入子選項
19
加入子選單 21 21.選擇Sub-Menu,點選確定
20
加入子選項 22 23 與前面步驟相同,在Sub-Menu下建立兩個子選項(選取item)
22.選取加入的Sub-Menu,點選Add 23. 依照前面步驟分別在Sub-Menu下建立兩個子選項(選取item) 分別將加入的兩個子選項的Title分別設定為Facebook與twitter 與前面步驟相同,在Sub-Menu下建立兩個子選項(選取item) 分別將加入的兩個子選項的Title分別設定為Facebook與twitter
21
res/menu/main.xml <menu xmlns:android=" <item android:title="新增" android:showAsAction="ifRoom|withText" /> <group android:checkableBehavior="all"> <item android:title="刪除" android:showAsAction="ifRoom"></item> <item android:title="編輯" android:showAsAction="ifRoom"></item></group> <item android:title="分享" android:showAsAction="ifRoom"> <menu> <item android:title="Facebook"/> <item android:title="twitter"/> </menu> </item> res/menu/main.xml完整內容如投影片
22
src/MainActivity.java Alt+/ 1
打開src中的MainActivity.java程式,覆寫onCreateOptionsMenu()方法,在方法中輸入menu,按下Alt+/按鍵,在跳出視窗中選取MenuInflater,並給予一個物件變數名稱inflarer,利用Activity中的getMenuInflater()方法取得MenuInflater物件,儲存到inflarer中,完整程式如下 MenuInflater inflater=getMenuInflater(); Note:若程式中已有程式可略過此兩頁投影片 1 Alt+/
23
src/MainActivity.java Alt+/ 2
輸入inflater.在提示視窗(未出現請按下Alt+/按鍵)中選取inflate()方法,將參數改為inflater.inflate(R.menu.main, menu); Alt+/ 2
24
加入選項選取事件 在src的MainActivity.java程式中輸入ono,按下alt+/快速鍵,選取onOptionsItemSelected(MenuItem item)方法,會產生完整方法,如下: public boolean onOptionsItemSelected(MenuItem item) { // TODO 自動產生的方法 Stub return super.onOptionsItemSelected(item); } Alt+/ 1
25
事件方法中加入Log 輸入log.i後會產生提示視窗(未出現請按Alt+/),選取i(String tag, String msg)方法,將參數改為Log.i("event", item.getItemId()+""); 完成,請將程式執行 2
26
ActionBar 在Activity中取得ActionBar物件 ActionBar方法 getActionBar ()
void setLogo(int resId) / void setLogo(Drawable logo) void setIcon(Drawable icon) / void setIcon(int resId) void setTitle(int resId) / void setTitle(CharSequence title) void setSubtitle(int resId) / void setSubtitle(CharSequence subtitle) ActionBar類別相關重要方法 setLogo() / setIcon() : 設置標誌圖示,參數可為Drawable圖示物件或圖示資源索引 setTitle():設定標題文字,參數可為字串或字串資源索引 setSubtitle():設定副標題文字,參數可為字串或字串資源索引 以上方法也有對應的get方法 Title Logo / Icon Subtitle
27
ActionBar 類別 ActionBar方法
void setDisplayShowTitleEnabled(boolean showTitle) 設定是否顯示標題/副標題 void setDisplayShowHomeEnabled(boolean showHome) : 是否顯示Home(Logo或Icon) void setDisplayHomeAsUpEnabled(boolean showHomeAsUp) : 是否Home前面要顯示“<” (HomeAsUp符號) void setHomeButtonEnabled(boolean enabled) 設定Home按鈕是否有作用 HomeAsUp 上一頁 若將setHomeButtonEnabled(true)設定為true,表示 Logo/HomeAsUp可以點選,作用如同選單一樣,只是資源id為android.R.id.home Logo / Icon
28
android:showAsAction="collapseActionView"
<menu xmlns:android=" <item android:showAsAction="ifRoom|collapseActionView" android:actionViewClass="android.widget.SearchView" /> </menu> 此為系統內建的類別,開發者也可自訂View 當使用者點選collapseActionView的選項,在ActionBar上要顯示的View可用以下兩個屬性之一去設定 android:actionViewClass 在ActionBar上顯示的view類別檔,需含套件完整名稱 android:actionLayout 在ActionBar上顯示的畫面佈局檔 Ex : android:actionLayout 在選項<item>標籤中的android:showAsAction屬性值設定為collapseActionView,可將要顯示的元件收納起來,透過點選選項來展開收納起來的元件,顯示在Action Bar上。 若將<item>標籤中的android:showAsAction屬性值設定為collapseActionView,必須利用以下兩個屬性標示要展開的畫面類別或佈局 android:actionViewClass:要展開顯示在ActionBar上的view類別,需含套件完整名稱 android:actionLayout:要展開顯示在ActionBar上的畫面佈局檔 右上圖範例圖中,透過一個放大鏡按鈕收納個一個android提供的具搜尋功能的搜尋框android.widget.SearchView類別。
29
collapseActionView練習
承ActionBarMenu練習,再加入一個選項 “搜尋”,按下“搜尋”選項後,會在ActionBar上出現另一個具有EditText和Button的View,在EditText輸入文字並按下搜尋按鈕後,會在LogCat視窗顯示在文字框輸入的文字
30
加入要顯示在ActionBar上的畫面 在專案的res/layout資料夾中加入searchview.xml 2 1
承ActionBarMenu練習,在專案的res/layout資料夾上按右鍵新建Android XML File在File中輸入searchview.xml 打開res/layout/searchview.xml檔案,將根節點(LinearLayout)屬性設定為android:orientation="horizontal"水平,拖入一個Button和EditText,檔案完整內容如下頁投影片
31
res/layout/searchview.xml android:id="@+id/editText1"
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:ems="10" /> <Button android:text="搜尋" /> </LinearLayout>
32
加入collapseActionView選項
res/menu/main.xml檔案,再加入一個選項 “搜尋” <menu xmlns:android=" …… <item android:title="分享" android:showAsAction="ifRoom"> <menu> <item android:title="Facebook"/> <item android:title="twitter"/> </menu> </item> <item android:title="搜尋" android:showAsAction="ifRoom|collapseActionView" 3. 打開res/menu/main.xml檔案,再加入一個選項 “搜尋”,加入方式請參考ActionBarMenu練習,將“搜尋”選項的屬性設定如下: android:title="搜尋" android:showAsAction="ifRoom|collapseActionView" 新增內容如投影片紅色所示 指定按下選項後要顯示的View 3
33
加入actionLayoyt元件事件 打開src中的MainActivity.java程式
7 public class MainActivity extends Activity implements OnClickListener { View actionView; protected void onCreate(Bundle savedInstanceState) { …… } public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); actionView = menu.findItem(R.id.item7).getActionView(); Button b=(Button)actionView.findViewById(R.id.button1); b.setOnClickListener(this); return true; } public boolean onOptionsItemSelected(MenuItem item) { …… } public void onClick(View v) { EditText data=(EditText)actionView.findViewById(R.id.editText1); Log.i("actionLayout", data.getText()+""); 4 5 6 打開src/MainActivity.java 程式 4.宣告一個用來儲存要在ActionBar上顯示的View物件 5. 透過Menu類別中的findItem(int id)找出參數代號的選項,再透過MenuItem類別的getActionView()方法,取得要顯示在ActionBar上的view 6. 利用View類別中的findViewById(int id)方法,將View中的Button找出,並設定註冊OnClick事件 7. 讓程式實作OnClickListener 介面,程式中加入void onClick(View v) 方法,此方法為ActionBar上的按鈕按下時,會執行的方法 8.一樣利用View類別中的findViewById(int id)方法,將ActionBar上的View的EditText找出,並利用Log在LogCat視窗中顯示EditText上所輸入的文字 Note:輸入程式時,請多使用Alt+/快速鍵,輔助程式輸入 完成! 8
34
Toast視窗
35
Toast視窗 android.widget.Toast類別方法
static Toast makeText(Context context, int resId, int duration) static Toast makeText(Context context, CharSequence text, int duration) context:Context或Activity物件 resId, text:視窗中顯示的文字 duration:顯示時間 Toast.LENGTH_LONG //顯示較長時間 Toast.LENGTH_SHORT//顯示較短時間 void show() 顯示Toast視窗 1.Toast是一個最普通最單純的通知元件,通常設計的定位是在螢幕上出現個幾秒就消失,用於輕量的即時訊息回復。 2.利用makeText()類別方法可以設定toast視窗的文字內容以及其顯示時間,利用show()方法將其表示出來。 3.makeText()方法參數說明: context:Context或Activity物件 resId, text:視窗中顯示的文字 duration:顯示時間,可設定的值如下: 較長的顯示時間 : Toast.LENGTH_LONG 較短的顯示時間 : Toast.LENGTH_SHORT 4.利用show()將Toast視窗顯示出來。
36
設定Toast視窗位置 Toast類別中的方法
void setGravity (int gravity, int xOffset, int yOffset) gravity:Toast視窗位置,可利用Gravity類別定義的常數設定,如:Gravity.TOP視窗頂部, Gravity.LEFT視窗左邊 xOffset, yOffset Toast視窗在該位置的x,y軸偏移量 Context context = getApplicationContext(); CharSequence text = "Hello toast!"; int duration = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(context, text, duration); toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0); toast.show(); Context context = getApplicationContext();//取得應用程式的Context 物件 CharSequence text = "Hello toast!"; //設定Toast要顯示的文字 int duration = Toast.LENGTH_SHORT;//設定Toast要顯示時間長短 Toast toast = Toast.makeText(context, text, duration); //產生Toast物件 toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);//設定Toast位置 toast.show(); //顯示Toast
37
ImageView
38
ImageView 顯示圖片的元件 屬性 android:src 設定要顯示的圖片資源
android:adjustViewBounds =true等比例調整圖片大小 android:scaleType設定圖片大小與位置 matrix fitXY fitStart fitCenter fitEnd center centerCrop centerInside 1.ImageView可以用來顯示圖片,調整其大小或旋轉 2.屬性說明 android:src 設定要顯示的圖片資源 android:adjustViewBounds =true 表等比例調整圖片大小 android:scaleType 設定圖片大小的屬性值如下 matrix 將原圖片置於元件的左上角,超出元件部分將剪裁掉 fitXY 將圖片縮放不維持長寬比例,以填滿元件大小 fitStart 將圖片依長寬比例縮放,直到圖片的寬或高符合元件大小,圖片置於元件的左上角 fitCenter 將圖片依長寬比例縮放,直到圖片的寬或高符合元件大小,圖片置於元件的中間 fitEnd 將圖片依長寬比例縮放,直到圖片的寬或高符合元件大小,圖片置於元件的右下角 center 將原大小圖片置於元件的中間,超出元件外的部分將被裁剪 centerCrop 將圖片依長寬比例縮放,直到圖片符合元件最寬或最高的大小,超出部分將剪裁掉 centerInside 若圖片寬或高大於元件大小,則將圖片依長寬比例縮小,直到圖片的寬或高符合元件大小,圖片置於元件的中間;若圖片寬或高小於或等於元件大小,則直接將 原圖片置於元件的中間
39
程式中如何放圖到ImageView? XXX.java ImageView myImage = (ImageView)findViewById(R.id.view1); //從資源檔中讀入圖片 myImage.setImageDrawable(getResources(). getDrawable(R.drawable.right)); or //從檔案中讀入圖片 File f=new File(“圖片路徑”); if(f.exists()) { Bitmap bm=BitmapFactory.decodeFile(“圖片路徑”); myImage.setImageBitmap(bm); } 圖片可以從資源檔讀入,也可以從檔案讀入 可從各式來源(檔案、資料串流、位元組陣列等)建立 Bitmap物件
40
對話視窗
41
對話視窗 1 2 3 4 四種對話框視窗 1 一般對話視窗 2 列表式對話視窗 3 單選選單對話視窗 4 多選選單對話視窗
接下來的投影片將會介紹以上四種對話視窗,利用AlertDialog.Builder類別製作
42
AlertDialog.Builder—(1)
AlertDialog.Builder(Context context) 建立對話視窗物件,參數context:建立對話框的Context或Activity物件 AlertDialog.Builder setIcon(Drawable icon) 設定對話視窗中的圖示 AlertDialog.Builder setIcon(int iconId) AlertDialog.Builder setMessage(int messageId) 設定對話視窗中的訊息 AlertDialog.Builder setMessage (CharSequence message) AlertDialog.Builder setTitle(CharSequence title) 設定對話視窗標題 AlertDialog.Builder setTitle(int titleId) AlertDialog.Builder類別可用來建置對話視窗 首先要利用AlertDialog.Builder(Context context)建構子來產生對話視窗物件,並透過其所提供的方法來設定物件的內容(例如:設定標題、顯示的內容、增加按鈕..) 最後再使用show()來顯示對話視窗。 AlertDialog.Builder類別相關重要方法 setIcon(Drawable icon) / setIcon(int iconId) : 可用來設定對話視窗中的圖示,參數可以是圖片Drawable 的物件或是圖片資源索引(如:R.drawable.ic_launcher) setMessage(int messageId) / setMessage (CharSequence message) :設定對話視窗中的訊息,參數可以是一個字串或是字串資源索引(如:R.string.app_name) setTitle(CharSequence title) / setTitle(int titleId) :設定對話視窗標題
43
AlertDialog.Builder—(1)
正向(最右)按鈕 AlertDialog.Builder setPositiveButton(int textId, DialogInterface.OnClickListener listener) 將對話視窗加入正向按鈕,多個按鈕時出現在右邊 第一個參數:按鈕上的文字,第二個參數:監聽按鈕按下去事件的介面物件 AlertDialog.Builder setPositiveButton(CharSequence text, DialogInterface.OnClickListener listener) 要在對話視窗中加入正向按鈕可利用AlertDialog.Builder類別中的setPositiveButton(int textId, DialogInterface.OnClickListener listener) 或 AlertDialog.Builder setPositiveButton(CharSequence text, DialogInterface.OnClickListener listener)方法,第一個參數用來設定按鈕上的文字,參數可以是一個字串或是字串資源索引(如:R.string.app_name),第二個參數是監聽按鈕按下去事件的介面物件,此物件必須實作DialogInterface.OnClickListener介面中定義的onClick方法,實際撰寫方式可參看後面練習 不同版本正向和負向按鈕位置左右相反
44
AlertDialog.Builder—(1)
中立(中間)和負向(最左)按鈕:參數與正向按鈕相同 AlertDialog.Builder setNeutralButton(CharSequence text, DialogInterface.OnClickListener listener) public AlertDialog.Builder setNeutralButton(int textId, DialogInterface.OnClickListener listener) AlertDialog.Builder setNegativeButton(int textId, DialogInterface.OnClickListener listener) public AlertDialog.Builder setNegativeButton (CharSequence text, DialogInterface.OnClickListener listener) 將對話視窗顯示出來 AlertDialog show()
45
對話視窗練習(DialogEx) 按下按鈕後,會產生一個對話視窗,如下圖
46
res/layout/activity_main.xml 首先先在res/layout/activity_main.xml中拖入一個按鈕,檔案內容如下: <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>
47
註冊按鈕按下事件 打開src中的MainActivity.java程式,修改程式如紅色部分
public class MainActivity extends Activity implements OnClickListener { protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button bt=(Button)findViewById(R.id.button1); bt.setOnClickListener(this); } @Override public void onClick(View v) { // TODO 自動產生的方法 Stub 設定按鈕按下事件 Note:請利用alt+/快速鍵和輔助視窗
48
建立對話視窗 public void onClick(View v) {
AlertDialog.Builder ad=new AlertDialog.Builder(this); if(arg0.getId()==R.id.button1){ ad.setTitle("標題"); ad.setMessage("這邊是訊息"); ad.setIcon(R.drawable.ic_launcher); ad.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "Yes", Toast.LENGTH_LONG).show(); } }); ad.setNeutralButton("Cancel", new DialogInterface.OnClickListener() { Toast.makeText(MainActivity.this, "Cancel", Toast.LENGTH_LONG).show(); ad.setNegativeButton("No", new DialogInterface.OnClickListener() { Toast.makeText(MainActivity.this, "No", Toast.LENGTH_LONG).show(); ad.show(); 建立對話視窗 1 2 3 4 在上一頁投影片中的onClick()區塊,加入建立對話視窗程式 1. 建立對話視窗物件 2. 設定對話視窗標題、訊息、圖示 3. 加入對話視窗的正向按鈕,第一個參數輸入"Yes"用來讓按鈕上顯示Yes文字,第二個參數需設定對話視窗按鈕按下事件監聽器物件,在此使用匿名類別方式建立,請輸入new DialogInterface. 按下Alt+/選取OnClickListener(),此時會在程式中自動加入以下程式: new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { } 當按下對話視窗按鈕,會執行上面onClick(DialogInterface dialog, int which)方法,在此方法區塊中,利用Toast將按下的按鈕文字顯示在Toast視窗中,由於Toast視窗是寫在匿名類別中,要注意第一個參數必須是Context或Activity物件,在匿名類別用this指的是匿名類別本身,非是MainActivity ,因此第一個參數必須使用MainActivity .this指向MainActivity 以下兩個對話視窗按鈕加入方式相同 4.加入對話視窗的中向按鈕,對話視窗按鈕事件參數使用匿名類別方式建立,當按下按鈕利用Toast將按下的按鈕文字顯示在Toast視窗中 5.加入對話視窗的負向按鈕,對話視窗按鈕事件參數使用匿名類別方式建立,當按下按鈕利用Toast將按下的按鈕文字顯示在Toast視窗中 5
49
AlertDialog.Builder –(2)
AlertDialog.Builder setItems(int itemsId, DialogInterface.OnClickListener listener) AlertDialog.Builder setItems( CharSequence[] items, 第一個參數:列表內容,字串陣列或是字串陣列資源索引 第二個參數:選單按下事件的監聽介面物件 要將對話視窗中顯示列表式的內容可用AlertDialog.Builder類別中的AlertDialog.Builder setItems(int itemsId, DialogInterface.OnClickListener listener) 或 AlertDialog.Builder setItems( CharSequence[] items, DialogInterface.OnClickListener listener)方法,第一個參數為列表內容,可使用字串陣列或是字串陣列資源索引,第二個參數為設定選項按下事件的監聽器介面(DialogInterface.OnClickListener)物件,撰寫程式方式可參考設置對話視窗按鈕方式雷同,當選項按下時,會執行DialogInterface.OnClickListener介面中定義的onClick(DialogInterface dialog, int which)方法,此事件方法的第一個參數為發生此事件的對話視窗,第二個參數為此事件發生時所按下的選項位置,如:使用者按下投影片中的B選項,則此事件方法的第二個參數which值為1
50
CharSequence[] items = {"A", "B", "C"};
AlertDialog.Builder ad=new AlertDialog.Builder(this); ad.setTitle("標題"); ad.setIcon(R.drawable.ic_launcher); ad.setItems(R.array.data, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "按下選項:"+which, Toast.LENGTH_LONG).show(); } }); ad.show(); 粉紅色區塊即為設定顯示列表項目(使用陣列資源)以及事件監聽器,當某個選項被按下時會執行onClick(DialogInterface dialog, int which)方法區塊,在區塊中利用Toast視窗顯示第幾個選項被按下。 若對話視窗的列表要顯示程式中的陣列資料,如CharSequence[] items = {"A", "B", "C"}; ,只要將ad.setItems(items,…第一個參數改為陣列items即可 ad.setItems(items, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "按下選項:"+which, Toast.LENGTH_LONG).show(); } });
51
AlertDialog.Builder –(3)
AlertDialog.Builder setSingleChoiceItems (CharSequence[] items, int checkedItem, DialogInterface.OnClickListener listener) AlertDialog.Builder setSingleChoiceItems (int itemsId, int checkedItem, DialogInterface.OnClickListener listener) 第一個參數:列表內容,字串陣列或是字串陣列資源索引 第二個參數:預設選取的選項,從0開始,-1表示都不選取 第三個參數:單選選項按下事件的監聽介面物件 要在對話視窗中顯示單選列表資料,可利用AlertDialog.Builder類別中的AlertDialog.Builder setSingleChoiceItems (CharSequence[] items, int checkedItem, DialogInterface.OnClickListener listener)或AlertDialog.Builder setSingleChoiceItems (int itemsId, int checkedItem, DialogInterface.OnClickListener listener)方法建立單選列表,第一個參數為列表內容,可使用字串陣列或是字串陣列資源索引,第二個參數為設定預設列表中被勾選起來的選項(如:投影片右圖,需要讓C預設勾選起來,必須將此參數設置為2),第三個參數為設定選項按下事件的監聽器介面(DialogInterface.OnClickListener)物件,撰寫程式方式可參考設置對話視窗按鈕方式雷同,當選項按下時,會執行DialogInterface.OnClickListener介面中定義的onClick(DialogInterface dialog, int which)方法,此事件方法的第一個參數為發生此事件的對話視窗,第二個參數為此事件發生時所按下的選項位置,如:使用者按下投影片中的B選項,則此事件方法的第二個參數which值為1
52
儲存預設對話視窗中選取的選項 int checkedItems=2;
AlertDialog.Builder ad=new AlertDialog.Builder(this); ad.setTitle("標題"); ad.setIcon(R.drawable.ic_launcher); ad.setSingleChoiceItems(R.array.data, checkedItems, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "按下選項:"+which, Toast.LENGTH_LONG).show(); } }); ad.setPositiveButton("Yes", new DialogInterface.OnClickListener() { Toast.makeText(MainActivity.this, "按下Yes", ad.show(); 粉紅色區塊即為建立單選列表式對話視窗的方法,分別要設定顯示列表項目(使用陣列資源)、預設被選擇的項目(checkedItems)以及選項備案下的事件監聽器,當某個選項被按下時會執行onClick(DialogInterface dialog, int which)方法區塊,在區塊中利用Toast視窗顯示第幾個選項被按下。
53
AlertDialog.Builder—(4)
AlertDialog.Builder setMultiChoiceItems(CharSequence[] items, boolean[] checkedItems, DialogInterface.OnMultiChoiceClickListener listener) AlertDialog.Builder setMultiChoiceItems( int itemsId, boolean[] checkedItems, DialogInterface.OnMultiChoiceClickListener listener) 第一個參數:複選選項,字串陣列或是字串陣列資源 第二個參數:布林陣列,預設選取的選項,true表示選取,false表式不選取 第三個參數:複選選項按下事件的監聽介面物件 要在對話視窗中顯示複選列表資料,可利用AlertDialog.Builder類別中的AlertDialog.Builder setMultiChoiceItems(CharSequence[] items, boolean[] checkedItems, DialogInterface.OnMultiChoiceClickListener listener)或AlertDialog.Builder setMultiChoiceItems ( int itemsId, boolean[] checkedItems, DialogInterface.OnMultiChoiceClickListener listener) 方法建立複選列表,第一個參數為列表內容,可使用字串陣列或是字串陣列資源索引,第二個參數為設定預設列表中被勾選起來的選項,此參數必須是對應選項個數的布林陣列,此布林陣列設定的值會一對一對應到每個選項預設是否要被勾選(如投影片中有3個選項,則此參數必須是具有3個布林值的陣列,布林陣列第一個元素值須為true,第二個元素值須為false,第三個元素值須為true),第三個參數為設定選項按下事件的監聽器介面(DialogInterface.OnMultiChoiceClickListener)物件,撰寫程式方式可參考設置對話視窗按鈕方式雷同,當選項按下時,會執行DialogInterface.OnMultiChoiceClickListener介面中定義的onClick(DialogInterface dialog, int which, boolean isChecked)方法,此事件方法的第一個參數為發生此事件的對話視窗,第二個參數為此事件發生時所按下的選項位置,如:使用者按下投影片中的B選項,則此事件方法的第二個參數which值為1,第三個參數為此選項是被勾選(true)或是取消勾選(false)
54
儲存預設對話視窗中選取的選項 boolean[] checkedItems = {true, false, true};
AlertDialog.Builder ad=new AlertDialog.Builder(this); ad.setTitle("標題"); ad.setIcon(R.drawable.ic_launcher); ad.setMultiChoiceItems(R.array.data, checkedItems, new DialogInterface.OnMultiChoiceClickListener() { public void onClick(DialogInterface dialog, int which, boolean isChecked){ Toast.makeText(MainActivity.this, which+" 選取狀態:"+isChecked, Toast.LENGTH_LONG).show(); } }); ad.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "按下Yes", ad.show(); 粉紅色區塊即為建立多選列表式對話視窗的方法,分別要設定顯示列表項目(使用陣列資源)、預設被選擇的項目(checkedItems)以及選項被案下的事件監聽器,當某個選項被按下時會執行onClick(DialogInterface dialog, int which, boolean isChecked)方法區塊,在區塊中利用Toast視窗顯示第幾個選項被勾選或取消勾選。
55
分頁視窗
56
Tab Widget 頁籤 TabWidget的視窗樣式如圖示,上方有多個Tab(頁籤)可以切換,在下方會隨著頁籤切換顯示不同畫面。
57
res/layout/activity_main.xml 產生Tab Layout 負責顯示所有頁籤 分頁所顯示的畫面內容
<TabHost xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout <TextView android:layout_height="fill_parent“ /> …… </FrameLayout> </LinearLayout> </TabHost> 產生Tab Layout 負責顯示所有頁籤 1.第一部分是TabHost。TabHost是Android負責產生Tab Layout的類別,裡邊使用垂直線性排版將TabWidget跟FrameLayout垂直排列。 TabHost標籤的android:id屬性值可自行定義 2. 3.FrameLayout 此程式撰寫方式請參見實驗六 分頁所顯示的畫面內容
58
res/layout/activity_main.xml <TabHost xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_weight="1"> …… </FrameLayout> <TabWidget android:layout_height="wrap_content" /> </LinearLayout> </TabHost> 若要將頁籤置於底部,須將LinearLayout 中的FrameLayout 和TabWidget 調換,並將FrameLayout中設定android:layout_weight="1", 即可
59
頁籤對應畫面設定 TabSpec spec=host.newTabSpec("tab1");
TabHost host=(TabHost)findViewById(R.id.tab); host.setup(); 在TabHost中加入每一個分頁 TabSpec spec=host.newTabSpec("tab1"); spec.setContent(R.id.tab1); spec.setIndicator("TAB 1"); host.addTab(spec); spec=host.newTabSpec("tab2"); … 設定目前顯示頁面 host.setCurrentTab(0); 將佈局檔設置完畢後,需使用程式將頁籤對應的畫面做設定 1. 利用findViewById()方法將TabHost元件找出,並呼叫TabHost類別中的setup()方法建立Tab視窗。 2.在TabHost中加入每一個分頁 a.要設置每一頁籤的標籤和顯示內容,需建立TabSpec物件,此物件需透過TabHost的newTabSpec(String tag)方法產生,參數tag為設定此頁面的標記(標記是用來區分每個頁面用,每個頁面需設定不同字串) b.利用TabSpec類別中的setContent()方法來設置該頁籤要顯示的View c.利用TabSpec類別中的setIndicator()方法來設置該頁籤的標籤 d. 最後將此TabSpec物件加入到TabHost中 f. 依序創建第二和第三個頁籤… 3.可利用TabHost類別中的setCurrentTab(int pos)方法來設定預設執行起來要顯示的頁籤
60
設定Tab標籤樣式 //…可利用TextView 類別中的各式方法來設定標籤樣式 //取出XML中TabWidget 元件
1 //取出XML中TabWidget 元件 TabWidget widget=(TabWidget) findViewById(android.R.id.tabs); //取出頁籤中第一個View元件 View view=widget.getChildTabViewAt(0); //在view中尋找標籤元件 TextView tv=(TextView) view.findViewById(android.R.id.title); //設定標籤元件文字顏色 tv.setTextColor(Color.RED); //…可利用TextView 類別中的各式方法來設定標籤樣式 2 3 4 5
61
頁籤切換事件 TabHost 中的setOnTabChangedListener(TabHost.OnTabChangeListener l) 註冊頁籤切換事件,參數為頁籤切換事件介面OnTabChangeListener物件 OnTabChangeListener介面需實作onTabChanged(String tabId)方法 public void onTabChanged(String tabId) { } tabId: 切換到頁面的newTabSpec()參數對應設定的標記字串 Tab視窗在頁面切換時會發生onTabChanged事件,若需要監聽此事件,需利用TabHost 中的setOnTabChangedListener(TabHost.OnTabChangeListener l)方法註冊監聽事件,參數為設定頁籤切換事件的監聽器介面(TabHost.OnTabChangeListener)物件,撰寫程式方式可參考事件投影片中,一般按鈕按下事件的方式撰寫,當頁籤切換時,會執行TabHost.OnTabChangeListener介面中定義的onTabChanged(String tabId)方法,此事件方法的參數為切換到的頁面的標記
62
Q & A
63
程式方式加入選單 >>在MenuItem類別中的setIcon(…)方法可設定選項的圖片
onCreateOptionsMenu(Menu menu)函式中加入選項 在Menu類別中的add(…)方法可將選項加入選單中 MenuItem add(int groupId, int itemId, int order, CharSequence title) / MenuItem add(int groupId, int itemId, int order, int titleRes) >>在MenuItem類別中的setIcon(…)方法可設定選項的圖片 >>函式:MenuItem setIcon(Drawable icon) >>函式:MenuItem setIcon(int iconRes) menu.add(0, Menu.FIRST, 0, “選項1"); menu.add(0, Menu.FIRST+1, 2, “選項3"); menu.add(0, Menu.FIRST+2, 1, “選項2"); 接著修改onCreateOptionsMenu()方法的內容。 >>在onCreateOptionsMenu()方法中有一個Menu類別的參數,可利用Menu類別中的MenuItem add(int groupId, int itemId, int order, CharSequence title)方法將一個選項加入選單中,參數groupId為選項群組代號,若希望多個選項為同一個群組,只須將此參數設定為同一個數值即可;參數itemId為此選項的選項代號,每個選項最好需自行定義一個不同數值,以區分選單中的每個選項;參數order為選項呈現時的順序,若每個選項此值皆相同,則會依據程式順序呈現選項;參數title/titleRes為此選項顯示文字或文字資源代號。 Menu.FIRST為Menu類別中定義的一個常數整數值,其數值為1 >>若需要設定選項具有圖案,可使用MenuItem類別中的setIcon(Drawable icon) / setIcon(int iconRes)方法設定顯示的圖片,參數icon為一個Drawable圖片物件或參數iconRes為一個圖片資源索引。 menu.add(0, Menu.FIRST+2, 1, “選項2").setIcon(R.drawable.icon);
64
MenuItem類別 方法 MenuItem setActionView(int resId) / setActionView(View view) 設定collapseActionView的選項點下後要顯示的view MenuItem setIcon(Drawable icon) / setIcon(int iconRes) MenuItem setTitle(CharSequence title) / setTitle(int title) void setShowAsAction(int actionEnum) 參數值: SHOW_AS_ACTION_ALWAYS SHOW_AS_ACTION_IF_ROOM SHOW_AS_ACTION_NEVER 或加上 | SHOW_AS_ACTION_WITH_TEXT
65
選項選單練習 Android 3.x之前 Android 3.x之後(不會有圖示)
做一個選項選單之練習,左圖為執行在Android 3.x版本之前,選項2會有一個圖示;右圖為同樣程式執行在3.x版本之後,選項2不會有圖示 Android 3.x之前 Android 3.x之後(不會有圖示)
66
src/MainActivity.java 打開src中的MainActivity.java程式,輸入onc按下Alt+/快速鍵,選取onCreateOptionsMenu()方法 Alt+/ 1 打開src中的MainActivity.java程式,若程式中有onCreateOptionsMenu()方法,註解此行程式:getMenuInflater().inflate(R.menu.main, menu); 若無,輸入onc按下Alt+/快速鍵,選取onCreateOptionsMenu()方法
67
src/MainActivity.java 在onCreateOptionsMenu()方法加入選項 2
在onCreateOptionsMenu()方法中利用參數menu加入選項 輸入menu.後會產生提示視窗(未出現請按Alt+/),選取add(int groupId, int itemId, int order, CharSequence title)方法,將參數改為menu.add(1, Menu.FIRST, 1, "選項1"); 依據同樣方式加入以下程式 menu.add(1, Menu.FIRST+1, 3, "選項3"); menu.add(2, Menu.FIRST+2, 2, "選項2").setIcon(R.drawable.ic_launcher); menu.add(1, Menu.FIRST+3, 4, "選項4"); menu.add(1, Menu.FIRST+4, 5, "選項5"); menu.add(1, Menu.FIRST+5, 6, "選項6"); menu.add(1, Menu.FIRST+6, 7, "選項7"); 2
68
src/MainActivity.java 完成後,直接執行。
若要執行在較低版本的裝置上,請打開專案中的AndroidManifest.xml檔案,切換到AndroidManifest.xml頁籤,找到android:minSdkVersion,將其版本改為較低版本的API,如: <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15" />
69
Menu類別重要方法 void clear() void removeGroup(int groupId)
將選項全部移除 void removeGroup(int groupId) 將groupId群組中的選項全部移除 void removeItem(int id) 移除指定id之選項
70
Menu類別重要方法 void setGroupCheckable(int group, boolean checkable, boolean exclusive) 將群組內的選項顯示/或不顯是單選或複選標誌 group:哪個群組 checkable :true顯示單複選標誌,false不顯示 exclusive :true單選,false複選 void setGroupEnabled(int group, boolean enabled) 將選單設為可作用或是不可作用 enabled :true可作用,false不作用 void setGroupVisible(int group, boolean visible) 將群組選單設為可見或不可見 visible :true可見,false不見 setGroupCheckable(int group, boolean checkable, boolean exclusive)方法可針對群組選項是否要顯示單複選或做“單/複”選設定,方法參數如下 : group:哪個群組 checkable :true顯示單複選標誌,false不顯示 exclusive :true單選,false複選 setGroupEnabled(int group, boolean enabled) 可以選擇此選單是否可以作用,enabled若為true則可作用,若為false則不作用。 setGroupVisible(int group, boolean visible) 設定此選單是否可見,visible若為true則可見,若為false則不可見。
71
子選單(SubMenu) SubMenu類別繼承(實作)Menu類別 子選單不支援小圖示和巢狀子選單 Menu類別方法
SubMenu addSubMenu(int groupId, int itemId, int order, CharSequence title) / SubMenu addSubMenu(int groupId, int itemId, int order, int titleRes) 在選單中加入子選單 MenuItem add(int groupId, int itemId, int order, CharSequence title) / MenuItem add(int groupId, int itemId, int order, int titleRes) 加入子選單選項 SubMenu類別繼承(實作)Menu類別,子選單不支援小圖示和巢狀子選單 在選單中要加入子選單,需利用Menu類別中的SubMenu addSubMenu(int groupId, int itemId, int order, CharSequence title) /SubMenu addSubMenu(int groupId, int itemId, int order, int titleRes)方法,參數groupId為群組代號;參數itemId為子選單代號;參數order為子選單呈現在選單上的順序;參數title/titleRes為子選單的標題文字或文字資源索引。 在子選單中加入選項的方式與選單中加入選項都是利用add()方法,請參考前面投影片
72
子選單練習 此練習延續選項選單之練習,再加入一個具有子選單的選項,並且讓群組1的選項不具作用(不可點選)
73
加入子選單 1 Alt+/ 打開之前的選項選單程式中src內的MainActivity.java程式,加入子選單
首先輸入sub按下Alt+/快速鍵,選取SubMenu,給予一個物件變數名稱sub,如下: SubMenu sub= 1 Alt+/
74
加入子選單 輸入menu.後會產生提示視窗(未出現請按Alt+/),選取addSubMenu(int groupId, int itemId, int order, CharSequence title) ,將參數改為addSubMenu(3, Menu.FIRST+7, 8, "有子選項"); 完整程式: SubMenu sub = menu.addSubMenu(3, Menu.FIRST+7, 8, "有子選項"); 2
75
加入子選單的選項 輸入sub.後會產生提示視窗(未出現請按Alt+/),選取add(int groupId, int itemId, int order, CharSequence title)方法,將參數改為sub.add(0, Menu.FIRST+8, 0, "子選項1"); 依據同樣方式再加入 sub.add(0, Menu.FIRST+9, 0, "子選項2"); 和 sub.setHeaderTitle(“子選項標題”); //設定子選單標題文字 3
76
設定群組不作用 輸入menu.set後會產生提示視窗(未出現請按Alt+/),選取setGroupEnabled(int group, boolean enabled)方法,將參數改為menu.setGroupEnabled(1, false); 完成,請將程式執行 4
77
加入選項選單選取事件(1/2) 在目前專案的Activity中加入onOptionsItemSelected()方法,用Alt+/自動產生完整的方法 public class hello extends Activity { public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); } 在src的活動程式中加入onOptionsItemSelected()來覆寫Activity中的onOptionsItemSelected ( )方法,可利用快速鍵Alt+/自動產生完整的函數。 public boolean onOptionsItemSelected(MenuItem item){ return super.onOptionsItemSelected(item); } 覆寫Activity中的onOptionsItemSelected方法 src/MainActivity.java
78
加入選項選單選取事件(2/2) 當選取某個選項時會執行,onOptionsItemSelected()方法
public boolean onOptionsItemSelected(MenuItem item) { switch( item.getItemId() ) case Menu.FIRST: ….. break; default: } return true; //若是true,則不會將後續動作傳遞到item的view中 可以取得選取選項的id,來判斷哪個選項被選取 在onOptionsItemSelected(MenuItem item)方法中,參數item為被選取的選項物件,可利用MenuItem類別中的getItemId()方法取得選項代號(id) ,來判斷哪個選項被選取,最後此方法會有回傳值(true或false),表示是否需要停止傳遞此事件,true表示不傳遞,反之false
79
選單選項事件練習 點選選項時,在LogCat視窗顯示所選取到選項的代號
80
加入選項選取事件 延續子選單選項程式,打開src中的MainActivity.java程式,輸入ono,按下alt+/快速鍵,選取onOptionsItemSelected(MenuItem item)方法,會產生完整方法,如下: public boolean onOptionsItemSelected(MenuItem item) { // TODO 自動產生的方法 Stub return super.onOptionsItemSelected(item); } 1 Alt+/
81
事件方法中加入Log 輸入log.i後會產生提示視窗(未出現請按Alt+/),選取i(String tag, String msg)方法,將參數改為Log.i("event", item.getItemId()+""); 完成,請將程式執行 2
Similar presentations