進階UI元件：Spinner與接合器 靜宜大學資管系 楊子青

Presentation on theme: "進階UI元件：Spinner與接合器 靜宜大學資管系 楊子青"— Presentation transcript:

1 進階UI元件：Spinner與接合器 靜宜大學資管系 楊子青

2 Spinner選單元件

3 1. Spinner元件的項目元素設定 在values/strings.xml建立字串陣列，例如：
<string-array name="seasons"> <item>春</item> <item>夏</item> <item>秋</item> <item>冬</item> </string-array> 將Spinner元件的entries屬性設為： @array/seasons 執行時展開Spinner選單，就能看到陣列中的項目

4 2. getSelectedItemPosition()
讀取Spinner物件，使用者選取項目的索引編號(由0開始)

5 實例 畫面三個元件 TextView Spinner Button entries: @array/seasons text: 確定
onClick: Start

6 程式碼 public void Start(View v){
TextView t = (TextView) findViewById(R.id.textView); Spinner s = (Spinner) findViewById(R.id.spinner); int i = s.getSelectedItemPosition(); t.setText(Integer.toString(i) + s.getSelectedItem().toString() ); }

7 補充：getResources()方法 傳回可讀取資源Resources類別物件，如：
getDrawable()可取得放在drawable-XXX資料夾下的圖形資源 getString()可讀取指定資源ID的字串 getStringArray()可取得指定資源ID的字串陣列

8 程式碼 public void Start(View v){
TextView t = (TextView) findViewById(R.id.textView); Spinner s = (Spinner) findViewById(R.id.spinner); int i = s.getSelectedItemPosition(); //t.setText(Integer.toString(i) + s.getSelectedItem().toString() ); String[] all = getResources().getStringArray(R.array.seasons); t.setText("您選擇的季節是：" + all[i]); }

9 3. 在程式中設定 Spinner 的顯示項目 如果不在XML定義string-array，可使用Adapter (接合器)
是一種介面物件，作為清單和資料來源之間的橋樑 Android預設提供三種Adapter ArrayAdapter：陣列的資料來源 SimpleAdapter：XML文件 CursorAdapter：內容提供者

10 ArrayAdapter

11 在程式中設定 Spinner 的顯示項目 在程式onCreate中 步驟1：宣告字串陣列 步驟2：建立ArrayAdapter
String[] FourSeasons = {"春天", "夏天", "秋天", "冬天" }; 步驟2：建立ArrayAdapter ArrayAdapter<String> a = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item,FourSeasons); 建立的ArrayAdapter，泛型是String 第一個參數：The current context，傳入MainActivity 第二個參數：項目的版面配置，有多種選擇 第三個陣列：來源的字串陣列

12 在程式中設定 Spinner 的顯示項目 步驟3：取得Spinner元件 步驟4：指定Spinner元件使用的Array Adapter
Spinner s = (Spinner) findViewById(R.id. spinner); 步驟4：指定Spinner元件使用的Array Adapter s.setAdapter(a); 執行程式，即可看到Spinner的項目，已經顯示：春天、夏天、秋天、冬天

13 setDropDownViewResource()
上述實例的項目排列較為緊密，可設定選單項目的顯示樣式 String[] FourSeasons = {"春天", "夏天", "秋天", "冬天" }; ArrayAdapter<String> a = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item,FourSeasons); a.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); Spinner s = (Spinner) findViewById(R.id. spinner); s.setAdapter(a);

14 補充說明 string-array不適用於清單項目事先無法確定或會變動的情況
例如讀取資料庫，或是直接抓網路上的Open Data 如果項目很多，Spinner是比較適合上下滑動手機的元件。例如用程式方式設定多個項目試試看： //String[] FourSeasons = {"Sprinner", "Summer", "Autumn", "Winter"}; String[] FourSeasons = new String[20]; for (int i=0; i<20; i++){ FourSeasons[i]= Integer.toString(i); }

15 4. OnItemSelectedListener介面
如果要讓使用者選取項目，不需再按按鈕就進行對應的動作，可實作此介面的監聽物件 onItemSelected()：使用者選擇清單項目後，會呼叫此方法 onNothingSelected()：拉下選單，但是沒有選取項目時(例如按手機的返回鈕) ，呼叫此方法

16 AdapterView說明 <?> parent
The AdapterView could be a ListView, GridView, Spinner, etc. The question mark inside the angle brackets indicates that it could be any of them. This is called generics (泛型，讓型態具有某種彈性) in Java. parent The AdapterView where the click happened. 在此實例為Spinner元件

17 AdapterView說明 view position
The view within the AdapterView that was clicked (this will be a view provided by the adapter) 例如Spinner被點選的項目，是傳回TextView position The position of the view in the adapter. 回傳被點選項目的位置，從0開始計數

18 AdapterView說明 id The row id of the item that was clicked.
Sometimes id is the same as position and sometimes it is different. If you are using an ArrayAdapter or SimpleAdapter then they are the same (except in the case that there is a header view and then they are off by one). For a CursorAdapter (and consequently a SimpleCursorAdapter) the id returns the row id of the table, that is, _id.

19 程式碼 public class MainActivity extends AppCompactActivity
implements AdapterView.OnItemSelectedListener { Spinner s = (Spinner) findViewById(R.id. spinner); s.setOnItemSelectedListener(this); } public void onNothingSelected(AdapterView<?> parent){ t.setText("您未選擇季節");

20 程式碼 public void onItemSelected(AdapterView<?> parent, View v, int position, long id){ TextView t = (TextView) findViewById(R.id.textView); Spinner s = (Spinner) findViewById(R.id.spinner); String[] all = getResources().getStringArray(R.array.seasons); t.setText("您選擇的季節是：" + all[position]); }

21 延伸練習：選擇季節後，顯示照片 (1) drawable資料夾，放入各季節照片

22 選擇季節後，顯示照片 (2)畫面加入imageView元件 (3)程式碼：
ImageView img = (ImageView) findViewById(R.id.imageView); switch (position){ case 0: img.setImageResource(R.drawable.spring); break; case 1: img.setImageResource(R.drawable.summer); break; case 2: img.setImageResource(R.drawable.autumn); break; case 3: img.setImageResource(R.drawable.winter); break; }

23 參考資料 施威銘主編，Android App程式設計教本之無痛起步 - 使用Android Studio開發環境，旗標出版社，2015年。
第六章 進階 UI 元件：Spinner 與 ListView 陳惠安著，新觀念 Android程式設計範例教本 - 使用Android Studio，旗標出版社，2015年。 11-1 Spinner元件與接合器