II Android 手 機 程 式 設 計 入 門 應 用 到 精 通 推 薦 序 中 央 研 究 院 資 訊 科 學 研 究 所 黃 文 良 教 授 近 年 來 由 於 3G 網 路 普 及, 硬 體 運 算 效 能 提 升, 再 加 上 各 式 應 用 軟 體 的 靈 活 便 利 性, 智 慧 型 手 機 漸 漸 取 代 傳 統 行 動 電 話 融 入 日 常 生 活, 包 括 電 子 郵 件 網 頁 瀏 覽 影 音 播 放 地 圖 查 詢 拍 照 攝 影, 各 種 功 能 隨 手 呈 現 即 時 互 動 帶 來 無 比 方 便 彈 性 這 種 普 遍 需 求 現 象 也 反 映 在 許 多 手 機 品 牌 的 亮 麗 銷 售 數 據 上 我 們 可 以 預 期 在 通 訊 成 本 持 續 降 低, 雲 端 運 算 逐 步 成 熟, 網 路 早 已 無 所 不 至 的 時 代, 通 過 不 斷 發 表 優 異 產 品, 增 進 各 項 周 邊 機 能, 以 及 提 出 更 多 元 型 態 的 應 用 服 務, 智 慧 型 手 機 終 將 成 為 數 位 生 活 不 可 或 缺 的 重 要 幫 手 Android 平 台 基 於 Linux 開 放 核 心 架 構, 對 於 硬 體 設 計 製 造 充 滿 彈 性, 容 易 區 隔 銷 售 對 象 自 行 規 劃 產 品, 自 從 2007 年 底 正 式 公 布 以 來 深 受 各 家 手 機 製 造 商 支 持, 結 合 最 新 處 理 器 與 周 邊 元 件, 不 斷 推 出 各 種 智 慧 型 手 機, 並 且 依 照 功 能 與 價 格 提 供 消 費 者 多 樣 化 的 選 擇 在 應 用 上,Android 平 台 充 分 發 揮 新 型 處 理 器 運 算 效 能, 呈 現 高 品 質 圖 形 與 音 效, 更 直 接 具 備 各 式 Google 服 務, 包 括 網 頁 瀏 覽 搜 尋 地 圖 定 位 語 音 處 理 等 等 Android Market 線 上 軟 體 商 店 提 供 了 無 數 程 式 : 軟 體 工 具 商 務 應 用 遊 戲 電 子 書 新 聞 氣 象 交 通 旅 遊..., 供 使 用 者 直 接 以 手 機 分 類 瀏 覽 檢 索 線 上 購 買 下 載 安 裝 或 更 新, 不 斷 延 伸 手 機 功 能 按 照 現 行 發 展 趨 勢,Android 手 機 應 用 將 會 更 多 元 化 更 豐 富, 並 且 具 備 更 完 整 的 商 務 應 用 支 援 如 果 說 智 慧 型 手 機 的 出 現 重 新 定 義 了 行 動 通 訊, 那 麼 在 此 時 此 刻 與 即 將 來 臨 的 年 代, 各 式 應 用 軟 體 功 能 所 提 供 服 務 品 質 的 深 度 與 廣 度, 也 將 重 新 書 寫 手 機 平 台 的 價 值 有 別 於 早 期 異 質 平 台 開 發 經 驗,Android 應 用 程 式 開 發 資 源 取 得 方 式 十 分 簡 單, 相 關 工 具 皆 可 在 網 站 上 自 由 下 載, 並 且 輕 易 適 用 於 Windows MAC Linux 作 業 系 統 這 種 配 置 便 利 性 簡 化 了 軟 體 系 統 開 發 成 本, 對 於 學 習 者 而 言 更 是 友 善 親 切 此 外,Android 架 構 在 先 天 規 劃 上 區 隔 了 作 業 系 統 核 心 與 應 用 介 面 層, 開 發
推 薦 序 III 者 使 用 Java 語 言 專 注 於 應 用 程 式 本 身 的 設 計 編 寫, 再 透 過 標 準 架 構 類 別 函 式 呼 叫 與 系 統 互 動, 這 種 方 式 不 但 降 低 設 計 與 除 錯 複 雜 度, 也 免 除 許 多 非 必 要 的 工 程 負 擔 從 開 發 工 具 的 取 得, 到 最 後 應 用 成 果 的 發 布 方 式, 其 中 開 放 與 標 準 化 架 構 的 精 神, 更 使 我 們 的 設 計 研 發 無 須 受 限 於 單 一 品 牌 廠 商 與 特 定 商 品, 就 數 位 文 明 歷 史 來 看, 這 應 該 也 是 應 用 領 域 長 期 發 展 持 續 繁 榮 的 重 要 基 礎 在 實 務 上, 無 論 是 初 學 者 或 專 業 設 計 師, 備 妥 合 適 的 參 考 工 具 將 使 我 們 事 半 功 倍, 雖 然 我 們 可 透 過 網 路 找 到 豐 富 而 開 放 的 線 上 原 始 碼 範 例 或 各 討 論 區 的 技 術 解 決 方 案, 一 本 精 心 規 劃 妥 善 編 排 的 參 考 書 所 帶 來 的 即 時 助 益 仍 是 無 可 取 代 的 本 書 作 者 孫 宏 明 老 師 具 有 長 期 教 學 與 實 務 設 計 經 驗, 熟 悉 各 種 電 腦 語 言 程 式 設 計 影 像 處 理 電 腦 圖 學 電 腦 視 覺 電 腦 遊 戲 設 計 等 領 域, 指 導 學 生 參 加 大 專 程 式 設 計 競 賽 取 得 豐 碩 成 果 本 書 編 排 方 式 由 淺 入 深 循 序 漸 進, 將 相 關 知 識 與 技 巧 詳 細 解 說 呈 現, 搭 配 各 種 實 例 練 習, 又 可 透 過 章 節 主 題 直 接 尋 找 特 定 解 決 方 案, 巧 妙 涵 蓋 學 習 與 實 務 不 同 層 次 需 求, 相 信 能 為 讀 者 帶 來 有 效 的 幫 助, 輕 鬆 提 升 程 式 開 發 技 藝, 解 決 各 種 疑 難 狀 況
IV Android 手 機 程 式 設 計 入 門 應 用 到 精 通 推 薦 序 國 立 清 華 大 學 資 訊 工 程 學 系 賴 尚 宏 教 授 我 和 孫 老 師 認 識 已 有 十 年 的 時 間, 我 們 剛 認 識 當 時 孫 老 師 在 業 界 軟 體 公 司 負 責 新 技 術 的 研 發, 他 和 許 多 大 學 的 教 授 及 研 究 生 一 起 合 作 相 關 的 研 究 計 畫 雖 然 當 時 是 我 們 與 他 首 次 合 作, 但 是 孫 老 師 發 揮 他 負 責 及 親 切 的 特 性, 非 常 詳 細 及 精 確 的 提 供 我 們 整 個 計 畫 的 目 標 及 要 求, 孫 老 師 不 僅 在 專 業 領 域 有 很 深 厚 的 基 礎, 其 溝 通 與 協 調 的 能 力 也 是 很 令 人 讚 賞 現 在 孫 老 師 願 意 針 對 手 機 程 式 設 計 這 個 新 領 域, 將 自 己 累 積 多 年 的 程 式 開 發 技 術 和 經 驗, 結 合 目 前 當 紅 的 Android 手 機 平 台 程 式 設 計, 編 寫 成 適 合 入 門 學 習 的 書 籍, 實 在 是 學 習 Android 手 機 程 式 設 計 者 的 一 大 福 音 孫 老 師 後 來 離 開 業 界 到 大 學 教 書, 轉 眼 之 間 已 經 教 授 程 式 設 計 相 關 課 程 超 過 六 年 的 時 間, 他 擅 長 各 種 程 式 語 言 包 括 C/C++ Java 和 VB, 以 及 許 多 應 用 領 域, 例 如 影 像 處 理 與 辨 識 電 腦 圖 學 遊 戲 程 式 設 計 等 以 及 UML 軟 體 工 程, 所 開 授 的 課 程 相 當 受 到 學 生 的 喜 愛 由 於 他 在 應 用 程 式 設 計 具 有 深 厚 的 專 業 背 景, 所 編 寫 的 這 本 書 內 容 非 常 精 彩 豐 富, 不 僅 內 容 的 廣 度 涵 蓋 Android 程 式 技 術 的 各 種 學 習 主 題, 同 時 還 包 括 目 前 熱 門 的 應 用, 像 是 遊 戲 程 式 所 需 的 2D 和 3D 繪 圖, 以 及 Google 地 圖 服 務 孫 老 師 將 他 親 切 及 講 解 仔 細 周 延 的 特 色 融 入 於 文 字 敘 述 中, 使 得 本 書 不 僅 邏 輯 及 描 述 非 常 清 楚, 而 且 在 程 式 範 例 的 設 計 和 編 排 上 也 顧 及 初 學 者 的 需 要, 讀 來 非 常 輕 鬆 流 暢, 相 信 閱 讀 本 書 必 能 提 高 讀 者 的 學 習 興 趣 和 成 效 如 果 讀 者 想 要 加 入 Android 程 式 開 發 的 行 列, 我 相 信 這 本 書 必 能 給 予 很 大 的 助 益!
推 薦 序 推 薦 序 V 國 立 臺 灣 大 學 資 訊 工 程 學 系 博 士 後 研 究 開 南 大 學 資 訊 管 理 學 系 李 盛 安 助 理 教 授 Android 在 兩 年 前 還 是 一 個 一 般 民 眾 不 太 熟 悉 的 名 字, 雖 然 當 時 在 業 界 已 經 是 個 成 熟 的 環 境, 很 感 謝 google 大 力 的 支 持, 這 兩 年 來 讓 Linux 為 基 礎 的 作 業 系 統 能 夠 在 行 動 裝 置 中 運 行, 同 時 也 照 顧 了 廣 大 的 Java 開 發 與 愛 好 者 欣 聞 孫 老 師 邀 請 我 幫 忙 寫 Android 書 籍 的 推 薦 序, 我 與 孫 老 師 這 兩 年 間 參 與 了 Android 相 關 課 程 的 教 授, 除 了 Android 一 般 的 課 程 外, 孫 老 師 在 影 像 處 理 與 遊 戲 軟 體 設 計 與 開 發 方 面 有 長 足 的 經 驗, 在 書 中 他 也 分 享 了 重 要 的 心 得 與 整 理 了 重 要 的 資 料 孫 老 師 平 日 與 同 學 有 良 好 的 互 動, 多 年 來 的 認 真 教 學 讓 我 相 信 他 編 寫 的 書 一 定 具 有 良 好 的 水 準 與 品 質 這 兩 年 間, 坊 間 也 出 了 不 少 Android 的 教 學 書 籍 這 些 書 籍 適 合 不 同 層 次 的 學 習 者 與 開 發 者, 有 的 例 子 較 少, 著 重 案 例 與 觀 念 的 講 解, 適 合 初 學 者, 而 有 的 例 子 很 多, 多 到 像 是 一 本 電 話 簿, 對 於 進 階 的 應 用 與 開 發 多 有 著 墨 在 此, 我 要 推 薦 給 大 家 這 本 由 孫 老 師 精 心 編 寫 的 Android 教 學 書 籍, 其 中 包 含 許 多 重 要 主 題 單 元, 內 容 非 常 豐 富, 討 論 了 非 常 多 的 例 子 個 人 認 為 這 是 一 本 非 常 好 的 學 習 手 冊 與 工 具 書, 非 常 適 合 在 已 經 具 備 Java 語 言 基 礎 後, 直 接 進 行 Android 程 式 開 發 時 放 在 案 頭 的 一 本 學 習 與 參 考 範 例 書 中 的 內 容 除 了 教 導 初 學 者 如 何 使 用 Android 視 窗 元 件 開 發 手 機 程 式 之 外, 也 分 享 了 重 要 的 程 式 除 錯 經 驗 與 技 巧, 對 於 初 學 者 是 非 常 重 要 的 對 於 多 執 行 序 如 何 配 合 視 窗 元 件 一 起 使 用 如 何 在 不 同 的 Activity 間 互 動 傳 遞 與 交 換 資 料, 都 有 深 入 的 探 討 與 解 釋, 這 些 單 元 對 於 學 習 如 何 在 Android 平 台 開 發 一 個 快 速 且 有 效 的 程 式 將 會 非 常 受 用
PART 影 像 相 關 的 介 面 元 件 單 元 24 ImageButton 和 ImageView 介 面 元 件 單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 單 元 26 使 用 動 畫 效 果 單 元 27 GridView 介 面 元 件 單 元 28 幫 ListView 加 上 小 圖 示
單 152 Part 5 影 像 相 關 的 介 面 元 件 24 元 ImageButton 和 ImageView 介 面 元 件 I magebutton 介 面 元 件 和 前 面 介 紹 過 的 Button 元 件 功 能 完 全 相 同, 唯 一 的 差 別 是 Button 元 件 上 顯 示 的 是 文 字,ImageButton 元 件 上 顯 示 的 是 影 像, 因 此 ImageButton 讓 我 們 可 以 用 比 較 生 動 有 趣 的 方 式 來 表 示 按 鈕 ImageButton 元 件 上 的 影 像 必 須 置 於 專 案 的 res/drawable 資 料 夾 裡 面, 影 像 檔 的 格 式 可 以 是 png jpg 或 是 gif 舉 例 來 說, 我 們 可 以 在 專 案 的 res/layout 資 料 夾 下 的 介 面 佈 局 檔 中 增 加 一 個 ImageButton 元 件 如 下 : <ImageButton android:id="@+id/imgbtn" android:layout_width="wrap_content" android:src="@drawable/ 影 像 檔 名 " 這 個 ImageButton 元 件 必 需 指 定 一 個 id 名 稱 以 便 在 程 式 中 進 行 設 定 它 上 面 顯 示 的 影 像 則 由 android:src 屬 性 決 定 我 們 必 須 在 程 式 碼 中 建 立 並 設 定 ImageButton 元 件 的 OnClickListener 物 件 ( 就 像 是 之 前 使 用 Button 元 件 時 一 樣 ), 這 樣 當 使 用 者 按 下 按 鈕 之 後 就 會 執 行 程 式 ImageButton 的 目 的 是 讓 按 鈕 的 外 觀 比 較 富 有 變 化, 如 果 只 要 顯 示 影 像 供 使 用 者 觀 看, 就 必 須 使 用 ImageView 元 件 ImageView 元 件 同 樣 是 使 用 android:src 屬 性 設 定 要 顯 示 的 影 像 檔, 請 參 考 以 下 範 例 : <ImageView android:id="@+id/imgview" android:layout_width="wrap_content" android:src="@drawable/ 影 像 檔 名 "
單 元 24 ImageButton 和 ImageView 介 面 元 件 153 如 果 在 程 式 執 行 的 過 程 中 想 要 改 變 ImageView 元 件 上 所 顯 示 的 影 像, 可 以 呼 叫 它 的 setimageresource() 方 法, 該 方 法 可 以 從 專 案 的 資 源 類 別 R 中 載 入 其 它 影 像 檔 在 此 要 提 醒 讀 者 的 一 點 是, 資 源 類 別 R 中 的 影 像 檔 都 是 從 res/drawable 資 料 夾 下 的 檔 案 轉 換 過 來 的, 如 果 讀 者 利 用 Windows 檔 案 總 管 在 該 資 料 夾 中 新 增 或 是 刪 除 檔 案, 必 須 先 在 Eclipse 左 邊 的 專 案 瀏 覽 視 窗 中 選 定 該 程 式 專 案, 然 後 再 選 擇 主 選 單 中 的 File>Refresh 來 更 新 資 源 類 別 R 的 內 容 接 下 來 就 讓 我 們 利 用 本 單 元 介 紹 的 ImageButton 和 ImageView 介 面 元 件, 幫 之 前 完 成 的 電 腦 猜 拳 遊 戲 程 式 進 行 操 作 介 面 的 改 良 主 要 的 改 變 是 把 操 作 介 面 中 的 剪 刀 石 頭 和 布 等 文 字 換 成 用 影 像 方 式 表 示, 這 樣 不 但 可 以 增 加 程 式 畫 面 的 美 觀, 而 且 也 比 較 方 便 讓 使 用 者 判 斷 輸 贏 的 結 果, 圖 24-1 是 程 式 的 執 行 畫 面 以 下 是 修 改 後 的 介 面 佈 局 檔 和 程 式 檔, 粗 體 字 表 示 修 改 的 部 分 介 面 佈 局 檔 : 圖 24-1 使 用 ImageButton 和 ImageView 介 面 元 件 改 良 電 腦 猜 拳 遊 戲 的 操 作 畫 面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/txttitle"
154 Part 5 影 像 相 關 的 介 面 元 件 android:layout_width="wrap_content" android:text="@string/prompttitle" android:textsize="40sp" android:textcolor="#ff00ff" android:textstyle="bold" android:layout_centerhorizontal="true" android:paddingleft="20dp" android:paddingright="20dp" android:layout_margintop="20dp" android:layout_marginbottom="20dp" <TextView android:id="@+id/txtcom" android:layout_width="wrap_content" android:text="@string/promptcomplay" android:layout_below="@id/txttitle" android:layout_alignleft="@id/txttitle" android:textsize="20sp" android:layout_marginbottom="20dp" <TextView android:id="@+id/txtmyplay" android:layout_width="wrap_content" android:text="@string/promptmyplay" android:layout_below="@id/txttitle" android:layout_alignright="@id/txttitle" android:textsize="20sp" android:layout_marginbottom="20dp" <ImageButton android:id="@+id/btnscissors" android:layout_width="wrap_content" android:src="@drawable/scissors" android:layout_below="@id/txtmyplay" android:layout_alignleft="@id/txtmyplay" android:paddingleft="15dp" android:paddingright="15dp" <ImageView android:id="@+id/imgcomplay" android:layout_width="wrap_content" android:layout_below="@id/btnscissors"
單 元 24 ImageButton 和 ImageView 介 面 元 件 155 android:layout_alignleft="@id/txtcom" <ImageButton android:id="@+id/btnstone" android:layout_width="wrap_content" android:src="@drawable/stone" android:layout_below="@id/btnscissors" android:layout_alignleft="@id/btnscissors" android:paddingleft="15dp" android:paddingright="15dp" <ImageButton android:id="@+id/btnnet" android:layout_width="wrap_content" android:src="@drawable/net" android:layout_below="@id/btnstone" android:layout_alignleft="@id/btnstone" android:paddingleft="15dp" android:paddingright="15dp" <TextView android:id="@+id/txtresult" android:layout_width="wrap_content" android:text="@string/result" android:layout_below="@id/btnnet" android:layout_alignleft="@id/txtcom" android:textsize="20sp" android:textcolor="#0fffff" android:layout_margintop="20dp" </RelativeLayout> 程 式 檔 : package tw.android; import android.app.activity; import android.app.alertdialog; import android.os.bundle; import android.view.view; import android.widget.*; public class Game extends Activity {
156 Part 5 影 像 相 關 的 介 面 元 件 /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); setupviewcomponent(); private TextView txtresult; private ImageView imgcomplay; private ImageButton btnscissors, btnstone, btnnet; private void setupviewcomponent() { imgcomplay = (ImageView)findViewById(R.id.imgComPlay); txtresult = (TextView)findViewById(R.id.txtResult); btnscissors = (ImageButton)findViewById(R.id.btnScissors); btnstone = (ImageButton)findViewById(R.id.btnStone); btnnet = (ImageButton)findViewById(R.id.btnNet); btnscissors.setonclicklistener(btnscissorslin); btnstone.setonclicklistener(btnstonelin); btnnet.setonclicklistener(btnnetlin); private Button.OnClickListener btnscissorslin = new Button. OnClickListener() { public void onclick(view v) { // 決 定 電 腦 出 拳. int icomplay = (int)(math.random()*3 + 1); // 1 剪 刀, 2 石 頭, 3 布. if (icomplay == 1) { imgcomplay.setimageresource(r.drawable.scissors); txtresult.settext(getstring(r.string.result) + getstring(r.string.playerdraw)); else if (icomplay == 2) { imgcomplay.setimageresource(r.drawable.stone); txtresult.settext(getstring(r.string.result) + getstring(r.string.playerlose));
單 元 24 ImageButton 和 ImageView 介 面 元 件 157 ; else { imgcomplay.setimageresource(r.drawable.net); txtresult.settext(getstring(r.string.result) + getstring(r.string.playerwin)); private Button.OnClickListener btnstonelin = new Button. OnClickListener() { public void onclick(view v) { // 修 改 部 分 同 btnscissorslin ; { private Button.OnClickListener btnnetlin = new Button.OnClickListener() ; public void onclick(view v) { // 修 改 部 分 同 btnscissorslin 和 原 來 的 程 式 碼 相 較 之 下, 其 實 修 改 的 部 分 並 不 多 在 介 面 佈 局 檔 的 部 分 就 是 把 原 來 的 Button 改 成 使 用 ImageButton 並 設 定 適 當 的 影 像 檔, 另 外 也 將 電 腦 出 拳 的 結 果 換 成 使 用 ImageView 元 件 顯 示 在 程 式 檔 中 也 只 是 更 動 和 介 面 顯 示 相 關 的 部 分, 程 式 的 運 算 邏 輯 並 沒 有 改 變
單 158 Part 5 影 像 相 關 的 介 面 元 件 25 元 ImageSwitcher 和 Gallery 介 面 元 件 影 像 是 目 前 手 機 上 很 常 見 的 一 種 資 料, 而 且 幾 乎 每 一 支 新 型 手 機 都 已 經 具 備 照 相 的 功 能 為 了 能 夠 方 便 觀 看 手 機 上 的 影 像, 許 多 手 機 都 有 提 供 影 像 瀏 覽 的 功 能 這 個 單 元 就 讓 我 們 來 學 習 如 何 做 一 個 影 像 瀏 覽 程 式, 這 個 程 式 的 名 稱 就 稱 之 為 影 像 畫 廊 要 完 成 影 像 畫 廊 程 式 必 須 使 用 二 個 影 像 相 關 的 介 面 元 件 :Gallery 和 ImageSwitcher Gallery 元 件 是 提 供 影 像 縮 圖 的 瀏 覽 功 能, 它 可 以 將 許 多 影 像 縮 圖 排 成 一 列 讓 使 用 者 檢 視 並 點 選, 它 也 會 隨 著 使 用 者 的 操 作, 自 動 轉 換 影 像 縮 圖 的 位 置 圖 25-1 上 方 像 是 一 列 底 片 的 部 分 就 是 Gallery 介 面 元 件 除 了 Gallery 介 面 元 件 之 外, 還 需 要 一 個 可 以 顯 示 原 來 影 像 的 元 件 上 一 個 單 元 學 過 的 ImageView 雖 然 可 以 用 來 顯 示 影 像, 但 是 如 果 使 用 我 們 以 下 介 紹 的 ImageSwitcher 元 件, 更 可 以 做 到 生 動 有 圖 25-1 影 像 畫 廊 程 式 的 操 作 畫 面 趣 的 效 果 ImageSwitcher 元 件 顧 名 思 義 就 是 一 個 影 像 切 換 器, 它 裡 頭 其 實 就 是 ImageView 物 件, 只 是 當 其 中 顯 示 的 影 像 改 變 時, 可 以 自 動 完 成 影 像 切 換 過 程 中 的 動 畫 效 果, 像 是 淡 入 淡 出 (fade in/fade out) 圖 25-1 中 央 的 影 像 就 是 ImageSwitcher 元 件 這 個 影 像 畫 廊 程 式 的 操 作 方 式 就 是 使 用 者 藉 由 螢 幕 上 方 的 Gallery 元 件 瀏 覽 影 像 縮 圖 並 點 選 想 要 觀 看 的 影
單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 159 像, 點 選 後 Gallery 元 件 會 自 動 將 被 點 選 的 縮 圖 轉 到 中 央 的 位 置, 然 後 在 下 方 的 ImageSwitcher 元 件 中 顯 示 該 縮 圖 的 原 始 影 像, 在 顯 示 的 過 程 中 會 出 現 影 像 切 換 的 動 畫 效 果 接 著 就 讓 我 們 來 學 習 Gallery 元 件 和 ImageSwitcher 元 件 的 使 用 方 法 25-1 Gallery 元 件 的 使 用 方 法 使 用 Gallery 介 面 元 件 需 要 完 成 以 下 步 驟 : 在 專 案 的 res/layout 資 料 夾 下 的 介 面 佈 局 檔 中 建 立 一 個 Gallery 元 件 標 籤 並 加 以 命 名 和 設 定 屬 性 如 下 : <Gallery android:id="@+id/gal" android:layout_width="fill_parent" android:spacing="10dp" 其 中 的 android:spacing 屬 性 是 設 定 影 像 縮 圖 之 間 的 距 離 接 下 來 的 步 驟 都 在 程 式 檔 中 進 行 在 程 式 碼 中 呼 叫 findviewbyid() 方 法 取 得 上 述 的 Gallery 元 件 Gallery gal = (Gallery) findviewbyid(r.id.gal); 建 立 一 個 衍 生 自 BaseAdapter 的 類 別, 我 們 可 以 將 它 取 名 為 ImageAdapter 這 個 類 別 的 功 能 是 管 理 影 像 縮 圖 陣 列, 並 提 供 給 Gallery 元 件 使 用, 在 影 像 畫 廊 程 式 中 我 們 呼 叫 Gallery 物 件 的 setadapter() 方 法, 將 ImageAdapter 物 件 傳 給 Gallery ImageAdapter 類 別 中 的 getview() 方 法 是 負 責 將 指 定 的 影 像 縮 圖 放 到 ImageView 物 件 中, 以 供 Gallery 元 件 顯 示 使 用 ImageAdapter 類 別 中 的 方 法 是 提 供 給 Android 系 統 呼 叫 使 用, 我 們 的 程 式 不 會 直 接 呼 叫 這 些 的 方 法 建 立 ImageAdapter 類 別 的 詳 細 步 驟 請 參 考 後 面 說 明
160 Part 5 影 像 相 關 的 介 面 元 件 建 立 一 個 AdapterView.OnItemSelectedListener 物 件 並 設 定 給 步 驟 2 中 的 Gallery 物 件 AdapterView.OnItemSelectedListener 物 件 的 功 能 是 當 使 用 者 在 Gallery 元 件 上 點 選 某 一 個 影 像 縮 圖 時, 把 該 縮 圖 所 對 應 的 原 始 影 像 顯 示 在 ImageSwitcher 元 件 中 private AdapterView.OnItemSelectedListener adaviewitemsellis = new AdapterView.OnItemSelectedListener () { public void onitemselected(adapterview parent, View v, int position, long id) { imgswi.setimageresource(imgarr[position]); public void onnothingselected(adapterview parent) { ; 在 此 提 醒 讀 者 一 個 操 作 技 巧, 輸 入 程 式 碼 時 先 完 成 物 件 宣 告 的 語 法, 也 就 是 程 式 碼 中 粗 體 字 的 部 分, 把 裡 面 的 方 法 先 空 下 來, 這 時 候 在 這 一 段 程 式 碼 會 標 示 一 個 語 法 錯 誤, 將 滑 鼠 游 標 移 到 紅 色 波 浪 底 線 上, 就 會 彈 出 一 個 說 明 視 窗 建 議 修 改 方 法, 點 選 其 中 建 議 的 修 改 方 法 後, 就 會 在 程 式 碼 中 插 入 這 二 個 方 法, 然 後 再 自 行 輸 入 程 式 碼 不 過 這 種 方 法 有 一 個 缺 點, 就 是 插 入 程 式 碼 的 引 數 名 稱 都 是 用 arg 命 名 看 不 出 引 數 的 功 用 因 此 建 議 讀 者 另 一 個 方 法, 就 是 用 網 頁 瀏 覽 器 查 詢 Android SDK 資 料 夾 中 的 說 明 文 件 ( 如 單 元 11 的 介 紹 ), 找 到 AdapterView.OnItemSelectedListener 物 件 的 說 明, 然 後 複 製 這 二 個 方 法 的 格 式, 就 會 有 比 較 好 的 引 數 命 名 上 述 第 3 個 步 驟 所 建 立 的 ImageAdapter 類 別 是 獨 自 放 在 一 個 新 的 Java 程 式 檔 中, 檔 名 為 ImageAdapter.java 讀 者 如 果 不 清 楚 如 何 在 Eclipse 的 程 式 專 案 中 新 增 一 個 類 別, 可 以 參 考 下 列 步 驟 : 在 Eclipse 左 邊 的 專 案 瀏 覽 視 窗 中 點 選 專 案 名 稱 >src>( 套 件 名 稱 ) 在 該 套 件 名 稱 上 按 下 滑 鼠 右 鍵, 在 彈 出 的 選 單 中 選 擇 New>Class, 就 會 看 到 圖 25-2 的 對 話 盒
單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 161 圖 25-2 新 增 類 別 對 話 盒 在 對 話 盒 中 的 Name 欄 位 輸 入 ImageAdapter( 也 就 是 我 們 想 要 的 類 別 名 稱 ), 然 後 按 下 在 Superclass 欄 位 右 邊 的 Browse 按 鈕, 在 出 現 的 對 話 盒 的 最 上 面 的 欄 位 輸 入 BaseAdapter, 下 方 清 單 就 會 顯 示 BaseAdapter 類 別, 用 滑 鼠 快 按 二 下 該 類 別 就 會 自 動 回 到 原 來 的 對 話 盒, 並 完 成 填 入 Superclass 欄 位 按 下 Finish 按 鈕 在 Eclipse 中 央 的 程 式 碼 視 窗 中 就 會 出 現 ImageAdapter.java 程 式 檔 的 編 輯 畫 面, 讀 者 可 以 開 始 輸 入 程 式 碼 ImageAdapter 類 別 的 程 式 碼 如 下 : package tw.android; import android.content.context; import android.view.*; import android.widget.*; import android.widget.gallery.layoutparams;
162 Part 5 影 像 相 關 的 介 面 元 件 public class ImageAdapter extends BaseAdapter { private Context cont; private Integer[] imgarr; public ImageAdapter(Context c) { cont = c; public void setimagearray(integer[] imgarr) { this.imgarr = imgarr; @Override public int getcount() { // TODO Auto-generated method stub return imgarr.length; @Override public Object getitem(int position) { // TODO Auto-generated method stub return position; @Override public long getitemid(int position) { // TODO Auto-generated method stub return position; @Override public View getview(int position, View convertview, ViewGroup parent) { // TODO Auto-generated method stub ImageView v = new ImageView(cont); v.setimageresource(imgarr[position]); v.setadjustviewbounds(true); v.setlayoutparams(new Gallery.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); return v;
單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 163 在 ImageAdapter 類 別 中 有 二 個 屬 性, 其 中 的 cont 屬 性 是 用 來 儲 存 物 件 的 執 行 環 境 imgarr 屬 性 則 是 用 來 儲 存 縮 圖 陣 列, 縮 圖 陣 列 中 的 每 一 個 縮 圖 都 是 儲 存 它 的 資 源 id 編 號 setimagearray() 方 法 就 是 用 來 設 定 縮 圖 陣 列 其 它 的 方 法 包 括 getcount() getitem() getitemid() getview() 都 是 給 Android 系 統 呼 叫 使 用 在 getview() 方 法 中 我 們 先 建 立 一 個 ImageView 物 件, 然 後 把 要 顯 示 的 縮 圖 設 定 給 它, 再 設 定 好 顯 示 相 關 的 參 數, 最 後 傳 回 該 物 件 25-2 ImageSwitcher 元 件 的 使 用 方 法 ImageSwitcher 元 件 的 目 的 就 是 用 來 顯 示 影 像, 它 和 ImageView 元 件 的 差 異 是 ImageSwitcher 元 件 能 夠 設 定 影 像 切 換 時 的 轉 場 效 果 使 用 ImageSwitcher 介 面 元 件 的 步 驟 如 下 : 在 專 案 的 res/layout 資 料 夾 下 的 介 面 佈 局 檔 中 建 立 一 個 ImageSwitcher 標 籤 並 完 成 命 名 和 設 定 屬 性 如 下 : <ImageSwitcher android:id="@+id/imgswi" android:layout_width="fill_parent" android:layout_margintop="20dp" 在 程 式 專 案 的 主 類 別 ( 也 就 是 專 案 一 開 始 就 有 的 那 一 個 程 式 檔 ) 宣 告 的 第 一 行 加 上 下 列 粗 體 字 的 部 分 : public class 主 程 式 類 別 名 稱 extends Activity implements ViewSwitcher.ViewFactory { 這 一 行 程 式 碼 的 功 能 是 說 主 類 別 要 實 作 (implement ) ViewSwitcher.ViewFactory 這 個 介 面 該 介 面 中 定 義 了 一 個 makeview() 方 法, 而 ImageSwitcher 物 件 需 要 這 個 方 法 來 建 立 其 中 的 ImageView 物 件 makeview() 方 法 也 是 由 Android 系 統 呼 叫, 我 們 的 程 式 不 會 自 己 呼 叫 這 個 方 法 讓 主 類 別 實 作 ViewSwitcher.ViewFactory 介 面 的
164 Part 5 影 像 相 關 的 介 面 元 件 makeview() 方 法 後, 就 可 以 把 主 類 別 設 定 給 ImageSwitcher 物 件 makeview() 方 法 的 程 式 碼 如 下 : public View makeview() { ImageView v = new ImageView(this); v.setbackgroundcolor(0xff000000); v.setscaletype(imageview.scaletype.fit_center); v.setlayoutparams(new ImageSwitcher.LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); return v; 首 先 是 建 立 一 個 ImageView 物 件, 然 後 設 定 顯 示 相 關 的 參 數, 最 後 傳 回 該 ImageView 物 件 在 程 式 碼 中 呼 叫 findviewbyid() 方 法 取 得 步 驟 1 的 ImageSwitcher 元 件 呼 叫 ImageSwitcher 物 件 的 setfactory() 方 法, 並 且 把 主 類 別 物 件 傳 入 ( 使 用 this) 然 後 呼 叫 ImageSwitcher 物 件 的 setinanimation() 和 setoutanimation() 方 法 指 定 影 像 切 換 時 的 動 畫 效 果, 以 上 步 驟 的 程 式 碼 如 下 : ImageSwitcher imgswi = (ImageSwitcher) findviewbyid(r.id.imgswi); imgswi.setfactory(this); imgswi.setinanimation(animationutils.loadanimation(this, android.r.anim.fade_in)); imgswi.setoutanimation(animationutils.loadanimation(this, android.r.anim.fade_out)); 以 上 的 範 例 是 使 用 Android 系 統 提 供 的 淡 入 淡 出 (fade in/fade out) 效 果
單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 165 25-3 完 成 影 像 畫 廊 程 式 和 前 面 的 範 例 程 式 相 較 之 下, 影 像 畫 廊 程 式 需 要 比 較 多 的 步 驟 和 程 式 碼, 而 且 它 的 運 作 流 程 也 比 較 複 雜, 因 為 ImageSwitcher 元 件 和 Gallery 元 件 都 需 要 額 外 的 方 法 和 物 件 才 能 運 作, 而 且 這 些 方 法 和 物 件 是 提 供 給 Android 系 統 呼 叫 使 用, 而 不 是 由 我 們 的 程 式 碼 直 接 呼 叫, 所 以 剛 開 始 讀 者 會 覺 得 有 些 複 雜 但 是 相 信 只 要 讀 者 仔 細 參 考 以 上 的 解 說, 再 自 己 動 手 實 作 一 次 程 式, 應 該 就 能 完 全 瞭 解 最 後 我 們 列 出 程 式 的 完 整 介 面 佈 局 檔 和 主 類 別 程 式 檔 供 讀 者 參 考, ImageAdapter 程 式 檔 已 經 列 於 前 面 的 步 驟 說 明 中, 以 下 再 附 加 二 點 說 明 : 1 2 程 式 顯 示 的 影 像 檔 是 儲 存 在 imgarr 陣 列 中, 該 陣 列 是 Integer 型 態, 因 為 它 只 需 記 錄 影 像 檔 在 資 源 類 別 R 中 的 id 編 號 即 可 影 像 縮 圖 則 是 儲 存 在 thumbimgarr 陣 列, 該 陣 列 同 樣 是 Integer 型 態, 因 為 它 也 是 記 錄 資 源 類 別 R 中 的 id 編 號 ImageSwitcher 元 件 和 Gallery 元 件 設 定 的 相 關 程 式 碼 都 集 中 放 在 我 們 自 己 建 立 的 setupviewcomponent() 方 法 中 介 面 佈 局 檔 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Gallery android:id="@+id/gal" android:layout_width="fill_parent" android:spacing="10dp" <ImageSwitcher android:id="@+id/imgswi" android:layout_width="fill_parent" android:layout_margintop="20dp" </LinearLayout>
166 Part 5 影 像 相 關 的 介 面 元 件 主 類 別 程 式 檔 : package tw.android; import android.app.activity; import android.os.bundle; import android.view.view; import android.view.animation.animationutils; import android.widget.*; import android.widget.gallery.layoutparams; public class ImageGallery extends Activity implements ViewSwitcher.ViewFactory { private ImageSwitcher imgswi; private Gallery gal; private Integer[] imgarr = { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08; private Integer[] thumbimgarr = { R.drawable.img01th, R.drawable.img02th, R.drawable.img03th, R.drawable.img04th, R.drawable.img05th, R.drawable.img06th, R.drawable.img07th, R.drawable.img08th; /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); setupviewcomponent(); private void setupviewcomponent() { // 從 資 源 類 別 R 中 取 得 介 面 元 件 並 設 定 相 關 屬 性 imgswi = (ImageSwitcher) findviewbyid(r.id.imgswi); imgswi.setfactory(this); // 必 須 implements ViewSwitcher.ViewFactory imgswi.setinanimation(animationutils.loadanimation(this, android.r.anim.fade_in));
單 元 25 ImageSwitcher 和 Gallery 介 面 元 件 167 imgswi.setoutanimation(animationutils.loadanimation(this, android.r.anim.fade_out)); ImageAdapter imgadap = new ImageAdapter(this); imgadap.setimagearray(thumbimgarr); gal = (Gallery) findviewbyid(r.id.gal); gal.setadapter(imgadap); gal.setonitemselectedlistener(adaviewitemsellis); public View makeview() { ImageView v = new ImageView(this); v.setbackgroundcolor(0xff000000); v.setscaletype(imageview.scaletype.fit_center); v.setlayoutparams(new ImageSwitcher.LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); return v; private AdapterView.OnItemSelectedListener adaviewitemsellis = new AdapterView.OnItemSelectedListener () { public void onitemselected(adapterview parent, View v, int position, long id) { imgswi.setimageresource(imgarr[position]); public void onnothingselected(adapterview parent) { ;
單 168 Part 5 影 像 相 關 的 介 面 元 件 26 元 使 用 動 畫 效 果 在 學 習 ImageSwitcher 介 面 元 件 時 我 們 第 一 次 體 驗 了 Android 應 用 程 式 的 動 畫 功 能, 當 時 我 們 只 簡 單 地 使 用 ImageSwitcher 物 件 的 setinanimation() 和 setoutanimation() 這 二 個 方 法, 就 可 以 完 成 影 像 切 換 時 的 淡 入 淡 出 效 果, 同 時 也 讓 程 式 的 操 作 畫 面 更 加 生 動 有 趣 在 這 個 單 元 中, 就 讓 我 們 進 一 步 學 習 如 何 在 Android 應 用 程 式 中 建 立 更 多 的 動 畫 效 果 Android 應 用 程 式 有 二 種 建 立 動 畫 的 方 式, 一 種 是 在 專 案 的 res 資 料 夾 下 建 立 動 畫 資 源 檔 (xml 檔 案 格 式 ), 該 動 畫 資 源 會 自 動 加 入 專 案 的 資 源 類 別 R 中, 程 式 再 從 資 源 類 別 中 載 入 動 畫 物 件 來 使 用 第 二 種 方 式 是 直 接 在 程 式 碼 中 建 立 動 畫 物 件 並 設 定 相 關 屬 性 Android 系 統 總 共 提 供 4 種 類 型 的 的 動 畫 效 果 : 1 Alpha 這 種 動 畫 效 果 是 藉 由 改 變 影 像 的 透 明 度 來 達 成 當 影 像 的 alpha 值 是 1 時, 表 示 影 像 完 全 不 透 明, 此 時 是 最 清 楚 的 狀 態 當 影 像 的 alpha 值 由 1 減 到 0 時, 影 像 變 的 愈 來 愈 透 明, 也 就 是 愈 來 愈 不 清 楚 直 到 看 不 見 (alpha 值 為 0) 2 Scale 這 種 動 畫 效 果 是 藉 由 改 變 影 像 的 大 小 來 達 成 影 像 的 scale 值 也 是 用 0~1 來 表 示 0 表 示 完 全 看 不 到,1 表 示 原 來 影 像 的 大 小 scale 值 可 以 在 x 和 y 二 個 方 向 獨 立 設 定 x 方 向 是 影 像 的 寬,y 方 向 是 影 像 的 高
單 元 26 使 用 動 畫 效 果 169 3 Translate 這 個 動 畫 效 果 是 藉 由 改 變 影 像 的 位 置 來 達 成 影 像 的 位 置 是 藉 由 x 和 y 方 向 上 的 位 移 量 來 決 定 4 Rotate 這 個 動 畫 效 果 是 藉 由 改 變 影 像 的 旋 轉 角 度 來 達 成 接 著 就 讓 我 們 來 看 看 如 何 建 立 動 畫 資 源 檔 26-1 建 立 動 畫 資 源 檔 我 們 把 建 立 動 畫 資 源 檔 的 過 程 分 成 下 列 7 個 步 驟 : 在 Eclipse 左 邊 的 專 案 瀏 覽 視 窗 中 打 開 專 案 下 的 res 資 料 夾 在 res 資 料 夾 上 按 下 滑 鼠 右 鍵, 再 從 彈 出 的 快 顯 選 單 中 選 擇 New>Folder, 就 會 出 現 圖 26-1 的 對 話 盒 圖 26-1 在 Eclipse 程 式 專 案 的 res 資 料 夾 中 新 增 anim 資 料 夾
170 Part 5 影 像 相 關 的 介 面 元 件 在 對 話 盒 中 的 Folder name 欄 位 輸 入 anim, 注 意 要 使 用 小 寫 英 文 字 母, 然 後 按 下 Finish 按 鈕 在 Eclipse 左 邊 的 專 案 瀏 覽 視 窗 中 會 出 現 新 增 的 anim 資 料 夾, 在 該 資 料 夾 上 按 下 滑 鼠 右 鍵, 再 從 彈 出 的 快 顯 選 單 中 選 擇 選 擇 New>File, 就 會 出 現 圖 26-2 的 對 話 盒 圖 26-2 新 增 動 畫 資 源 檔 的 對 話 盒 在 對 話 盒 中 的 File name 欄 位 輸 入 動 畫 資 源 檔 的 名 稱, 然 後 按 下 Finish 按 鈕 注 意 檔 名 只 能 用 小 寫 的 英 文 字 母 數 字 或 是 底 線 字 元, 不 可 以 使 用 大 寫 英 文 字 母, 例 如 anim_scale_out.xml 這 裡 的 每 一 個 檔 案 都 是 一 個 動 畫 效 果, 每 一 個 動 畫 效 果 都 可 以 是 單 獨 的 Alpha Scale Translate 或 是 Rotate 類 型 也 可 以 是 將 一 種 以 上 的 動 畫 類 型 結 合 起 來, 例 如 Scale 加 上 Rotate 由 於 在 ImageSwitcher 元 件 中 會 用 到 影 像 消 失 和 影 像 出 現 二 種 動 畫 效 果, 所 以 我 們 在 動 畫 資 源 檔 的 最 後 加 上 in 和 out 來 區 別,in 表 示 用 在 影 像 出 現 時 的 動 畫,out 表 示 用 在 影 像 消 失 時 的 動 畫
單 元 26 使 用 動 畫 效 果 171 用 滑 鼠 左 鍵 快 按 二 下 上 述 的 動 畫 資 源 檔 將 它 開 啟, 然 後 開 始 建 立 動 畫 元 件 並 設 定 相 關 屬 性 例 如 我 們 將 下 列 的 程 式 碼 寫 入 上 一 個 步 驟 建 立 的 anim_scale_out.xml 動 畫 資 源 檔 : <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/linear_interpolator" android:fromxscale="0.0" android:toxscale="1.0" android:fromyscale="0.0" android:toyscale="1.0" android:pivotx="50%" android:pivoty="50%" android:startoffset="3000" android:duration="3000" </set> 在 這 個 範 例 中 我 們 建 立 一 個 scale 類 型 的 動 畫 效 果, 它 是 用 <scale 標 籤 來 設 定 如 果 想 建 立 其 它 類 型 的 動 畫 效 果, 只 要 把 <scale 標 籤 換 成 其 它 動 畫 類 型 的 標 籤 即 可, 例 如 <translate 如 果 想 要 結 合 二 種 以 上 的 動 畫 類 型, 則 是 依 序 加 上 不 同 動 畫 類 型 的 標 籤, 後 續 我 們 會 有 實 際 範 例 完 成 以 上 動 畫 資 源 檔 後, 就 能 夠 在 程 式 碼 中 直 接 載 入 使 用, 例 如 我 們 將 上 一 個 單 元 建 立 的 影 像 畫 廊 程 式 中 的 imgswi 物 件, 改 成 使 用 我 們 自 行 建 立 的 anim_scale_out 動 畫 效 果, 程 式 碼 只 需 要 修 改 以 下 粗 體 字 的 部 分 即 可 imgswi.setoutanimation(animationutils.loadanimation(thiscont, R.anim.anim_scale_out)); 以 上 是 建 立 動 畫 資 源 檔 的 步 驟, 在 第 6 個 步 驟 中 是 以 scale 動 畫 類 型 為 範 例, 接 下 來 讓 我 們 進 一 步 學 習 如 何 建 立 各 種 不 同 的 動 畫 類 型