實驗三：替代資源檔設計 (多國語言和螢幕方向背景圖設計)

實驗三 實驗主題： 實驗目的： 環境需求： 建立一支援多國語言以及自動調適裝置螢幕方向的應用程式 藉由實驗程式了解利用替代資源檔應用方式 Java SE Development Kit (JDK) Android SDK Eclipse ADT 本實驗會建立一個應用程式，當螢幕為橫向或直向時，分別會對應到不同的背景圖片 並且會透過使用者更改系統語言後，程式中的文字會隨之改變

實驗三範例 按下Ctrl + F11按鍵旋轉模擬器，背景圖會由直向更換為橫向圖片 當裝置螢幕變更方向時，實驗程式會依照目前的螢幕方向讀取不同的背景圖片

實驗三範例 更改語言之後，程式中的文字語系也會更改 更改系統語言後，實驗程式中的文字會隨著系統語言不同而改變

建立實驗程式

新增專案 新建專案 輸入應用程式名稱 輸入套件名稱 選擇SDK版本 1 2 3 4 5 1. 新建一個Android應用程式專案 2. 命名應用程式，專案名稱會自動命名為應用程式名稱，實驗中輸入ResourceExp最為應用程式名稱 3. 命名套件名稱，實驗中命名為tw.edu.ncu.ce.bnlab.resourceexp 4. 選擇使用的SDK版本以及最低可支援的裝置版本，實驗中版本選擇Android 4.4.2 (API 19)作為使用及最低的SDK版本 5. 按下下一步 選擇SDK版本 5

新增專案 6 取消勾選自訂圖示 6.實驗無須自訂應用程式圖案，所以取消勾選Create custom launcher icon，按下下一步

新增專案 7. 新增活動視窗，不需更改設定，直接按下下一步 8. 活動和畫面檔案名稱設定，不需更改設定，按下完成 8 7

新增文字資源 新增的專案 選擇String資源 點兩下滑鼠左鍵開啟編輯畫面 2 3 1 4 新增一個文字資源 1.打開res/values/strings.xml編輯畫面 2.按下Add按鈕 3.選擇String資源 4.點選確定 3 選擇String資源 1 點兩下滑鼠左鍵開啟編輯畫面 4

編輯文字資源 編輯新增的文字資源 Name欄位輸入Exp Value欄位輸入This is experiment 3 5 接著編輯剛才新增的文字資源 5.在Name欄位輸入字串資源名稱:Exp，Value欄位輸入字串資源所代表的字串內容:This is experiment 3 6.編輯完成後按下Ctrl + s快捷鍵儲存目前編輯的檔案 Name欄位輸入Exp Value欄位輸入This is experiment 3 6 按下Ctrl + s快速儲存

新增尺寸資源 7 選擇Dimension資源 8 新增尺寸資源 7.再按下Add按鈕 8.選擇Dimension資源 9.按下確定 9

編輯尺寸資源 編輯尺寸資源，作為字型大小 Name欄位輸入font_size Value欄位輸入40sp 按下Ctrl + S儲存 10 編輯剛才新增的尺寸資源 10.在Name欄位輸入font_size，作為字型大小使用 Value欄位輸入40sp為大小 11.按下Ctrl + S將檔案儲存 Name欄位輸入font_size Value欄位輸入40sp 11 按下Ctrl + S儲存

新增顏色資源檔 在res/values/目錄中新建color.xml 在values資料夾上按滑鼠右鍵，選擇新建 接著新增顏色資源，首先 1.在res目錄上按滑鼠右鍵，選擇新建 2.選擇Android XML File，若沒有請選其他，在跳出視窗中瀏覽Android資料夾，選取Android XML Values File (也可在前面新增文字和尺寸資源同一個檔案中，不必增加檔案) 1 在values資料夾上按滑鼠右鍵，選擇新建 新增Android XML File 2

新建顏色資源檔 建立color.xml Resource Type欄位中選擇Values File欄位填入color.xml作為資源檔名 3 4 File欄位填入color.xml作為資源檔名 在New Android XML File精靈中 3. 於Resource Type欄位選擇Values 4.在File欄位中輸入color.xml作為顏色資源檔案名稱 5.按下完成 5

新增顏色資源 選擇Color資源 點兩下滑鼠左鍵開啟編輯畫面 2 3 1 4 接著編輯剛才新增顏色資源，首先 1.打開res/values/color.xml編輯畫面 2.點選Add按鈕 3.選擇Color資源 4.按下確定 點兩下滑鼠左鍵開啟編輯畫面 1 4

編輯顏色資源 Name欄位輸入red Value欄位輸入#FF0000 按下Ctrl + S儲存 5 6 編輯剛才新增的顏色資源， Value欄位輸入#FF0000為紅色的#RRGGBB顏色色碼 6.按下Ctrl + S將檔案儲存 Name欄位輸入red Value欄位輸入#FF0000 6 按下Ctrl + S儲存

建立res/drawable-land資源目錄 1 在res目錄上按滑鼠右鍵，選擇新建 建立一個res/drawable-land資料夾，當裝置螢幕為橫向時，應用程式會自動對應使用此資料夾中的資源 1.在專案res目錄上按滑鼠右鍵，選擇新建 2.選擇資料夾 2

建立res/drawable-land資源目錄 3 4

新增res/drawable-port資源目錄 依照新增drawable-land方法，新增一個res/drawable-port資源目錄，將直向螢幕使用的圖檔放置於此 依照新增drawable-land方法，新增一個res/drawable-port資源目錄，作為直向螢幕時使用

拖入直向圖檔至drawable-port 以拖曳方式，將直向背景圖放入res/drawable-port/目錄中 2 1.將直立的背景圖以拖曳方式拖進drawable-port 2.按下確定，確認將圖片複製進專案目錄中 1 拖入直向圖檔至drawable-port

拖入橫向圖檔至drawable-land 拖曳橫向背景圖至res/drawable-land/目錄 4 3 3.將橫向的背景圖以拖曳方式拖進drawable-land 4.按下確定，確認將圖片複製進專案目錄中 橫向和直向圖片名稱需一樣(可以拖入後再修改圖片名稱)，圖片名稱請勿用數字開頭，只能使用a~z0~9，不能用大寫英文字 拖入橫向圖檔至drawable-land

建立res/values-zh-rTW/資源目錄 新增res/values/strings-zh-rTW作為中文文字資源目錄 1 依照新增drawable-land資料夾方法，新增一個res/values-zh-rTW資源目錄，作為正體中文台灣區域的文字資源目錄 輸入values-zh-rTW作為資料夾名稱 3 2 4

複製文字資源檔 利用拖曳方式將res/values/strings.xml檔案拖曳至res/values-zh-rTW/中，拖曳時務必按住Ctrl按鈕表示複製 將文字資源檔從values複製到values-zh-rTW，使得兩個values目錄有相同的資源 拖曳時按住Ctrl按鍵

編輯中文文字資源 打開res/values-zh-rTW/strings.xml編輯畫面，將Exp字串值更改為中文 1 1.將res/values-zh-rTW/strings.xml中的Exp字串值更改為這是實驗三 2.按下Ctrl + S儲存 讓values與values-zh-rTW兩個資源目錄中有同樣的資源名稱，卻有不同的值 將Value欄位更改為這是實驗三 2 按下Ctrl + S儲存

編輯介面佈局檔案 打開res/layout/activity_mail.xml檔案，設定背景圖 2 4 3 1 5 編輯res/layout/activity_main.xml，將自定義的資源檔案套用在背景與文字框 1.在res/layout/activity_main.xml檔案上點滑鼠左鍵兩下 2.點選概要視窗中的RelativeLayout，會顯示屬性視窗 3. 找到Background，點選右邊按鈕，會跳出視窗 4.將Drawable展開，會列出所有圖片資源，選取之前拖入的背景圖 5.點選確定 3 1 5

編輯介面佈局檔案 設定顯示的文字、文字顏色、文字大小 1 3 2 5 6 4 編輯res/layout/activity_main.xml，將自定義的資源檔案套用在背景與文字框 1.點選概要視窗中的TextView，會顯示屬性視窗 2.找到Text，點選右邊按鈕，會跳出視窗 3. 選取定義的Exp字串 4.點選確定 5. 同樣的，在屬性視窗找到Text Color，點選右邊按鈕，會跳出視窗，將Color展開，會列出所有定義的顏色資源，選取之前定義的red色彩，點選確定 6.同樣的，在屬性視窗找到Text Size，點選右邊按鈕，會跳出視窗，選取之前定義的font_size尺寸，點選確定 設定完成，要將檔案儲存(Ctrl+s)。 2 5 6 4

XML編輯內容 也可切換到XML編輯頁面，直接撰寫程式碼 加入此段程式碼，讓介面具有背景圖案 <RelativeLayout 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:background="@drawable/background" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/Exp" android:textColor="@color/red" android:textSize="@dimen/font_size" /> </RelativeLayout> 加入此段程式碼，讓介面具有背景圖案 1 請使用Alt+/快速鍵，輔助輸入XML標籤、屬性、屬性值 2 修改此段程式碼，顯示自定義的文字資源 加入此段程式碼，讓文字使用定義好的顏色與尺寸資源 3

執行專案 1 2 儲存程式碼 執行專案應用程式 1.按下儲存按鈕將程式碼儲存 2.按下執行按鈕執行專案應用程式

執行結果(螢幕方向) 執行後按下Ctrl + F11按鍵旋轉模擬器，可看見背景圖也會由直向更換為橫向圖片 按下Ctrl + F11旋轉模擬器 執行實驗程式後， 模擬器螢幕方向預設為直向， 按下Ctrl + F11後選轉模擬器，程式畫面更改為橫向 背景圖片隨著螢幕方向更改會重新讀取並且更換為橫向背景圖 再按Ctrl + F11，會切回直向畫面 Note: 4.4.2的模擬器旋轉時，畫面可能無法跟著旋轉，請使用舊版模擬器。

設定模擬器語言 模擬器上按Home按鍵，回到桌面，點選程式集點選設定進入設定畫面 進入設定 3 2 1 首先進入設定更改語言 2.點選程式集 3.按下設定按鈕進入設定頁面 3 2 進入設定 1

設定模擬器語言 選擇Language & input，接著選Language 5 4 4.選擇Language & input，接著

選擇語言 選擇中文(繁體) 6.選擇中文(繁體) 將系統語言更改為繁體中文 6

再次開啟應用程式 再次開啟實驗應用程式，可發現文字更改為中文 3 2 1 更改系統語言後 點選模擬器上的home按鍵，回到模擬器的桌面 點選程式集 開啟ResourceExp應用程式 開啟後可以看見程式中的文字隨著系統語言設定變更而更改為中文 2 1

Q & A