Android Studio教學 - 建立App專案 (2017.1更新) @ 安卓亭 Android Station

Android Studio的功能非常強大，一旦學會駕馭它，App的開發功力會進步神速。但是俗話說：萬丈高樓平地起，我們還是得從基礎開始。第一步當然就是學會如何新增一個App專案，並且建立一個手機模擬器，讓App可以在上頭執行。現在就請跟著我們，一步一步將它完成。

步驟一：啟動Android Studio之後會看到圖1的畫面，點選其中的Start a new Android Studio project就會顯示圖2的對話盒。

圖1 啟動Android Studio的畫面

圖2設定App專案的屬性 – 步驟一

1. Application name:App執行時顯示在螢幕上方的程式標題，例如可以輸入「My First App」。

2. Company Domain:公司的網域名稱，我們可以取一個自己喜歡的公司名稱，例如myandroid.com。

3. Package name:Android Studio會自動根據前面填寫的Application name和Company Domain，產生一個Package name。如果想要修改，可以按下這個欄位最右邊的Edit。這個欄位是決定程式檔在專案資料夾中的儲存路徑，它是用網址的格式表示，但是是從大區域到小區域而不是網址慣用的小區域到大區域，注意Package name至少要有兩層，也就是xxx.xxx。

4. Include C++ Support: 如果專案需要使用JNI (Java Native Interface)搭配Android NDK (Native Development Kit)，讓Java程式可以呼叫C++程式，就要勾選這個項目。這裡我們不會用到它，所以不需要勾選。

5. Project location: 儲存App專案的資料夾。

完成之後按下Next按鈕。

建立Android App專案的注意事項

1. 程式專案的Application name可以使用中文或英文。
2. 程式專案的資料夾名稱和路徑中都不要包含中文。

步驟二：螢幕上會接著出現圖3的對話盒，這個對話盒用來設定App執行的平台。一個App專案可以包含多個App模組，每一個App模組都可以設定自己的執行平台。請確定已經勾選Phone and Tablet項目，其它項目不要勾選，表示這個App專案只有一個手機和平板電腦的App模組，完成後按下Next按鈕。如果是第一次使用，畫面上會顯示安裝套件的對話盒，直接按下Next按鈕即可。

圖3 設定App專案的屬性 – 步驟二

步驟三：螢幕上會顯示圖4的對話盒，這個對話盒用來設定要套用的App架構。為了讓程式碼簡單一些，不要造成初學者的困擾，請選擇Empty Activity，然後按下Next按鈕。

圖4設定App專案的屬性 – 步驟三

步驟四：接著出現圖5的對話盒，請輸入以下資訊：

1. Activity Name: 這是主程式類別的名稱，主程式類別就是程式開始執行的地方，一般使用預設名稱即可，也可以自行修改，檔名可以使用大小寫英文字母、數字和底線字元。

2. Layout Name: 這是程式「介面佈局檔」的名稱，「介面佈局檔」是用來設計程式的操作畫面，它是一個xml格式的檔案。Android Studio會自動根據Activity Name幫我們取名，當然也可以自行修改，但是要注意只能夠使用小寫英文字母、數字和底線字元。

我們可以接受預設名稱，直接按下Finish按鈕即可。

圖5設定App專案的屬性 – 步驟四

第一次建立專案需要比較久的時間，因為需要從網路下載Gradle檔案（Gradle是用來管理專案和編譯的工具），請耐心等候。建立App專案時，Android Studio畫面下方的狀態列會顯示訊息，當最後出現Gradle build finished in Xm Xs（X表示數字），就表示專案已經建立完成，如圖6。在開發App的時候，需要在不同螢幕尺寸的手機或是平板電腦上測試程式的執行效果，因此需要建立手機或是平板電腦模擬器。接下來我們就來介紹如何建立模擬器。

圖6專案建立完成後狀態列顯示Gradle build finished訊息

建立模擬器

假設我們已經利用Android SDK Manager，安裝好Android模擬器需要用到的檔案。如果不確定是否已經完成這個步驟，可以參考這篇教學文章 Android Studio教學 - 不只「更新」還要「除舊」。

點選Android Studio主選單的Tools > Android > AVD Manager就會顯示一個對話盒，裏頭有一個Create Virtual Device按鈕，按下該按鈕就會顯示圖7的對話盒。點選其中一個手機型號，按下Next按鈕，就會顯示圖8的對話盒。我們要選取模擬器使用的Android版本。如果電腦已經安裝好Intel HAXM驅動程式，這裡就要選x86或是x86_64系列的版本（ABI欄位的標示），才能夠使用虛擬CPU的加速功能。讀者可以在Recommended和x86 Images標籤頁選擇一個已經下載的版本（也就是名稱後面沒有標示Download的項目），然後按下Next按鈕，就會出現圖9的對話盒。對話盒左下方有一個Show Advanced Settings按鈕，按下它會顯示更多的設定項目。確認設定正確無誤後，按下Finish按鈕，就會開始建立模擬器。建立的過程可能需要一點時間，最後會顯示模擬器清單，如圖10。要啟動模擬器時，按下模擬器項目右邊的綠色三角形按鈕即可。按下鉛筆圖示按鈕可以改變模擬器的設定，最右邊的下拉式箭頭可以叫出其它模擬器選項。

圖7選擇要模擬的手機型號

圖8選擇模擬器使用的Android版本

圖9檢視模擬器的設定項目

圖10已經建立的模擬器清單

啟動模擬器之後，需要等待一點時間。等到出現模擬器首頁後，就可以將它的畫面解鎖。現在可以開始測試App專案。點選Android Studio工具列的Run按鈕（綠色三角形那一個），就會顯示圖11的對話盒讓我們挑選要使用的模擬器。這個對話盒會顯示已經啟動，和尚未啟動的模擬器。選定模擬器之後，可以勾選Use same selection for future launches。下次執行這個App專案時，就不會再出現這個對話盒。最後按下OK按鈕，就會開始編譯App專案，然後將App安裝到模擬器，並啟動它。這整個過程需要一點時間，讀者可以注意Android Studio畫面下方的狀態列顯示的訊息，圖12是App在模擬器上執行的畫面。

補充說明

如果想要結束模擬器上執行的App，只要按下模擬器畫面下方的「回上一頁」按鈕，也就是朝向左邊的三角形箭頭。如果結束模擬器，可以按下模擬器右邊控制列上方的「X」按鈕。

圖11 選擇App要安裝在哪一個模擬器

圖12 App在模擬器執行的畫面

動手修改App的執行畫面

雖然App專案已經可以執行，但是我們還不知道為什麼會看到這樣的程式畫面，而且程式只是顯示一行文字，沒辦法和使用者互動！沒關係，我們現在就來修改一下程式畫面，請繼續依照以下步驟操作：

步驟一：在Android Studio左邊的專案檢視視窗中，依序展開「app/res/values」，用滑鼠快按二下「字串資源檔」strings.xml，該檔案會開啟在Android Studio中央的編輯視窗中，如圖13。

圖13「字串資源檔」strings.xml的內容

設定Android Studio程式碼視窗的字體大小

點選Android Studio主選單File > Settings，在對話盒左邊展開Editor > Colors & Fonts > Font。對話盒上方有一個Scheme欄位，預設是Default，按下右邊的Save As按鈕，將Default複製到新的設定檔。複製之後就可以修改下方的Primary font和Size欄位，下方的預覽視窗會顯示目前設定的效果。設定完成後按下Apply按鈕，再按下OK按鈕，程式碼編輯視窗的字型和字體大小就會套用新的設定。
Android Studio選單和按鈕上的字體和文字大小也可以變更。在同一個對話盒左邊展開Appearance & Behavior > Appearance，勾選右邊Override default fonts by (not recommended)，在下方設定想要套用的字型和字體大小（建議挑選中文字型，顯示中文時才不會出現亂碼），按下Apply按鈕，再按下OK按鈕。

步驟二：將app_name字串內容修改如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">主程式的名稱叫做MainActivity</string>
</resources>

步驟三：仿照步驟1的操作方式，開啟res/layout資料夾中的activity_main.xml，這個檔案就是我們在程式畫面中看到的「介面佈局檔」。

步驟四：「介面佈局檔」有二種編輯模式，第一種稱為Design模式，我們可以利用滑鼠拖曳介面元件的方式來設計程式畫面。另一種是純文字的Text模式，也就是直接編輯程式碼。我們可以利用編輯視窗左下方的二個標籤進行切換。請讀者先切換到Design模式，然後從編輯視窗左邊的「介面元件工具箱」（Palette）中，找到Widgets元件群組，把裡頭的Button元件拖曳到程式畫面中，如圖14。程式畫面有二種預覽模式。左邊是App執行時的樣子，右邊藍色的部分會顯示每一個元件的型態和id。我們可以利用左上角的三個按鈕（參考圖14中的標示），切換App的預覽模式。圖14的左下角有一個Component Tree視窗，它會以樹狀圖的方式顯示「介面佈局檔」的架構。