Chapter 16 Widget 作者 : 林致孙不少 Android 手機在使用者剛購買時, 手機的桌面上就已經有不少的小工具 (Widget), 有些可以即時顯示氣候資訊, 有些則可以顯示最新股票資訊本章將利用兩個例子來說明 Widget 是如何設計的 16.1 時辰顯示小工具在 An

Size: px

Start display at page:

Download "Chapter 16 Widget 作者 : 林致孙不少 Android 手機在使用者剛購買時, 手機的桌面上就已經有不少的小工具 (Widget), 有些可以即時顯示氣候資訊, 有些則可以顯示最新股票資訊本章將利用兩個例子來說明 Widget 是如何設計的 16.1 時辰顯示小工具在 An"

吉义槌池
4 years ago
Views:

1 Chapter 16 Widget 作者 : 林致孙不少 Android 手機在使用者剛購買時, 手機的桌面上就已經有不少的小工具 (Widget), 有些可以即時顯示氣候資訊, 有些則可以顯示最新股票資訊本章將利用兩個例子來說明 Widget 是如何設計的 16.1 時辰顯示小工具在 Android 開發者網站, 已針對 Widget 的開發提供了一份詳細的文件 [1], 本章大部份的內容皆是參考該文件而製作的, 筆者嘗詴直接使用兩個簡單的例子, 讓讀者能夠快速地開發出自己的第一個 Widget, 然而若想對 Widget 的開發有更深入的瞭解, 還是需要請讀者自行至 Android 開發者網站, 細細閱讀該文件第一個範例是用來顯示時辰的小工具, 接下來就開始介紹這個小工具的開發過程 Widget 的開發大至可分為下面的步驟, 後面我們會一一做說明, 要提醒讀者的是, 這些步驟並沒有絕對的先後順序 : Widget 資訊的宣告 Widget 使用者介面的設計撰寫一個繼承 AppWidgetProvider 的類別於 AndroidManifest.xml 宣告所設計的 Widget 測詴自己所設計的 Widget Widget 資訊的宣告在這個步驟中我們將 : 宣告此 Widget 的大小更新頻率與使用者介面檔檔名宣告的方法說明如下, 首先我們在專案的 res 目錄下建立一個新的資料夾, 名為 xml, 接著於 xml 目錄下建立一個 xml 檔, 名為 chinesehourwidget.xml, 如下圖所示 :

2 這個 chinesehourwidget.xml 就是用來宣告 Widget 資訊的地方, 檔案內容如下 : 1 <?xml version="1.0" encoding="utf-8"?> 2 <appwidget-provider xmlns:android=" 3 android:minwidth="146dp" 4 android:minheight="72dp" 5 android:updateperiodmillis="0" 6 android:initiallayout="@layout/widget_layout" 7 ></appwidget-provider> 我們利用 <appwidget-provider> 標籤來做 Widget 資訊的宣告, 第 3 及第 4 行是定義 Widget 的大小, 一個螢幕可以容下一個 4 4 的 Widget, 轉換成 dp 的公式如下 : ( 格子數 *74-2) 例如在我們的範例中, 我們希望建立一個 2 1 的 Widget, 我們的寬度就設為 146 (2*74-2), 高度就設為 72 (1*74-2) 第 5 行則是設定 Widget 更新的頻率, 設定多少毫秒更新一次 ( 所謂的更新就是呼叫繼承 AppWidgetProvide 類別的那個自定類別的 onupdate 方法, 讀者會於節中看到 ), 然而筆者實驗的結果,Widget 似乎都沒有被更新, 因此在本章中, 讀者將利用第七章學過的 AlarmManager 來做 Widget 的更新因此我們將值設為 0 即可最後, 第 6 行則是設定 Widget 介面的介面檔, 根據我們之前學習到的東西, 我們應該不難猜出, 我們等會就是要在 /res/layout 目錄下, 建立一個 widget_layout.xml, 裡頭定義了 Widget 的介面 Widget 使用者介面的設計接著我們要定義 Widget 的介面, 此處我們可利用第三章所學到的 LinearLayout, TextView, ImageView 等標籤來設計 Widget 的介面, 然而要注意的是, 並不是所有在第三章所提到的介面元件 (View) 都能夠使用於 Widget 介面設計上, 例如 EditText 就無法使用, 讀者可於官方網站得知有哪些介面元件是被支援的 [1] 在我們的範例中, 我們只需要一個 TextView, 用來顯示時辰資訊, 如節所說的, 我們在 /res/layout 目錄下, 建立一個名為 widget_layout.xml 的 XML 檔, 內容如下 :

3 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android=" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent"> 6 <TextView android:id="@+id/tv_widget_text" 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" 9 android:background="@color/white" 10 android:textcolor="@color/black" 11 android:gravity="center" 12 android:textsize="20sp"/> 13 </LinearLayout> 讀者對於這個 XML 檔, 應該已經不感到陌生了, 筆者就不再多做說明, 然而要提醒讀者的是, 我們需要修改 /res/values 目錄下的 strings.xml, 加入白色與黑色的顏色代碼, 內容如下所示 : 1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <string name="app_name">chinesehourwidget</string> 4 <color name="white">#ffffff</color> 5 <color name="black">#000000</color> 6 </resources> 撰寫一個繼承 AppWidgetProvider 的類別接著我們要開始寫程式的主體, 事實上 Widget 是一個廣播接收器 (Broadcast Receiver), 收到廣播後更新要呈現在 Widget 上的內容, 經過第七章的介紹, 讀者可能就已經想到, 我們需要寫一個繼承 BroadcastReceiver 的類別, 接收適當的廣播, 並覆寫 onreceive 方法, 以便在收到廣播後更新 Widget 所呈現的內容不過事實上 Android SDK 提供了一個名為 AppWidgetProvider 的類別 [2], 讓我們能更方便地開發 Widget, 利用此類別開發 Widget 時, 我們甚至不必覆寫 onreceiver 方法, 只需要覆寫 AppWidgetProvider 類別的 onupdate 方法, 就可以更新 Widget 所需呈現的內容 (AppWidgetProvider 類別還包含了 ondeleted,

4 ondisabled, onenabled 方法, 由於本章的範例並沒有需要覆寫這些方法, 為了不造成讀者的負擔, 我們並不介紹這些方法 ) AppWidgetProvider 類別的 onupdate 方法何時會被呼叫呢? 當使用者將 Widget 放到螢幕上時, 此方法會被呼叫 ( 在某種情況下,onUpdate 方法不會被呼叫, 此屬於較進階的議題, 請讀者自行閱讀文件 [1]), 另外就是當收到 ACTION_APPWIDGET_UPDATE 廣播時會被呼叫, 此廣播的發出可藉由節提到的 android:updateperiodmillis 來設定然而在節, 筆者有提到筆者實驗結果, 發現利用 android:updateperiodmillis 來做定期更新, 似乎無法發揮該有的功能, 因此筆者的方法是自訂一個 ACTION, 然後在 onreceive 方法裡, 處理該 ACTION 的廣播, 也就是當收到該 ACTION 的廣播後, 自行去呼叫 onupdate 方法, 程式碼如下所示 : 1 package lincyu.widget.chinesehour; 2 3 import java.util.calendar; 4 5 import android.app.alarmmanager; 6 import android.app.pendingintent; 7 import android.appwidget.appwidgetmanager; 8 import android.appwidget.appwidgetprovider; 9 import android.content.componentname; 10 import android.content.context; 11 import android.content.intent; 12 import android.widget.remoteviews; public class ChineseHourWidget extends AppWidgetProvider { public void onreceive(context context, Intent intent) { super.onreceive(context, intent); 19 if("my_widget_update".equals(intent.getaction())){ 20 AppWidgetManager appwidgetmanager = 21 AppWidgetManager.getInstance(context); ComponentName thiswidget = new 24 ComponentName(context.getPackageName(),

5 25 ChineseHourWidget.class.getName()); 26 int[] appwidgetids = 27 appwidgetmanager.getappwidgetids(thiswidget); onupdate(context, appwidgetmanager, 30 appwidgetids); 31 } 32 } public void onupdate(context context, 35 AppWidgetManager appwidgetmanager, 36 int[] appwidgetids) { final int N = appwidgetids.length; 39 int appwidgetid=appwidgetmanager.invalid_appwidget_id; 40 for(int i = 0; i < N; i++) { 41 appwidgetid = appwidgetids[i]; 42 updatewidget(context,appwidgetmanager,appwidgetid); 43 } 44 } String [] chinesehour = {" 丑 ", " 寅 ", " 卯 ", " 辰 ", " 巳 ", " 午 ", 47 " 未 ", " 申 ", " 酉 ", " 戌 ", " 亥 ", " 子 "}; private void updatewidget(context context, 50 AppWidgetManager appwidgetmanager, 51 int appwidgetid) { RemoteViews views = new 54 RemoteViews(context.getPackageName(), 55 R.layout.widget_layout); Calendar c = Calendar.getInstance(); c.settimeinmillis(system.currenttimemillis()); 60 int hour = c.get(calendar.hour_of_day); // 設定現在的時

6 63 int chineseindex = -1; 64 if (hour%2 == 0) { 65 chineseindex = hour/2-1; 66 } else { 67 chineseindex = (hour-1)/2; 68 } // 設定下次觸發的時間 71 if (hour%2 == 0) { 72 hour = hour+1; 73 } else { 74 if (hour == 23) hour = -1; 75 hour = hour+2; 76 } 77 c.set(calendar.hour_of_day, hour); 78 c.set(calendar.minute, 0); 79 c.set(calendar.second, 0); 80 c.set(calendar.millisecond, 0); Intent intent = new Intent("MY_WIDGET_UPDATE"); 83 PendingIntent pendingintent = 84 PendingIntent.getBroadcast(context, 0, intent, 0); 85 AlarmManager alarmmanager = (AlarmManager) 86 context.getsystemservice(context.alarm_service); 87 alarmmanager.set(alarmmanager.rtc_wakeup, 88 c.gettimeinmillis(), pendingintent); views.settextviewtext(r.id.tv_widget_text, " 現在是 " + 91 chinesehour[chineseindex] + " 時 "); appwidgetmanager.updateappwidget(appwidgetid, views); 94 } 95 } 首先我們看到 onupdate 方法, 位於 34~44 行的地方,onUpdate 傳入三個參數, 第一個參數 context 我們已經在其它程式範例中看過好幾次了, 第二個參數是 AppWidgetManager 類別 [3] 的物件, 事實上, 若要更新 Widget 內容, 只要呼叫 AppWidgetManager 類別的 updateappwidget 方法就可以更新 Widget 內容, 而這

7 個 updateappwidget 方法需要一些參數的傳入, 其中一個參數是 Widget 的 ID, onupdate 的第三個參數就是 Widget 的 ID 程式碼第 40~43 行, 程式利用一個 for 迴圈來更新所有的 Widget ( 注意 : 我們可於螢幕上放置多個相同的 Widget, 每個都需要更新 ), 在第 42 行, 我們呼叫了 updatewidget 方法, 這個方法其實是筆者自行定義的, 寫在程式碼 49~94 行的地方 updatewidget 方法主要做了三件事 : 計算目前的時辰 : 這段程式碼寫在 57~68 行, 這段只是普通的 Java 程式, 不多做說明設定下次更新 Widget 的事件 : 首先在程式碼第 70~80 行, 我們設定了下次更新的時間, 而在程式碼第 82~88 行, 我們利用第七章學過的 AlarmManager 設定下次觸發的事件, 此處我們會送出一個廣播, 這個廣播並不指定接收者, 因此廣播會攜帶著一個 Intent, 而這個 Intent 的 ACTION 是我們自定的, 名為 MY_WIDGET_UPDATE 對 82~88 行的程式不熟悉的讀者, 可回到第七章, 再將第七章的內容做個回顧更新 Widget 所呈現的內容 : 首先在程式碼 53~55 的地方, 我們產生了一個 RemoteViews [4] 的物件, 讀者可以想成 Widget 是嵌入在別的程式的程式, 而顯示於別的程式的程式所要呈現的介面元件, 就必須使用 RemoteViews, 建構子需要兩個參數, 第一個參數是版面設計檔所屬的套件, 可利用 context.getpackagename() 取得, 第二個參數則是版面設計檔的資源 ID, 讀者是否還記得我們在節, 於 /res/layout 下建立一個名為 widget_layout.xml 的版面設計檔, 因此第二個參數填入 R.layout.widget_layout 即可接著, 在程式碼第 90~91 行, 我們利用 RemoteViews 類別的 settextviewtext 方法來設定預顯示在 TextView 上的文字 ( 若要於 Widget 上提供按鈕, 可呼叫 setonclickpendingintent 方法, 請讀者自行參閱官方文件 [4]), settextviewtext 方法的第一個參數是 TextView 的資源 ID, 在 widget_layout.xml 中我們已經利用 android:id 屬性幫 TextView 取了一個代號, 此處填入該代號即可, 第二個參數則是欲顯示於 TextView 上的字串最後, 在程式第 93 行, 我們呼叫 AppWidgetManager 類別的 updateappwidget 方法, 對 Widget 內容做更新,updateAppWidget 需要兩個參數, 第一個參數是 onupdate 傳進來的 Widget ID, 第二個參數則是我們剛剛宣告的 RemoteViews 物件由於我們是利用 AlarmManger 來更新 Widget, 剛剛也提到我們會送出一個廣播, 其所攜帶的 Intent 的 ACTION 是自定的 MY_WIDGET_UPDATE, 因此我們要覆寫 onreceive 方法來處理這個 ACTION, 程式碼在 16~32 行, 首先在第 18 行, 我們呼叫父類別的 onreceive 方法, 處理 AppWidgetProvider 會幫我們處理的事, 接著就處理我們自定的 ACTION, 其實我們就只需要呼叫 onupdate 方法即可,

8 然而先前已提過,onUpdate 方法需要三個參數, 程式碼 20~27 行就是為了取得 onupdate 方法所需的參數, 這些可利用 AppWidgetManager[3] 所提供的方法來獲得, 請讀者自行閱讀並查閱相關官方文件於 AndroidManifest.xml 宣告所設計的 Widget 先前已經說明過,Widget 是一個 BroadcastReceiver, 因此我們也必須在 AndroidManifest.xml 中註冊這個 Widget, 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android=" 3 package="lincyu.widget.chinesehour" 4 android:versioncode="1" 5 android:versionname="1.0"> 6 <application android:icon="@drawable/icon" 7 android:label="@string/app_name"> 8 <receiver android:name=".chinesehourwidget"> 9 <intent-filter> 10 <action android:name= 11 "android.appwidget.action.appwidget_update"/> 12 </intent-filter> 13 <intent-filter> 14 <action android:name="my_widget_update" /> 15 </intent-filter> 16 <meta-data android:name="android.appwidget.provider" 17 android:resource="@xml/chinesehourwidget"/> 18 </receiver> 19 </application> 20 </manifest> 在第 8 行我們利用 <receiver> 標籤, 註冊了這個 Widget, 當我們將 Widget 拉到螢幕上時, 系統會送出 APPWIDGET_UPDATE 的廣播, 因此第 10~12 行, 我們指定要接收此廣播, 而第 13~15, 我們指定要接收我們自定 ACTION 的廣播, 而第 16~17 行則利用 <meta-data> 標籤指定 Widget 的資源, 裡頭有兩個屬性要設定, 其中 android:name 的屬性值需設為 android.appwidget.provider, 而 android:resource 屬性則設為節中我們所建立的 Widget 資訊檔測詴自己所設計的 Widget

9 Widget 設計完成後, 我們可以開始測詴我們所設計的 Widget, 首先我們在主畫面上長按, 直到出現下圖的選單 : 按下小工具後, 就可以看到我們所設計的 Widget, 名為 ChineseHourWidget, 如下圖所示 : 按下後就可將小工具放置到桌面上, 如下圖所示, 讀者可自行調整時間, 觀看 Widget 的更新是否運作正常

10 16.2 便利貼小工具在第二個範例中, 筆者示範一個簡單的便利貼小工具, 事實上在這個範例中, 我們並沒有使用到新的類別或方法, 跟前面的例子不一樣的是, 除了 Widget 之外, 我們還有一個 Activity, 這個 Activity 可讓使用者輸入任意的文字內容, 並利用 SharedPreferences 儲存起來, 儲存後會更新 Widget 的顯示內容開發 Widget 的步驟中, 很多步驟都跟上節所提的步驟一樣, 因此我們跳過 Widget 資訊的宣告 Widget 使用者介面的設計及於 AndroidManifest.xml 宣告所設計的 Widget 這三個步驟, 我們只簡單地說明 Java 主程式, 在說明 Activity 的程式碼之前, 我們先看這個 Activity 的畫面, 包含了一個可以讓使用者輸入便利貼內容的 EditText 與一個儲存按鈕, 如下圖所示 : MemoEditor.java 的程式碼如下所示 : 1 package lincyu.widget.memo; 2 3 import java.util.calendar; 4 5 import android.app.activity; 6 import android.app.alarmmanager; 7 import android.app.pendingintent; 8 import android.content.context; 9 import android.content.intent; 10 import android.content.sharedpreferences; 11 import android.os.bundle; 12 import android.view.view; 13 import android.view.view.onclicklistener;

11 14 import android.widget.button; 15 import android.widget.edittext; public class MemoEditor extends Activity { EditText et_memo; 20 Button btn_save; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); 26 setcontentview(r.layout.memoeditor); et_memo = (EditText)findViewById(R.id.et_memo); 29 btn_save = (Button)findViewById(R.id.btn_save); 30 btn_save.setonclicklistener(save_listener); 31 } OnClickListener save_listener = new OnClickListener() { 35 public void onclick(view v) { 36 SharedPreferences pref = 37 getsharedpreferences( 38 "PREF_MEMOWIDGET", 39 Context.MODE_PRIVATE); SharedPreferences.Editor preedt = pref.edit(); 42 preedt.putstring("memo_entity", 43 et_memo.geteditabletext().tostring()); 44 preedt.commit(); Calendar c = Calendar.getInstance(); 47 c.settimeinmillis(system.currenttimemillis()); Intent intent = new Intent("MY_WIDGET_UPDATE"); 50 PendingIntent pendingintent = 51 PendingIntent.getBroadcast(

12 52 MemoEditor.this, 0, intent, 0); 53 AlarmManager alarmmanager = (AlarmManager) 54 getsystemservice(context.alarm_service); 55 alarmmanager.set(alarmmanager.rtc_wakeup, 56 c.gettimeinmillis(), pendingintent); 57 } 58 }; 59 } 我們把重點放在儲存按鈕, 這個按鈕的傾聽者寫在 33~58 行, 在 41~44 行, 我們利用 SharedPreferences 將 EditText 的內容儲存起來, 接著從 46~56 行, 我們利用 AlarmManager 去發送廣播, 讓 Widget 可接收此廣播並更新 Widget 內容由於都是學習過的東西, 筆者不再多做說明, 請讀者自行閱讀程式碼 MemoWidget.java 的程式碼如下所示 : 1 package lincyu.widget.memo; 2 3 import android.appwidget.appwidgetmanager; 4 import android.appwidget.appwidgetprovider; 5 import android.content.componentname; 6 import android.content.context; 7 import android.content.intent; 8 import android.content.sharedpreferences; 9 import android.widget.remoteviews; public class MemoWidget extends AppWidgetProvider { public void onreceive(context context, Intent intent) { super.onreceive(context, intent); 17 if("my_widget_update".equals(intent.getaction())){ 18 AppWidgetManager appwidgetmanager = 19 AppWidgetManager.getInstance(context); ComponentName thiswidget = new ComponentName( 22 context.getpackagename(),

13 23 MemoWidget.class.getName()); 24 int[] appwidgetids = 25 appwidgetmanager.getappwidgetids(thiswidget); onupdate(context, 28 appwidgetmanager, appwidgetids); 29 } 30 } public void onupdate(context context, 34 AppWidgetManager appwidgetmanager,int[] appwidgetids) { final int N = appwidgetids.length; 37 int appwidgetid=appwidgetmanager.invalid_appwidget_id; 38 for(int i = 0; i < N; i++) { 39 appwidgetid = appwidgetids[i]; 40 updatewidget(context, 41 appwidgetmanager, appwidgetid); 42 } 43 } private void updatewidget(context context, 46 AppWidgetManager appwidgetmanager, int appwidgetid) { RemoteViews views = new RemoteViews( 49 context.getpackagename(), 50 R.layout.widget_layout); SharedPreferences pref = context.getsharedpreferences( 53 "PREF_MEMOWIDGET", Context.MODE_PRIVATE); views.settextviewtext(r.id.tv_widget_memo, 56 pref.getstring("memo_entity", "")); appwidgetmanager.updateappwidget(appwidgetid, views); 59 } 60 }

製作一個時鐘小工具, 能將現在時間顯示於 Widget 上 2. 製作一個來電小工具, 能將最新的來電號碼顯示於 Widget 上 16.5 參考資料 [1] App Widgets Android Developers, http://developer.android.

14 程式利用 SharedPreferences 讀出資料, 並顯示於 Widget 的 TextView 上, 執行範例如下圖所示 : 16.3 摘要 Widget 能讓我們於桌面上, 即時地看到一些最新訊息, 例如新聞股票資訊等本章介紹了 Android 上 Widget 的開發, 希望讀者能對 Widget 的開發有個初步的瞭解, 然而若想習得更進階的開發技巧, 讀者須詳讀官方文件 [1] 16.4 作業 1. 製作一個時鐘小工具, 能將現在時間顯示於 Widget 上 2. 製作一個來電小工具, 能將最新的來電號碼顯示於 Widget 上 16.5 參考資料 [1] App Widgets Android Developers, [2] AppWidgetProvider Android Developers, [3] AppWidgetManager Android Developers,

15 [4] RemoteViews Android Developer,

Android 编程基础 Android 开发教程 & 笔记 1

Android 编程基础 Android 开发教程 & 笔记 1 Android 开发教程 & 笔记 1 多式样 ProgressBar 撰写 : 地狱怒兽联系 :zyf19870302@126.com 普通圆形 ProgressBar 该类型进度条也就是一个表示运转的过程, 例如发送短信, 连接网络等等, 表示一个过程正在执行中一般只要在 XML 布局中定义就可以了