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

Slides:



Advertisements
Similar presentations
青少年儿童常见伤害的预防. 伤害的定义 伤害是指各种物理性、化学性或生物性 事件而导致人体发生暂时或永久性损 伤、死亡和残疾的一类疾病的总称。
Advertisements

Android ADT + Android SDK Eclipse Eclipse 編輯器 JAVA JAVA 開發工具.
第2章  Android应用的界面编程.
課程地圖 (104年入學-日間部) 校通識核心 專業課程 必修與選修 與管理模組 網路技術 App設計與應用模組 學院通識核心 學院專業核心
学生教育办介绍 2015年9月.
第13章 繪圖與多媒體 13-1 顯示圖檔-行動相簿 13-2 音樂播放-音樂播放器 13-3 影片播放-視訊播放器
SAP Business One – 销售 南京东软企业解决方案事业部 [Project Manager]
良心處方 Click to start..
战争结束了 年11月,听到停战的消息,巴黎街头人们欣喜若狂。法国总理克里孟梭说:“吻我的姑娘有500多个了。”
實驗五:多媒體播放器選單介面.
Part 2 開發Android應用程式的流程
荷福威士顿机器人科技有限公司 上海荷福集团
第二章 JAVA语言基础.
ArrayAdapter & Spinner
Android App 系統開發教學 Luna 陳雯琳 2014/12/18
厦门大学数据库实验室 报告人:谢荣东 导师:林子雨 2014年8月30日
實驗四:單位轉換程式.
第2章 建立Android應用程式 2-1 Java語言、XML文件與Android 2-2 建立第一個Android應用程式
Chapter 13 Android 實戰演練.
Android + JUnit 單元測試 建國科技大學資管系 饒瑞佶 2012/8/19V4.
程式設計實作.
Ch06 再談選單元件 物件導向系統實務.
使用Android控制Arduino 史先强
Android資料庫處理 Android智慧型手機程式設計 程式設計與應用班 建國科技大學 資管系 饒瑞佶 2012/4 V1
第8章 Android内容提供者(ContentProvider)应用
Chapter 6 Advanced UI Design.
Android智慧型手機程式設計實務應用班
Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2
Chapter 6 進階UI設計.
第9章 使用意圖啟動活動與內建應用程式 9-1 意圖的基礎 9-2 使用意圖啟動活動
ANDROID PROGRAMMING2.
CH7 佈局、按鈕與文字編輯元件.
Android + Service 建國科技大學 資管系 饒瑞佶.
2018/12/3 面向对象与多线程综合实验-网络编程 教师:段鹏飞.
實驗十四:顯示與控制地圖.
第2讲 移动应用开发基础知识(二) 宋婕
建立Android新專案 Android智慧型手機程式設計 程式設計與應用班 建國科技大學 資管系 饒瑞佶 2012/4 V1
第8章 Service解析.
第6章 建立Android使用介面 6-1 介面元件的基礎 6-2 Android的事件處理 6-3 按鈕元件 6-4 文字元件
Java程序设计 第2章 基本数据类型及操作.
C/C++/Java 哪些值不是头等程序对象
實驗十一:待辦事項程式 (儲存在手機上).
Chapter 5 Recursion.
主编:钟元生 赵圣鲁.
Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1.
JAVA 编 程 技 术 主编 贾振华 2010年1月.
第二章Java基本程序设计.
ArrayAdapter & Spinner
UI高级控件.
Chapter 5 Basic UI Design.
主编:钟元生 赵圣鲁.
實驗九:延續實驗八, 製作一個完整音樂播放器
Location Based Services - LBS
第二章 Java基本语法 讲师:复凡.
第二章 Java语法基础.
行動應用App基本資安檢測實驗室 檢測服務說明
Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10.
目标 流程控制 字符串处理 C# 的类和对象 C# 访问修饰符 C# 构造函数和析构函数.
第二章 Java基本语法 讲师:复凡.
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
RecyclerView and CardView
Android藍芽聊天室 SDK內的範例程式
Android Speech To Text(STT)
用Intent啟動程式中的其他Activity、運用WebView顯示網頁 靜宜大學資管系 楊子青
第2章 Java语言基础.
讀取網路資料及JSON開放資料 靜宜大學資管系 楊子青
C#快速導讀 流程控制.
控制UI界面 本讲大纲: 1、使用XML布局文件控制UI界面 2、在代码中控制UI界面 3、使用XML和Java代码混合控制UI界面
第二章 Java基本语法 讲师:复凡.
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
Presentation transcript:

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

Spinner選單元件

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

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

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

程式碼 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() ); }

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

程式碼 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]); }

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

ArrayAdapter

在程式中設定 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 第二個參數:項目的版面配置,有多種選擇 第三個陣列:來源的字串陣列

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

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);

補充說明 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); }

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

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元件

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開始計數

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.

程式碼 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("您未選擇季節");

程式碼 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]); }

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

選擇季節後,顯示照片 (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; }

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