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視窗,它會以樹狀圖的方式顯示「介面佈局檔」的架構。



圖14 修改後的「介面佈局檔」activity_main.xml

 

步驟五:按下Android Studio工具列的Run按鈕執行程式,等程式啟動完成之後,就會看到圖15的結果。


圖15修改後的App執行畫面

 

我們學會了如何利用Android Studio建立App,並且在「介面佈局檔」中加入一個按鈕。但是按下按鈕之後,程式不會執行任何功能,因為我們並沒有加入處理按鈕的程式碼。沒關係,後續教學再讓我們一步一步解開Android App的神秘面紗!


    全站熱搜

    androidstation 發表在 痞客邦 留言(0) 人氣()