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

Presentation on theme: "實驗三：替代資源檔設計 (多國語言和螢幕方向背景圖設計)"— Presentation transcript:

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

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

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

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

5 建立實驗程式

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

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

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

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

10 編輯文字資源 編輯新增的文字資源 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快速儲存

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

12 編輯尺寸資源 編輯尺寸資源，作為字型大小 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儲存

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

14 新建顏色資源檔 建立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

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

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

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

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

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

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

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

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

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

24 編輯中文文字資源 打開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儲存

25 編輯介面佈局檔案 打開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

26 編輯介面佈局檔案 設定顯示的文字、文字顏色、文字大小 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

27 XML編輯內容 也可切換到XML編輯頁面，直接撰寫程式碼 加入此段程式碼，讓介面具有背景圖案
<RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> 加入此段程式碼，讓介面具有背景圖案 1 請使用Alt+/快速鍵，輔助輸入XML標籤、屬性、屬性值 2 修改此段程式碼，顯示自定義的文字資源 加入此段程式碼，讓文字使用定義好的顏色與尺寸資源 3

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

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

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

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

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

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

34 Q & A