第二堂的課程內(nèi)容進(jìn)入應(yīng)用程式開(kāi)發(fā)的階段，從規(guī)劃與建立應(yīng)用程式的資源開(kāi)始，接下來(lái)會(huì)說(shuō)明Android最基本的Activity元件，還有設(shè)計(jì)應(yīng)用程式需要的畫(huà)面，最后幫應(yīng)用程式加入讓使用者操作與互動(dòng)的功能。
Android行動(dòng)裝置在全世界已經(jīng)是非常普及的隨身電子設(shè)備,Android開(kāi)發(fā)人員把應(yīng)用程式上傳到Google Play以后，全世界的使用者可以隨時(shí)透過(guò)互聯(lián)網(wǎng)下載與安裝，在這樣的情況下，應(yīng)用程式就會(huì)有多國(guó)語(yǔ)言的需求了。應(yīng)用程式通常會(huì)有各種需要顯示文字的畫(huà)面元件，例如TextView和Button，開(kāi)發(fā)人員會(huì)希望這些文字可以使用裝置的語(yǔ)言來(lái)顯示。以提供確定功能的按鈕元件來(lái)說(shuō)，同樣一個(gè)應(yīng)用程式安裝在繁體中文的裝置，按鈕上的文字應(yīng)該顯示“確定”，如果安裝在英文的裝置，就應(yīng)該顯示“OK”。
開(kāi)發(fā)Android應(yīng)用程式應(yīng)該要先認(rèn)識(shí)資源的規(guī)劃與管理，建立好一點(diǎn)的設(shè)計(jì)習(xí)慣，對(duì)于應(yīng)用程式的開(kāi)發(fā)工作會(huì)有很大的幫助。為了讓你在后續(xù)的學(xué)習(xí)可以得到最好的效果，這一堂課需要建立一Android應(yīng)用程式專(zhuān)案，隨著課程的進(jìn)行，會(huì)依照課程內(nèi)容依序完成一個(gè)完整的應(yīng)用程式。參考下列的步驟建立一個(gè)Android應(yīng)用程式專(zhuān)案：
1. 啟動(dòng)Android Studio，選擇“Start a New Android Studio project”。
2. 在“Configure your new project”視窗，依照下列的說(shuō)明輸入需要的內(nèi)容后，選擇“Next”：
* Application Name輸入“MyAndroidTutorial”
* Company Domain輸入“macdidi.net”，或是你自己的網(wǎng)域名稱(chēng)。
* Project location選擇一個(gè)儲(chǔ)存專(zhuān)案的位置。
3. 勾選“Phone and Tablet”，Minimum SDK選擇“API 15:Android 4.0.3(IceCreamSandwich)”，選擇“Next”。
4. 在“Add an activity to Mobile”視窗選擇“Blank Activity”后選擇“Next”。
5. 在“Choose options for your new file”視窗采用默認(rèn)的名稱(chēng)與設(shè)定，選擇“Finish”完成建立應(yīng)用程式的設(shè)定。
等候Android Studio啟動(dòng)新的應(yīng)用程式視窗，就完成建立Android應(yīng)用程式專(zhuān)案的工作。這個(gè)專(zhuān)案會(huì)從這里開(kāi)始，一直持續(xù)使用到最后。每一段說(shuō)明的內(nèi)容，都會(huì)在這個(gè)專(zhuān)案加入或修改一些內(nèi)容。
## 5-1 Android應(yīng)用程式資源介紹
一個(gè)應(yīng)用程式通常會(huì)包含許多畫(huà)面，每一個(gè)畫(huà)面中又會(huì)包含許多顯示各種資訊的元件。應(yīng)用程式通常也會(huì)提供使用者操作與互動(dòng)的功能，這些工作需要撰寫(xiě)一些程式碼來(lái)執(zhí)行。如果是一個(gè)比較復(fù)雜的應(yīng)用程式，就會(huì)包含很多畫(huà)面、程式碼和各種需要的內(nèi)容。
為了簡(jiǎn)化應(yīng)用程式的開(kāi)發(fā)工作，Android平臺(tái)采用目前比較普遍、也比較好的設(shè)計(jì)方式，把應(yīng)用程式需要的程式碼和其它需要的內(nèi)容分開(kāi)，開(kāi)發(fā)人員在設(shè)計(jì)畫(huà)面的時(shí)候，依照Android的設(shè)計(jì)規(guī)格提供一些“畫(huà)面資源”，這些資源是XML格式的文件。應(yīng)用程式需要使用的文字、陣列、顏色，也都會(huì)把它們?cè)O(shè)計(jì)為XML格式的資源檔案。應(yīng)用程式的程式碼就只剩下基本與流程的工作，需要畫(huà)面和文字的時(shí)候，就從XML格式的資源檔案讀進(jìn)來(lái)使用。
### 5-1-1 應(yīng)用程式專(zhuān)案的資源目錄
建立一個(gè)Android應(yīng)用程式專(zhuān)案以后，Android Studio會(huì)自動(dòng)建立一些需要的專(zhuān)案目錄，“res”的目錄用來(lái)存放應(yīng)用程式需要的各種資源，不同的資源要放在規(guī)定的目錄下，例如畫(huà)面配置檔資源會(huì)放在“res/layout”。Android規(guī)定所有資源的種類(lèi)和它們存放的目錄，你一定要把資源放在對(duì)應(yīng)的目錄下。這些是Android應(yīng)用程式專(zhuān)案在“res”目錄下的各種資源目錄:
* anim – 動(dòng)畫(huà)資源，XML格式檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* color – 顏色狀態(tài)資源，XML格式檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* drawable – 圖形與繪圖資源，圖形檔案與XML格式檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* layout – 畫(huà)面配置資源，XML格式檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* menu – 選單資源，XML格式檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* raw – 檔案資源，任何應(yīng)用程式需要的檔案，檔案名稱(chēng)就是資源名稱(chēng)。
* values – 一般資源，包含文字、顏色、尺寸、陣列與樣式資源，XML格式檔案，每一個(gè)資源的名稱(chēng)在標(biāo)簽的設(shè)定中決定。
### 5-1-2 Android系統(tǒng)資源
Android系統(tǒng)已經(jīng)內(nèi)建許多資源，都是一些比較一般性與常用的資源，你的應(yīng)用程式應(yīng)該要優(yōu)先使用系統(tǒng)提供的資源，如果沒(méi)有的話再自己建立需要的資源，這樣可以減少應(yīng)用程式的大小，而且也比較方便一些。
Android內(nèi)建的資源都宣告在API的“android.R”套件中，不論是系統(tǒng)或自己建立的資源，它們的分類(lèi)方式都是一樣的，會(huì)依照不同的種類(lèi)使用“android.R.資源種類(lèi)”的格式，例如系統(tǒng)內(nèi)建的畫(huà)面配置資源就放在“android.R.layout”套件。這些是宣告在“android.R”套件中常用的系統(tǒng)資源：
* android.R.anim – 系統(tǒng)動(dòng)畫(huà)資源。
* android.R.color – 系統(tǒng)顏色狀態(tài)資源。
* android.R.dimen – 系統(tǒng)尺寸資源。
* android.R.drawable – 系統(tǒng)圖形與繪圖資源。
* android.R.layout – 系統(tǒng)畫(huà)面配置資源。
* android.R.menu – 系統(tǒng)選單資源。
* android.R.string – 系統(tǒng)文字資源。
* android.R.style – 系統(tǒng)樣式資源。
在建立應(yīng)用程式需要的資源之前，應(yīng)該要先認(rèn)識(shí)系統(tǒng)內(nèi)建的資源，在Android開(kāi)發(fā)人員網(wǎng)站，提供和Java API文件同樣格式的內(nèi)容，方便開(kāi)發(fā)人員查詢Android平臺(tái)提供的API，網(wǎng)址是[http://developer.android.com/reference/packages.html](http://developer.android.com/reference/packages.html)。選擇在“android”套件下的“R”類(lèi)別后，就可以看到所有系統(tǒng)內(nèi)建的資源。例如選擇“R.string”以后，可以看到宣告在這個(gè)類(lèi)別里面的文字資源，一般應(yīng)用程式常用的確定、取消文字，變量的名稱(chēng)是“ok”與“cancel”。
## 5-2 一般資源
Android把應(yīng)用程式比較常用的一般資源放在“res/values”目錄，這個(gè)目錄可以建立需要的XML格式檔案，在檔案中使用規(guī)定的標(biāo)簽建立需要的資源，包含文字、顏色、尺寸、陣列和樣式資源。XML檔案名稱(chēng)只是用來(lái)規(guī)劃與分類(lèi)不同的資源，你可以把所有一般資源都放在同一個(gè)檔案，不過(guò)一般會(huì)習(xí)慣使用這樣的規(guī)劃方式，在res/values目錄建立這些檔案儲(chǔ)存不同種類(lèi)的一般資源：
* strings.xml – 文字資源。
* colors.xml – 顏色資源。
* dimens.xml – 尺寸資源。
* arrays.xml – 陣列資源。
* styles.xml – 樣式資源。
在“res/values”目錄的XML檔案，使用規(guī)定的格式建立一般資源，最外層使用“resources”標(biāo)簽，里面包含一般資源的標(biāo)簽：
~~~
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="文字資源名稱(chēng)">文字資源</string>
<color name="顏色資源名稱(chēng)">顏色資源</color>
<dimen name="尺寸資源名稱(chēng)">尺寸資源</dimen>
<array name ="一般陣列資源名稱(chēng)">
<item>一個(gè)陣列資源元素</item>
...
</array>
<string-array name="文字陣列資源名稱(chēng)">
<item>一個(gè)陣列資源元素</item>
...
</string-array>
<integer-array name="數(shù)字陣列資源名稱(chēng)">
<item>一個(gè)陣列資源元素</item>
...
</integer-array>
<style name="樣式">
<item name="設(shè)定名稱(chēng)">設(shè)定值</item>
...
</style>
</resources>
~~~
### 5-2-1 建立文字資源
Android應(yīng)用程式需要的文字，都不應(yīng)該直接寫(xiě)在程式碼或設(shè)定檔里面，而是建立好文字資源以后再使用它們。以這里使用的范例來(lái)說(shuō)，在規(guī)劃應(yīng)用程式的時(shí)候，就應(yīng)該知道需要哪一些文字資源，例如這個(gè)新增記事本的畫(huà)面：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_01.png)
畫(huà)面中需要的文字，根據(jù)之前的說(shuō)明，“確定”和“取消”使用Android系統(tǒng)資源就可以了。建立文字資源使用“文字內(nèi)容”的格式，開(kāi)啟Android Studio為你建立好的“res/values/strings.xml”檔案，里面已經(jīng)有app_name、title_activity_main與hello_world三個(gè)默認(rèn)的文字資源，另外再加入這些需要的文字資源：
~~~
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MyAndroidTutorial</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="title">標(biāo)題</string>
<string name="enter_title">輸入標(biāo)題</string>
<string name="content">內(nèi)容</string>
<string name="enter_content">輸入內(nèi)容</string>
</resources>
~~~
加入文字資源并儲(chǔ)存盤(pán)案以后，就可以在其它XML檔案（例如畫(huà)面資源）或程式碼中使用。在XML設(shè)定檔使用“@string/文字資源名稱(chēng)”的格式設(shè)定文字資源。開(kāi)啟MyAndroidTutorial專(zhuān)案“res/layout/activity_main.xml”，選擇預(yù)覽畫(huà)面的文字符件，在“Properties”區(qū)塊找到“text”，選擇設(shè)定值以后，再選擇右測(cè)的設(shè)定按鈕：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_02.png)
在“Resources”選擇對(duì)話框，選擇名稱(chēng)為“title”的項(xiàng)目后選擇“OK”：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_03.png)
設(shè)定完成后可以看到預(yù)覽畫(huà)面上的文字已經(jīng)變成“標(biāo)題”，這是采用圖形接口的設(shè)定方式。在編輯視窗選擇“Text”標(biāo)簽，準(zhǔn)備檢視這個(gè)畫(huà)面資源的內(nèi)容：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_04.png)
Android Studio顯示activity_main.xml檔案的內(nèi)容，它是一個(gè)XML格式的檔案。在這個(gè)畫(huà)面可以看到剛才設(shè)定的內(nèi)容：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_05.png)
Android Studio在使用文字資源的部份，會(huì)直接顯示文字資源的設(shè)定值。你可以把鼠標(biāo)光標(biāo)移到這個(gè)設(shè)定上面，就會(huì)顯示原始的內(nèi)容：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_06.png)
或是點(diǎn)選這個(gè)設(shè)定以后，內(nèi)容就會(huì)變成“@string/title”，你也可以直接在這里輸入文字資源的名稱(chēng)：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_07.png)
執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以在畫(huà)面看到“標(biāo)題”訊息。
如果在開(kāi)發(fā)應(yīng)用程式之前經(jīng)過(guò)完整的規(guī)劃，現(xiàn)在就可以建立好大部份需要的文字資源。在開(kāi)發(fā)的過(guò)程需要新增或修改文字資源的時(shí)候，再開(kāi)啟文字資源檔案執(zhí)行異動(dòng)的工作。
### 5-2-2 建立顏色資源
如果設(shè)計(jì)應(yīng)用程式畫(huà)面的時(shí)候，沒(méi)有特別設(shè)定元件的顏色，畫(huà)面看起來(lái)應(yīng)該會(huì)很單調(diào)。需要為畫(huà)面設(shè)定顏色的時(shí)候，也不應(yīng)該直接寫(xiě)在程式碼與設(shè)定檔。例如瀏覽與檢視記事本內(nèi)容的畫(huà)面：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_08.png)[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_09.png)
建立顏色資源使用“顏色內(nèi)容”的格式。顏色資源的內(nèi)容使用下面這些設(shè)定格式：
* #RGB – 使用0~9、A~F設(shè)定紅綠藍(lán)的配色，共256種顏色。
* #RRGGBB – 使用00~FF設(shè)定紅綠藍(lán)的配色，共65535種顏色。
* #ARGB – 第一碼使用0~9、A~F設(shè)定透明度，0表示完全透明，就是看不到了，F(xiàn)表示完全不透明。
* #AARRGGBB – 使用00~FF設(shè)定透明度，00表示完全透明，F(xiàn)F表示完全不透明。
這個(gè)畫(huà)面需要一些灰階的顏色資源，用來(lái)設(shè)定元件的背景顏色。依照下列的步驟建立顏色資源檔案：
1. 在“res/values”目錄上按鼠標(biāo)右鍵，選擇“New -> Values resources file”。
2. 在“File name”輸入“colors”后選擇“OK”。
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_10.png)
在顏色資源檔案加入應(yīng)用程式需要的顏色資源：
~~~
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="light_grey">#CCCCCC</color>
<color name="grey">#AAAAAA</color>
<color name="divider_color">#DD999999</color>
</resources>
~~~
在XML設(shè)定檔使用“@color/顏色資源名稱(chēng)”的格式設(shè)定顏色資源。開(kāi)啟“res/layout/activity_main.xml”，修改這個(gè)檔案的內(nèi)容：
~~~
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- 加入背景顏色設(shè)定 -->
<TextView
android:text="@string/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_grey"/>
</RelativeLayout>
~~~
你可以在預(yù)覽畫(huà)面檢視，或是執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以看到“標(biāo)題”文字符件的背景顏色已經(jīng)變成灰色。
### 5-2-2 建立尺寸資源
應(yīng)用程式的畫(huà)面通常需要設(shè)定元件的大小與排列間隔，例如一些比較重要的文字，應(yīng)該會(huì)希望顯示在畫(huà)面的時(shí)候可以大一些；還有元件與元件之間，通常會(huì)設(shè)定一些間隔，這樣畫(huà)面才不會(huì)擠成一團(tuán)。建立尺寸資源使用“尺寸內(nèi)容”的格式。尺寸資源的內(nèi)容使用下面這些單位：
* px – 螢?zāi)划?huà)素。
* dp – 每英吋畫(huà)面，160dp為一英吋。
* sp – 和dp一樣，不過(guò)會(huì)根據(jù)裝置設(shè)定的字號(hào)自動(dòng)調(diào)整。
* in – 英吋。
* mm – 公厘。
建立專(zhuān)案以后已經(jīng)有默認(rèn)的尺寸資源檔，開(kāi)啟“res/values/dimens.xml”，加入應(yīng)用程式需要的尺寸資源：
~~~
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<!-- 加入新的尺寸資源設(shè)定 -->
<dimen name="default_padding">6dp</dimen>
<dimen name="title_txt_size">24sp</dimen>
</resources>
~~~
在XML設(shè)定檔中使用“@dimen/尺寸資源名稱(chēng)”格式設(shè)定尺寸資源。開(kāi)啟“res/layout/activity_main.xml”，修改這個(gè)檔案的內(nèi)容：
~~~
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- 加入邊界與文字大小的設(shè)定 -->
<TextView
android:text="@string/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:padding="@dimen/default_padding"
android:textSize="@dimen/title_txt_size"/>
</RelativeLayout>
~~~
你可以在預(yù)覽畫(huà)面檢視，或是執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以看到訊息的大小與邊界已經(jīng)改變。
## 5-3 圖形資源
為了要提供使用者更清楚和美觀的應(yīng)用程式畫(huà)面，通常會(huì)在設(shè)計(jì)畫(huà)面的時(shí)候使用一些圖形，例如按鈕或選單的圖示。應(yīng)用程式安裝在裝置以后，顯示在應(yīng)用程式列表中的圖示也很重要，一個(gè)適合又好看的圖示，通常會(huì)比只有使用文字好一些。應(yīng)用程式需要的圖形資源都會(huì)放在應(yīng)用程式專(zhuān)案的“res/drawable”目錄。
Android系統(tǒng)的圖形資源可以接受PNG、JPG和GIF格式的圖檔，檔案名稱(chēng)必須是小寫(xiě)的英文字母和底線，沒(méi)有包含副檔名的檔案名稱(chēng)就是資源名稱(chēng)。在res/drawable目錄也可以建立XML格式的圖形資源，提供應(yīng)用程式一些簡(jiǎn)單的幾何圖形和繪圖效果，例如使用漸層色彩繪制的矩形，可以使用在設(shè)定畫(huà)面元件的背景。
### 5-3-1 圖檔圖形資源
經(jīng)過(guò)應(yīng)用程式規(guī)劃的階段，應(yīng)該已經(jīng)知道需要哪些圖形資源，例如這個(gè)畫(huà)面需要的按鈕圖示：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_11.png)
應(yīng)用程式需要的基本圖形檔案，可以在Android開(kāi)發(fā)人員網(wǎng)站下載，網(wǎng)址是[http://developer.android.com/design/downloads/index.html](http://developer.android.com/design/downloads/index.html)，在網(wǎng)頁(yè)選擇“Action Bar Icon Pack”：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_12.png)
儲(chǔ)存并解壓縮下載的檔案，在“Action Bar Icons/holo_light”目錄，有許多可以參考使用的圖示檔案。如果是提供給按鈕使用的圖示，選擇“drawable-mdpi”目錄下的圖檔，大小為32X32。依照下列的步驟，把圖檔復(fù)制到應(yīng)用程式專(zhuān)案：
1. 在檔案總管選擇需要的圖檔以后，選擇“復(fù)制”。
2. 回到Android Studio，在“res/drawable”目錄上按鼠標(biāo)右鍵，選擇“Paste”。
3. 選擇“…/app/src/main/res/drawable”以后選擇“OK”：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_13.png)
4. 選擇“OK”:
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_14.png)
5. 復(fù)制完成后，在res/drawable目錄下就會(huì)出現(xiàn)圖檔的名稱(chēng)：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_15.png)
將應(yīng)用程式需要的圖檔復(fù)制到res/drawable目錄以后，就可以在XML資源檔案中用“@drawable/資源名稱(chēng)”的格式使用這些圖形資源。開(kāi)啟“res/layout/activity_main.xml”，修改這個(gè)檔案的內(nèi)容：
~~~
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:text="@string/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:padding="@dimen/default_padding"
android:textSize="@dimen/title_txt_size"/>
<!-- 加入圖示按鈕 -->
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/alarm_icon" />
</RelativeLayout>
~~~
你可以在預(yù)覽畫(huà)面檢視，或是執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以看到畫(huà)面中央多一個(gè)圖示按鈕。
### 5-3-2 繪圖圖形資源
一個(gè)應(yīng)用程式提供的功能最好是能夠很實(shí)用，讓使用者操作與瀏覽資料的畫(huà)面美觀也非常重要，使用者當(dāng)然希望應(yīng)用程式的畫(huà)面可以好看一些。在設(shè)計(jì)畫(huà)面配置資源的時(shí)候，你可以為畫(huà)面元件設(shè)定大小尺寸、文字與背景的顏色，讓?xiě)?yīng)用程式的畫(huà)面看起來(lái)比較不會(huì)那么單調(diào)，不過(guò)這些基本的設(shè)定所呈現(xiàn)的效果也是有限的。想要讓畫(huà)面的設(shè)計(jì)比較不一樣，可以不用到處找一些圖形，也不用學(xué)習(xí)繪圖軟件，Android提供一種使用XML格式設(shè)計(jì)的圖形資源，可以讓你設(shè)計(jì)簡(jiǎn)單的繪圖圖形資源，把這種圖形資源設(shè)定給畫(huà)面元件當(dāng)作背景，就可以讓畫(huà)面元件擁有獨(dú)特的外觀。
繪圖圖形資源是一個(gè)XML格式的檔案，儲(chǔ)存在專(zhuān)案的“res/drawable”目錄，檔案名稱(chēng)就是資源名稱(chēng)。這是設(shè)計(jì)繪圖圖形資源的格式：
~~~
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
~~~
這個(gè)繪圖圖形資源檔案的內(nèi)容，最外層是“shape”標(biāo)簽，標(biāo)簽中的“android:shape”設(shè)定決定繪圖的種類(lèi)，可以設(shè)定為下列這些設(shè)定值：
* Retangle – 繪制矩形，可以搭配“corners”標(biāo)簽設(shè)定四邊的圓角。
* Oval – 繪制橢圓形。
* Line – 繪制現(xiàn)條。
* Ring – 繪制圓環(huán)，在shape標(biāo)簽中控制繪制的效果。
你可以使用繪圖圖形資源，為畫(huà)面元件設(shè)定一個(gè)特殊的樣式。依照下列的步驟建立一個(gè)繪圖圖形資源檔案：
1. 在“res/drawable”目錄上按鼠標(biāo)右鍵，選擇“New -> Drawable resource file”。
2. 在“File name”輸入“retangle_drawable”后選擇“OK”。
修改retangle_drawable.xml為下面的內(nèi)容：
~~~
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:topLeftRadius="5sp"
android:topRightRadius="5sp"
android:bottomLeftRadius="5sp"
android:bottomRightRadius="5sp" />
<solid android:color="#AAAAAA"/>
</shape>
~~~
儲(chǔ)存建立好的繪圖圖形資源檔案，就可以在XML資源檔案中用“@drawable/資源名稱(chēng)”的格式使用這些資源。開(kāi)啟“res/layout/activity_main.xml”，修改這個(gè)檔案的內(nèi)容：
~~~
<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"
tools:context="${packageName}.${activityClass}" >
<!-- 修改android:background的設(shè)定 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title"
android:background="@drawable/retangle_drawable"
android:padding="@dimen/default_padding"
android:textSize="@dimen/title_txt_size" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/alarm_icon" />
</RelativeLayout>
~~~
儲(chǔ)存盤(pán)案以后，你可以在預(yù)覽畫(huà)面檢視，或是執(zhí)行這個(gè)應(yīng)用程式后執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以看到訊息呈現(xiàn)圓角的圖形背景。
## 5-4 選單資源
一般的應(yīng)用程式通常使用畫(huà)面元件提供使用者執(zhí)行功能操作，例如按鈕或下拉式選單，這些元件會(huì)顯示在畫(huà)面上，讓使用者可以隨時(shí)操作它們。可是應(yīng)用程式可能需要一些不是經(jīng)常執(zhí)行的功能，例如檢查資料是否需要更新，或是顯示關(guān)于應(yīng)用程式的資訊，這些功能也可以在應(yīng)用程式的畫(huà)面中使用按鈕來(lái)執(zhí)行，不過(guò)就會(huì)覺(jué)得有點(diǎn)占用畫(huà)面。所以這類(lèi)不是一定經(jīng)常操作的功能，大部份就會(huì)設(shè)計(jì)為應(yīng)用程式的選單，在需要執(zhí)行的時(shí)候，使用者按下選單按鈕，在出現(xiàn)的功能表中選擇要執(zhí)行的功能。
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_16.png)
選單資源是一個(gè)XML格式的檔案，放在專(zhuān)案的“res\menu”目錄，檔案名稱(chēng)就是它的資源名稱(chēng)，設(shè)定檔最外層的標(biāo)簽是“menu”，里面可以包含設(shè)定選單項(xiàng)目的“item”標(biāo)簽，選單項(xiàng)目標(biāo)簽里面有這些設(shè)定值：
* android:id – 選單項(xiàng)目的資源名稱(chēng)。
* android:title – 選單項(xiàng)目的文字。
* android:icon – 選單項(xiàng)目的圖示，指定一個(gè)圖形資源。
* android:showAsAction – 設(shè)定選單項(xiàng)目的樣式，可以設(shè)定為“ifRoom”、“never”、“withText”、“always”和“collapseActionView”。設(shè)定為never表示使用一般選單的樣式，其它的設(shè)定將選單顯示在Action Bar。
* android:onClick – 選擇選單以后呼叫的方法名稱(chēng)。
Android Studio已經(jīng)為你建立一個(gè)默認(rèn)的選單資源，開(kāi)啟“res/menu/menu_main.xml”，把它修改為下面的內(nèi)容：
~~~
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="@+id/search_item"
app:showAsAction="always"
android:title="SEARCH"
android:icon="@android:drawable/ic_menu_search"/>
<item
android:id="@+id/add_item"
app:showAsAction="always"
android:title="ADD"
android:icon="@android:drawable/ic_menu_add"/>
<item
android:id="@+id/revert_item"
app:showAsAction="always"
android:title="REVERT"
android:icon="@android:drawable/ic_menu_revert" />
<item
android:id="@+id/delete_item"
app:showAsAction="always"
android:title="DELETE"
android:icon="@android:drawable/ic_menu_delete" />
<item
android:id="@+id/share_item"
app:showAsAction="always"
android:title="SHARE"
android:icon="@android:drawable/ic_menu_share" >
<menu>
<item
android:id="@+id/googleplus_item"
android:title="Google+" />
<item
android:id="@+id/facebook_item"
android:title="Facebook" />
</menu>
</item>
</menu>
~~~
Android Studio在Activity元件，已經(jīng)加入設(shè)定選單的程式碼。開(kāi)啟專(zhuān)案的“MainActivity.java”，刪除默認(rèn)的onOptionsItemSelected方法，其它的部份不用修改：
~~~
package net.macdidi.myandroidtutorial;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
~~~
選單不會(huì)在預(yù)覽畫(huà)面顯示，所以執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置啟動(dòng)應(yīng)用程式以后，可以看到設(shè)定好的選單。目前還沒(méi)有為它們?cè)O(shè)定選擇以后要執(zhí)行的工作，所以在選擇以后都沒(méi)有任何反應(yīng)。
## 5-5 設(shè)計(jì)與使用動(dòng)態(tài)資源
在上面說(shuō)明的過(guò)程中，你應(yīng)該可以發(fā)現(xiàn)圖形資源的ic_lanucher.png，還有尺寸資源的dimens.xml有多個(gè)檔案：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_17.png)
以文字資源來(lái)說(shuō)，Android裝置可以設(shè)定為不同的語(yǔ)言與地區(qū)，如果希望應(yīng)用程式可以根據(jù)裝置設(shè)定的語(yǔ)言與地區(qū)，自動(dòng)使用不同的文字資源，就需要另外建立其它語(yǔ)言的文字資源。目前建立的文字資源是繁體中文的內(nèi)容，如果需要提供英文的文字資源，依照下列的步驟新增資源檔案：
1. 在“res/values”目錄上按鼠標(biāo)右鍵，選擇“New -> Values resources file”。
2. 在“File name”輸入“strings”，在Avaliable qualifiers選擇“Language”后選擇“>>”：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_18.png)
3. 在Language選擇“en:English”后選擇“OK”：
[](http://www.codedata.com.tw/wp-content/uploads/2015/02/AndroidTutorial5_02_01_19.png)
完成上面的步驟以后，Android Studio建立一個(gè)新的英文文字資源檔，把“res/values/strings.xml”的內(nèi)容復(fù)制過(guò)來(lái)，把它改為英文的內(nèi)容：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MyAndroidTutorial</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="title">Title</string>
<string name="enter_title">Enter title</string>
<string name="content">Content</string>
<string name="enter_content">Enter content</string>
</resources>
~~~
儲(chǔ)存盤(pán)案以后，這個(gè)專(zhuān)案就有默認(rèn)的繁體中文與英文文字資源。執(zhí)行這個(gè)應(yīng)用程式，在模擬裝置執(zhí)行“設(shè)定”應(yīng)用程式，選擇“語(yǔ)言與輸入設(shè)定->語(yǔ)言”，選擇“English(United States)”以后，在重新執(zhí)行應(yīng)用程式，畫(huà)面上的訊息會(huì)根據(jù)裝置的語(yǔ)言設(shè)定顯示對(duì)應(yīng)的文字，原來(lái)畫(huà)面上顯示的“標(biāo)題”會(huì)變成“Title”。如果希望應(yīng)用程式支援更多語(yǔ)言，可以使用同樣的作法新增其它語(yǔ)言的文字資源。
- 第一堂
- 第一堂（1）西游記里的那只猴子
- 第一堂（2）準(zhǔn)備 Android Studio 開(kāi)發(fā)環(huán)境
- 第一堂（3）開(kāi)始設(shè)計(jì) Android 應(yīng)用程式
- 第一堂（4）開(kāi)發(fā) Android 應(yīng)用程式的準(zhǔn)備工作
- 第二堂
- 第二堂（1）規(guī)劃與建立應(yīng)用程式需要的資源
- 第二堂（2）設(shè)計(jì)應(yīng)用程式使用者界面
- 第二堂（3）應(yīng)用程式與使用者的互動(dòng)
- 第二堂（4）建立與使用 Activity 元件
- 第三堂
- 第三堂（1）為L(zhǎng)istView元件建立自定畫(huà)面
- 第三堂（2）儲(chǔ)存與讀取應(yīng)用程式資訊
- 第三堂（3）Android 內(nèi)建的 SQLite 數(shù)據(jù)庫(kù)
- 第四堂
- 第四堂（1）使用照相機(jī)與麥克風(fēng)
- 第四堂（2）設(shè)計(jì)地圖應(yīng)用程式 - Google Maps Android API v2
- 第四堂（3）讀取裝置目前的位置 - Google Services Location
- 第五堂
- 第五堂（1）建立廣播接收元件 - BroadcastReceiver
- 第五堂（2）系統(tǒng)通知服務(wù) - Notification
- 第五堂（3）設(shè)計(jì)小工具元件 - AppWidget
- 第六堂
- 第六堂（1）Material Design - Theme與Transition
- 第六堂（2）Material Design - RecylerView
- 第六堂（3）Material Design - Shared Element與自定動(dòng)畫(huà)效果