106 讓程式畫面更生動有趣的 ImageButton 和 ImageView 看完前面幾個單元, 不曉得讀者是不是覺得 Android App 專案好像有點複雜? 不僅專案中有許多不同功能的資料夾, 而且程式功能描述檔 AndroidManifest.xml 好像也不太簡單, 還有許多不同型態的資源, 像是字串 顏色 Selector 和 style 對於初學者來說, 剛開始學習 Android App 程式設計的時候, 確實不太容易記清楚這麼多的資訊 尤其本書介紹的主題是程式介面設計, 為了讓程式畫面更加生動, 操作起來更清楚有趣, 一開始的時候我們就必須學習如何建立和使用專案資源 如果讀者想要盡快熟悉這些專案資源的用法, 最有效的方式就是實作 依照書上列舉的步驟操作幾次, 甚至自己構思一個程式專案, 親自將它完成, 這樣就能夠逐漸熟悉本書介紹的技巧 接下來我們要介紹可以讓程式畫面變得更有趣的二種介面元件 :ImageButton 和 ImageView ImageButton 介面元件的功能和前面介紹過的 Button 元件完全相同, 唯一的差別是 Button 元件上顯示的是文字,ImageButton 元件上顯示的是影像, 因此 ImageButton 可以讓我們用比較生動有趣的方式來表示按鈕的功能 ImageButton 元件上要顯示的影像必須置於專案的 res/drawable 系列的資料夾中 ( 關於 drawable 系列資料夾的功能請參考 補充說明 ), 影像檔的格式可以是 png jpg gif 或是 bmp,android 4.0 以上的版本還支援新的圖檔格式 webp 舉例來說, 我們可以在程式專案的 res/layout 資料夾下的介面佈局檔中加入一個 ImageButton 元件如下 :
107 <ImageButton android:id="@+id/imgbtn" android:src="@drawable/ 影像檔名 " android:contentdescription="@string/ 這個 ImageButton 的文字說明 " /> 補充說明 專案中的 res/drawable 系列資料夾 Android 是一個開放原始碼的作業系統, 因此不同的廠商會開發出不同螢幕尺寸和解析度的 裝置 為了讓 App 可以在這些不同配備的裝置上執行, 我們可以在 App 專案中放置不同解 析度的影像, 這些不同解析度的影像必須置於特定的 drawable 資料夾中, 這樣當 App 在不 同螢幕尺寸的裝置上執行時, 就會選用最合適的影像, 以獲得最佳的程式畫面 單元11 讓程式畫面更生動有趣的ImageButton 和ImageView 和 Button 元件的用法一樣, 每一個 ImageButton 元件也必需指定一個 id 名 稱, 以便在程式中使用該 ImageButton,android:src 屬性是用來設定所要顯示的 影像 另外還有一個比較特殊的 android:contentdescription 屬性, 它是用來說明 這個 ImageButton 的文字 加上這個屬性的原因是考量視障者的需要, 如果使用 語音朗讀的功能時, 這個 ImageButton 才會有對應的文字可以朗誦, 另外還可以 使用 android:scaletype 屬性設定影像檔的縮放模式 最後我們必須在程式檔中建 立並設定 ImageButton 元件的 OnClickListener 物件, 這樣當使用者按下按鈕之後 就會執行 OnClickListener 物件中的程式碼 如果程式的畫面只是要顯示影像供使用者觀看, 那麼就可以使用 ImageView 元件 ImageView 元件同樣是使用 android:src 屬性設定要顯示的影像檔, 請參考 以下範例 : <ImageView android:id="@+id/imgview" android:src="@drawable/ 影像檔名 " android:contentdescription="@string/ 這個 ImageView 的文字說明 " /> 如果在程式執行的過程中想要改變 ImageView 元件上顯示的影像, 可以呼叫 ImageView 物件的 setimageresource(r.drawable. 影像檔名 ), 這個方法可以從專 案的資源類別 R 中載入指定的影像檔
108 補充說明 把影像檔加入程式專案 要把一個新的影像檔加入程式專案中的 res/drawable 系列資料夾時, 先執行 Windows 檔案總管, 找到要加入的影像檔, 然後選擇功能表的 複製 接著開啟 Eclipse 並展開 res 資料夾, 然後用滑鼠右鍵點選要儲存的 drawable 資料夾, 再選擇 Paste 即可 我們也可以直接利用 Windows 檔案總管把影像檔複製到程式專案的 res/drawable 系列資料夾裏頭, 複製完後回到 Eclipse, 用滑鼠右鍵點選該程式專案, 然後選擇 Refresh 來更新專案資源的內容 11-1 建立不同形狀的按鈕 在預設情況下, 加入程式畫面中的按鈕都是長方形 造成這種長方形按鈕的原因有二個 : 1. 一般影像檔都是長方形, 如果我們把這種長方形的影像檔放到 ImageButton 中顯示, 使用者看到的 ImageButton 自然也是長方形 ; 2. ImageButton 中除了顯示我們指定的影像檔之外, 還有一個預設的背景顏色 如果在程式執行的時候按下按鈕, 就會看到按鈕的背景顏色會自動改變, 這是回應使用者按下按鈕的操作, 這個按鈕的背景顏色也是造成使用者看到長方形按鈕的原因 如果我們可以把以上二個原因消除, 就可以創造出不同形狀的按鈕 首先, 我們可以利用影像編輯軟體, 例如 :Photoshop, 建立具有透明背景 ( transparent background ) 的影像 首先在建立新影像檔的時候設定使用 transparent background, 然後開啟想要當成前景圖形的影像檔, 再用適當的 selection tool, 例如 :Lasso Tool 或 Magic Wand Tool, 選取用來當成前景圖形的部分, 最後把選取部分複製到 transparent background 的影像上 當這個影像顯示在程式畫面的時候, 就只會看到前景圖形的部分, 圖 11-1 就是一般影像和 transparent background 影像顯示在螢幕上的差異
109 圖 11-1 一般影像和 transparent background 影像顯示在螢幕上的差異 建立好 transparent background 的影像之後, 下一步就是取消按鈕的預設背 景 這很簡單, 只要在介面佈局檔中的按鈕元件加上以下粗體字的屬性即可, 其中的 android:src 屬性就是設定為我們建立好的 transparent background 影像檔 <ImageButton android:src="@drawable/transparent background 的影像檔 " android:background="@null" /> 單元11 讓程式畫面更生動有趣的ImageButton 和ImageView 完成以上二個步驟之後, 就會看到程式畫面中的按鈕變成前景圖形的形狀, 原來外圍的長方形消失了 不過雖然我們已經看不到按鈕的長方形區域, 但是其實可以按下的部分還是原來長方形的範圍 現在讓我們執行程式, 試按一下這個按鈕, 讀者會發現按下按鈕之後看不到任何變化, 原來按鈕背景顏色改變的效果已經不見了, 這是因為按鈕的背景已經被設成 null 為了做出按鈕按下的效果, 我們可以再利用前面單元介紹的 Selector 資源檔, 分別指定按鈕在一般狀態和按下時所顯示的影像, 這樣就會顯示按下按鈕的效果 11-2 範例程式 接下來我們就用本單元介紹的技術, 把單元九的 通訊錄 程式改頭換面一下, 讓它的執行畫面看起來更有趣 改造的方式就是把原來顯示欄位名稱的 TextView 元件換成 ImageView, 再把文字型態的 Button 換成 ImageButton, 完成後的程式畫面如圖 11-2 這個程式畫面的改造工作主要是修改介面佈局檔, 程式碼的部分只需要稍微更動, 以下是操作流程 :
110 圖 11-2 換成使用 ImageView 和 ImageButton 的 通訊錄 程式 準備好用來當成 姓名 電話 住址 和 輸入 按鈕的影像檔, 這些影像檔的寬度和高度大約在 30 ~ 80 像素的範圍既可, 而且最好都使用 transparent background 的格式, 以便套用到不同背景色的程式畫面 另外用在 輸入 按鈕的影像檔要有二個, 一個是在一般狀態下顯示, 另一個則是在按鈕按下時顯示, 讀者可以參考隨書附贈光碟中的程式專案 利用 Windows 檔案總管把步驟一建立的影像檔複製到程式專案的 res/drawable 資料夾裏頭, 複製完後回到 Eclipse, 用滑鼠右鍵點選專案檢視視窗中的程式專案名稱, 然後選擇 Refresh 更新專案資源的內容 利用單元九介紹的操作技巧建立一個 Selector 資源檔, 這個 Selector 資源檔的名稱是 img_btn_input_src_selector.xml, 內容如下 : <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="@drawable/ 按鈕按下後顯示的影像檔名稱 " /> <item android:drawable="@drawable/ 按鈕在一般情況下顯示的影像檔名稱 " /> </selector> 開啟程式專案的介面佈局檔, 把其中的 TextView 元件全部改成 ImageView,Button 元件則改成 ImageButton 並設定好適當的屬性, 以下列出隨書光碟中的程式碼供讀者參考, 有關控制程式畫面的影像大小, 請讀者參考 補充說明
111 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity" android:weightsum="10" > <ImageView android:layout_height="0dp" android:src="@drawable/name" android:layout_weight="3" android:scaletype="fitstart" android:contentdescription="@string/name" /> 單元11 讓程式畫面更生動有趣的ImageButton 和ImageView <EditText android:id="@+id/edtname" android:layout_width="match_parent" android:inputtype="text" android:hint="@string/name_hint" android:textcolorhint="#ffaaaaaa" > <requestfocus /> </EditText> <ImageView android:layout_height="0dp" android:src="@drawable/telephone" android:layout_weight="2" android:scaletype="fitstart" android:contentdescription="@string/tel" /> <EditText android:id="@+id/edttel" android:layout_width="match_parent" android:inputtype="number text" android:maxlength="10" android:hint="@string/tel_hint" android:textcolorhint="#ffaaaaaa" /> <ImageView
112 android:layout_height="0dp" android:src="@drawable/address" android:layout_weight="2" android:scaletype="fitstart" android:contentdescription="@string/addr" /> <EditText android:id="@+id/edtaddr" android:layout_width="match_parent" android:lines="3" android:hint="@string/addr_hint" android:textcolorhint="#ffaaaaaa" android:gravity="top left" /> <ImageButton android:id="@+id/imgbtninput" android:layout_gravity="center_horizontal" android:src="@drawable/img_btn_input_src_selector" android:contentdescription="@string/btn_input" android:background="@null" /> <TextView android:id="@+id/txtr" /> </LinearLayout> 補充說明控制程式畫面的影像大小當程式畫面需要顯示影像時, 可以利用 android:layout_weight 屬性指定影像所佔的程式畫面比例 我們可以在最外層的 LinearLayout 元件中加入一個 android:weightsum 屬性, 這樣配合 ImageView 和 ImageButton 中的 android:layout_weight 屬性,Android 系統就可以幫我們計算出影像在畫面上所佔的實際比例 另外要注意, 在使用 android:layout_weight 屬性的那一個方向 ( 寬或高 ), 必須將 layout_width 或 layout_height 設為 0dp, 表示由 Android 系統決定
113 開啟 src/( 套件路徑名稱 ) 資料夾中的程式檔, 將宣告為 Button 的物件 改成 ImageButton, 如以下粗體字的部分 : public class MainActivity extends Activity { private final int ADDR_MAX_LINES = 3; private EditText medtname, medttel, medtaddr; private ImageButton mimgbtninput; private TextView mtxtr; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); 單元11 讓程式畫面更生動有趣的ImageButton 和ImageView medtname = (EditText) findviewbyid(r.id.edtname); medttel = (EditText) findviewbyid(r.id.edttel); medtaddr = (EditText) findviewbyid(r.id.edtaddr); mimgbtninput = (ImageButton) findviewbyid(r.id.imgbtninput); mtxtr = (TextView) findviewbyid(r.id.txtr); } ( 以下和原來的程式碼相同 ) } ( 以下和原來的程式碼相同 ) 完成以上修改之後, 啟動程式測試一下按鈕的效果, 是不是比原來純文字的 畫面更有趣呢!
114 神奇又好用的 Nine-Patch 影像 Nine-Patch 影像? 相信第一次看到這個名詞一定覺得很奇怪, 一般我們常聽到的是 jpg gif bmp png 影像, 那麼 Nine-Patch 影像是一種新的格式嗎? 其實這麼說不算對, 也不能說錯 Nine-Patch 影像的用途和以前我們常用的影像檔格式完全不一樣, 它不是用來儲存我們拍攝的照片, 而是為了能夠做出更漂亮的程式畫面 其實 Nine-Patch 影像是一種包含額外資訊的 png 影像, 更明確地說, 就是在正常的 png 影像四周, 多出一個 pixel 的寬度 這個多出來的區域用來記錄影像中可以重複擴展的部分, 以及可以顯示內容的位置 看完以上說明相信讀者還是似懂非懂, 沒關係, 這個單元的目的就是要讓讀者完全了解 Nine-Patch 影像的功能和用途 但是第一步當然是要學會建立 Nine-Patch 影像, 接下來我們一邊說明操作步驟, 一邊解釋它的效果 12-1 建立 Nine-Patch 影像的方法 Nine-Patch 影像可以用一般的影像編輯軟體打開, 可是無法進行編輯 即使把它的內容修改後再儲存, 還是無法讓程式正確讀取, 因為 Nine-Patch 影像的儲存格式和一般的 png 影像不同 建立 Nine-Patch 影像的步驟比較麻煩, 必須先用一般的影像編輯軟體建立一張 png 影像, 然後再利用 Android SDK 內建的 Nine- Patch 影像編輯工具, 把該 png 影像編輯成 Nine-Patch 影像檔, 以下是詳細的操作步驟 :
單元12 神奇又好用的Nine-Patch 影像115 先用影像編輯軟體 ( 例如 Photoshop) 建立一個 png 影像檔, 這個影像檔的寬度和高度通常只有數十個 pixel, 例如 50x50 因為在這個影像檔中, 我們將會指定可以重複擴展的區域, 所以它可以 長大 另外, 一般我們會把這張影像的背景設為透明 (transparent), 而且四周有特別的形狀或是顏色, 如圖 12-1 因為如果整張影像的內容都完全一樣, 例如整個都是紅色, 那就直接把它放大就好了, 不需要特別指定可以重複擴展的區域 圖 12-1 用來建立 Nine-Patch 影像的 png 檔 開啟 Windows 檔案總管, 展開安裝 Android SDK 的資料夾 ( 預設名稱為 android-sdks) 中的 tools 子資料夾, 執行裡頭的 draw9patch.bat, 螢幕上就會出現如圖 12-2 的程式畫面, 它就是用來建立 Nine-Patch 影像檔的程式 圖 12-2 建立 Nine-Patch 影像檔的程式畫面 點選左上角的 File > Open 9-patch 選項, 就會顯示一個檔案瀏覽對話盒 利用這個對話盒開啟步驟一建立的 png 影像檔 ( 操作提示 : 也可以從 Windows 檔案總管, 把 png 影像檔拖曳到程式畫面中 ), 該影像檔就會顯示在程式畫面 我們可以利用程式畫面下方的 Zoom 拖曳鈕調整顯示的縮放比例, 以方便檢視和編輯, 讀者可以參考圖 12-3
116 圖 12-3 編輯 Nine-Patch 影像檔的畫面 讀者可以看到原來 png 影像的四周多出一個 pixel 的寬度, 如果用滑鼠左鍵在這些多出來的區域點一下, 該位置就會變成黑色 再用滑鼠右鍵點一下黑色的 pixel, 就可以將它復原 除了這些多出來的區域以外, 原來 png 影像的內容是所謂的 lock 區域, 我們不能修改 現在先把程式畫面下方的 Show lock 項目取消, 然後勾選 Show content 和 Show patches 二個選項, 再利用上一個步驟介紹的技巧, 把 png 影像的內容編輯成如圖 12-4 圖 12-4 完成編輯後的 Nine-Patch 影像檔
單元12 神奇又好用的Nine-Patch 影像117 讀者現在心中一定滿腹疑惑, 不知道這些設定成黑色的區域有何用途 沒關係, 我們會一一解答所有的疑問 首先在 png 檔上方和左邊的區域, 分別是用來設定水平和垂直方向可以重複擴展的部分 也就是說, 如果把這個 png 影像顯示在某一個介面元件中, 結果發現這個 png 影像的寬度無法填滿介面元件的寬, 那麼我們在 png 檔上方標示的黑色區域 ( 或者更明確地說是黑色區域下方罩住的那一整塊區域 ), 就會被重複使用直到填滿寬度不夠的部分 同樣的道理, 如果 png 影像的高度不夠填滿介面元件的高, 那麼 png 檔左邊標示的黑色區域就會被重複使用, 以填滿高度不夠的部分 現在讀者再仔細看一下圖 12-4 程式畫面右邊的部分, 最上面的圖就是模擬 png 影像長高後的情況, 中間的圖是模擬 png 影像變寬後的情況, 最下面的圖是模擬同時長高又變寬之後的情況 我們可以看到利用這種 Nine-Patch 的標示技術, 可以讓影像在變大之後, 四個角落的形狀都維持不變, 這就是使用 Nine-Patch 影像的目的 現在剩下的問題是圖 12-4 中的影像右邊和下方的黑色區域, 究竟有何功能? 其實很簡單, 它們是用來標示 png 影像中, 可以顯示 內容 ( 通常是文字 ) 的位置 因為 Nine-Patch 影像一般是用來當成介面元件的背景, 因此還會有一個前景的部分需要顯示 利用這個右邊和下方的區域, 我們可以指定前景內容應該顯示的位置 讀者再重新檢視一下圖 12-4 右邊的三個 png 影像模擬結果, 其中比較深色的區域就是我們指定前景內容顯示的位置, 讀者對照一下我們在影像右邊和下方標示的黑色區域就可以瞭解 編輯好 Nine-Patch 影像之後, 點選左上方選單的 File > Save 9-patch 就可以完成儲存 補充說明 Nine-Patch 影像編輯程式的操作技巧這個 Nine-Patch 影像編輯程式的功能很陽春, 如果原來開啟的是 Nine-Patch 影像檔, 修改之後再儲存時會直接蓋掉原來的檔案, 無法另存新檔 如果原來開啟的是 png 檔, 則會顯示另存新檔的檔名對話盒 因此如果是要修改 Nine-Patch 影像檔, 然後儲存成另一個新檔, 必須先用 Windows 檔案總管複製出另一個新檔之後, 再用 Nine-Patch 影像編輯程式開啟進行修改, 然後就可以直接儲存
118 12-2 範例程式 接下來我們用一個簡單的程式專案, 示範使用 Nine-Patch 影像和一般影像的差別 我們會在這個程式專案中建立 5 個按鈕, 第一個按鈕使用一般影像檔作為背景, 其餘四個按鈕則用不同設定的 Nine-Patch 影像檔作為背景 藉由觀察這些按鈕的背景形狀和文字位置的差別, 讀者就可以完全瞭解 Nine-Patch 影像的功能, 建立這個程式專案的步驟如下 : 先依照前一小節介紹的方法, 建立一個 30x30 的 png 影像檔如圖 12-1, 它的背景是透明的, 檔名叫做 bg.png 利用前一個小節介紹的方法, 根據步驟一的 png 檔, 建立四個 Nine- Patch 影像檔 這些 Nine-Patch 影像檔的內容如圖 12-5, 並分別命名為 bg _center.9.png bg _center_left.9.png bg _up_center.9.png bg _up_left.9.png 圖 12-5 程式專案使用的四個 Nine-Patch 影像檔 執行 Eclipse 新增一個 Android App 專案, 專案屬性對話盒的設定依照之前的慣例即可 建立好程式專案之後, 介面佈局檔會自動開啟在編輯視窗中, 我們先將介面佈局檔的元件編排模式改成 LinearLayout( 操作提示 : 先將介面佈局檔的編輯模式切換成 Graphical Layout, 再用滑鼠右鍵點選編輯視窗右邊的 Outline 窗格中的 RelativeLayout 元件, 然後點選其中的 Change Layout 項目, 再從對話盒的下拉式清單中選擇 LinearLayout (Vertical))
單元12 神奇又好用的Nine-Patch 影像119 在介面佈局檔中加入 5 個 Button 元件, 並設定好它們的 background 所 使用影像檔如下 : <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity" android:gravity="center_horizontal" > <Button android:text=" 使用一般影像作為背景 " android:background="@drawable/bg" android:layout_margintop="20dp" /> <Button android:text=" 使用 9-patch 影像作為背景 " android:background="@drawable/bg _center" android:layout_margintop="20dp" /> <Button android:text=" 使用 9-patch 影像作為背景 " android:background="@drawable/bg _center_left" android:layout_margintop="20dp" /> <Button android:text=" 使用 9-patch 影像作為背景 " android:background="@drawable/bg _up_center" android:layout_margintop="20dp" /> <Button android:text=" 使用 9-patch 影像作為背景 "
120 android:background="@drawable/bg _up_left" android:layout_margintop="20dp" /> </LinearLayout> 建立好程式專案之後啟動程式, 就可以看到如圖 12-6 的畫面 我們很容易地就可以看出使用一般影像檔, 和使用 Nine-Patch 影像檔的差別 另外再仔細比較一下第二到第五個按鈕上的文字位置, 就可以察覺它們之間的不同 如果要讓程式畫面變得比較美觀和精緻, 就必須善用 Nine-Patch 影像, 建立不同形狀和顏色的背景, 再根據程式的操作狀態, 套用不同的 Nine-Patch 影像, 後續單元會再介紹其它的實作範例 圖 12-6 使用一般影像檔和使用 Nine-Patch 影像檔的按鈕