Ch06 再談選單元件 物件導向系統實務
大綱 下拉式選單Spinner 捲軸ScrollView 數字轉輪NumberPicker
Spinner下拉式選單
Spinner 選單元件
Spinner 選單元件 Spinner 元件的屬性設定 getSelectedItemPosition() 讀取 Spinner 元件 的選取項目 onItemSelected()：Spinner 元件的選擇事件
建立Spinner下拉式選單元件的過程 必須完成下列幾件事： 在程式檔中取得這個Spinner元件，並為它建立一個OnItemSelectedListener()事件處理程序，當使用者點選Spinner的選單項目之後，這個事件中的程式碼就會被啟動執行。
建立Spinner下拉式選單元件的二種方式 就技術層面來說，也可以直接將選項清單以陣列的方式宣告在程式中，然後再設定給Spinner元件。但是這種方法無法做出多語言版本的App，因為建立在程式碼中的字串無法在執行的過程隨意更改，所以正確的方式是把字串建立在專案的字串資源檔res/values/strings.xml中，再讓程式取得資源來使用。
建立Spinner下拉式選單元件的第一種方式 Step 1. 開啟單元9建立的「婚姻建議」程式，把選項陣列以<string-array>標籤的格式宣告在程式專案的res/values/strings.xml檔案中，另外我們加入一個用來當作Spinner選單標題的字串。 <?xml version="1.0" encoding="utf-8"?> <resources> … <string-array name="sex_list"> <item>男</item> <item>女</item> </string-array> <string name="spn_sex_list_prompt">請選擇性別</string> </resources>
建立Spinner下拉式選單元件的第一種方式 Step 2. 在專案介面佈局檔res/layout/main.xml中建立一個Spinner介面元件如以下 <Spinner android:id="@+id/spnSex“ android:layout_width="match_parent“ android:layout_height="wrap_content“ android:entries="@array/sex_list“ android:spinnerMode="dialog“ android:prompt="@string/spn_sex_list_prompt" /> android:entries屬性用來設定選單，這個選單是一個定義在字串資源檔中的陣列。android:spinnerMode屬性是用來設定選單是用下拉式的型態還是對話盒的型態顯示，如果是對話盒的型態，還可以使用android:prompt屬性，設定對話盒的標題。
建立Spinner下拉式選單元件的第一種方式 Step 3. 開啟程式檔，在裡頭建立一個AdapterView.OnItemSelectedListener物件，並完成其中的onItemSelected()和onNothingSelected()二個方法的程式碼如下 private AdapterView.OnItemSelectedListener spnSexOnItemSelected = new AdapterView.OnItemSelectedListener () { public void onItemSelected(AdapterView parent, View v, int position, long id) { msSex = parent.getSelectedItem().toString(); } public void onNothingSelected(AdapterView parent) { };
建立Spinner下拉式選單元件的第一種方式 Step 4. 加入取得Spinner介面元件的程式碼，再把上一個步驟建立的OnItemSelectedListener物件設定成為Spinner元件的事件處理程序，另外還要修改按下Button元件之後執行的程式碼，換成利用msSex中的字串來決定性別。
練習1:建立飲料店
strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Ch06_01_DrinkBar</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string-array name="drinks"> <item>紅茶</item> <item>綠茶</item> <item>西瓜汁</item> <item>咖啡</item> </string-array> </resources>
package com. example. ch06_01_drinkbar; import android. app package com.example.ch06_01_drinkbar; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Spinner; public class MainActivity extends Activity { Spinner spinDrinks; Button btnOrder; EditText edtOrder; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); spinDrinks = (Spinner)findViewById(R.id.spinDrinks); btnOrder = (Button)findViewById(R.id.btnOrder); edtOrder = (EditText)findViewById(R.id.edtOrder); btnOrder.setOnClickListener(orderOnClick); }
Button. OnClickListener orderOnClick = new Button Button.OnClickListener orderOnClick = new Button.OnClickListener() { public void onClick(View v) { String msg = spinDrinks.getSelectedItem().toString(); edtOrder.setText(msg); } };
ListView清單方塊
ListView 清單方塊
onItemClick(): ListView 的按一下事件
範例6-3 ：使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
使用 ListView 建立選單
練習2
strings.xml <string-array name="sugars"> <item>正常</item> <item>少糖</item> <item>半糖</item> <item>微糖</item> <item>無糖</item> </string-array>
MainActivity.java package com.example.ch06_01_drinkbar; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import android.widget.Spinner; import android.widget.TextView;
public class MainActivity extends Activity { Spinner spinDrinks; Button btnOrder; EditText edtOrder; ListView lstvSugar; ArrayList<String> selectSugar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); spinDrinks = (Spinner)findViewById(R.id.spinDrinks); btnOrder = (Button)findViewById(R.id.btnOrder); edtOrder = (EditText)findViewById(R.id.edtOrder); lstvSugar = (ListView)findViewById(R.id.lstvSugar); btnOrder.setOnClickListener(orderOnClick); lstvSugar.setOnItemClickListener(lstvSugarOnItemClickListener); }
Button. OnClickListener orderOnClick = new Button Button.OnClickListener orderOnClick = new Button.OnClickListener() { public void onClick(View v) { String msg = spinDrinks.getSelectedItem().toString(); if(selectSugar.size() > 0) for(String str:selectSugar) msg += " " + str; else msg += " " + "正常"; edtOrder.setText(msg); } };
AdapterView.OnItemClickListener lstvSugarOnItemClickListener = new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id) selectSugar = new ArrayList<String>(); TextView txvSugar = (TextView) v; //將被按下的View物件轉成TextView物 件 String strSugar = txvSugar.getText().toString(); //取得項目中的文字 if(selectSugar.contains(strSugar)) selectSugar.remove(strSugar); else selectSugar.add(strSugar); } };
在程式中變更 Spinner 的顯示項目 ArrayAdapter：Spinner 與資料的橋樑 ArrayAdapter()：建立ArrayAdapter 物件 setDropDownViewResource()：設定選單項目的顯示樣式 setAdapter()：將ArrayAdapter 與Spinner 綁在一起
ArrayAdapter：Spinner 與資料的橋樑
ArrayAdapter()：建立 ArrayAdapter 物件
setDropDownViewResource()： 設定選單項目的顯示樣式
setAdapter()：將 ArrayAdapter 與Spinner 綁在一起
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
使用 Spinner 製作飲料訂單
練習三 新增一個選項是飲料溫度. 當在飲料選項選定了飲料後，則會控制溫度的選項內容；例 如：如果是茶飲料則有冰和溫，可是果汁類，就只能是冰的
public class MainActivity extends Activity { Context context = MainActivity.this; Spinner spinDrinks; Button btnOrder; EditText edtOrder; ListView lstvSugar; ArrayList<String> selectSugar; Spinner spinIce; ArrayAdapter<CharSequence> adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); spinDrinks = (Spinner)findViewById(R.id.spinDrinks); btnOrder = (Button)findViewById(R.id.btnOrder); edtOrder = (EditText)findViewById(R.id.edtOrder); lstvSugar = (ListView)findViewById(R.id.lstvSugar); spinIce = (Spinner)findViewById(R.id.spinIce);
// Create an ArrayAdapter using the string array and a default spinner layout adapter = ArrayAdapter.createFromResource(this, R.array.ice1, android.R.layout.simple_spinner_item); // Specify the layout to use when the list of choices appears adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); // Apply the adapter to the spinner spinIce.setAdapter(adapter); btnOrder.setOnClickListener(orderOnClick); lstvSugar.setOnItemClickListener(lstvSugarOnItemClickListener); spinDrinks.setOnItemSelectedListener(spinDrinksOnItemSelectedListener); }
AdapterView.OnItemSelectedListener spinDrinksOnItemSelectedListener = new AdapterView.OnItemSelectedListener() { public void onItemSelected(AdapterView a, View v, int pos, long id) { // Create an ArrayAdapter using the string array and a default spinner layout if(pos == 2) adapter = ArrayAdapter.createFromResource(context, R.array.ice2, android.R.layout.simple_spinner_item); else R.array.ice1, android.R.layout.simple_spinner_item); // Specify the layout to use when the list of choices appears adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); // Apply the adapter to the spinner spinIce.setAdapter(adapter); } public void onNothingSelected(AdapterView<?> a) };
Eclipse操作技巧 在建立AdapterView.OnItemSelectedListener物件時，可以善用Alt + /叫出程式碼輔助精靈，再從建議的清單中選擇想要的項目。這種操作技巧可以讓程式碼輔助精靈自動幫我們加入必要的方法。 在「介面佈局檔」的純文字模式下，將編輯游標設定到某一個介面元件的標籤中，然後輸入「android:」，稍等半秒鐘，就會出現屬性清單。點選其中某一個屬性，就會顯示該屬性的使用說明，我們也可以同時按下鍵盤上的Alt和/按鍵，隨時叫出這個程式碼輔助精靈。 49