Android筆記(4)：第一個APP程式顯示Hello World

Photo by Sten Ritterfeld on Unsplash

在開始撰寫 Android 程式前，先認識一下 MVC 架構。所謂的 MVC 模式（Model–View–Controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。[維基百科]

• 模型(Model)：編寫程式應有的功能、邏輯（實現演算法等）、資料庫專家進行資料管理和資料庫設計(可以實現具體的功能)。
• 視圖(View)：圖形介面設計與顯示，使用 XML 對佈局版面(Layout)進行定義，並呈現 Model 處理的結果。
• 控制器(Controller)：負責轉發請求，對請求進行處理。在 Android 中，運用 Activity 當控制器，處理與用戶互動的問題。

MVC 已經是一種很廣泛流行的架構，視圖層(View)和流程控制(Controller)分開的好處是當用戶介面更新時，不用重新編譯所有的程式，只需更新視圖層的設定即可。同樣的，如果流程改變時，只需要修改控制器或模型層即可。使用 MVC 模型，會讓程式的架構變的比較簡單，程式維護起來會更簡單快速，Android 也是採用這個架構模型。

要設定用戶界面(User Interface, 簡稱 UI)，通常會使用以下 4 種方法：

1. 使用 XML 佈局版面(Layout)文件控制 UI 界面。
2. 在 Java 代碼中控制 UI 界面。
3. 使用 XML 和 Java 代碼混合控制 UI 界面。
4. 開發自定義的 View。

要使用 XML 佈局版面來控制 UI 界面通常有兩種方法：一是直接在圖形編輯畫面拖曳，並在屬性視窗設定參數。另一種是直接依照 XML 格式編寫指令、屬性等。前者的編寫方式僅限於圖形介面，如要設定各元件間的參數會比較不方便，有時還要找半天參數位置在哪裡? 比較建議開啟 XML 檔案進行編輯，使用屬性參數來定義各元件的顯示方式或位置的排列。

Android 要撰寫一個顯示「Hello World」的畫面，還不需用到寫程式，只要在圖形界面上，拖曳元件放在畫面上適當的位置，APP就寫完了。如果要使用 XML 指令及屬性編寫佈局版面，就需要一點點基本知識，先用以下例子說明這兩個方式如何進行：

[圖形界面進行編輯]

開啟新專案後，選擇左方樹狀目錄 app → res → layout，開啟 activity_mail.xml(下圖(1))，右方出現編輯的圖形化介面(下圖(2))，可以看到預設顯示的畫面中央有個 textView，顯示「Hello World」(下圖(5))，先點選這個文字框，右方會顯示這個文字框的 Attribute 屬性(下圖(3))，點選「Common Attribute」，找到「text」可以改變文字內容，「textSize」可以設定文字大小，「textColor」可以設定字的顏色。
若要新增其他元件，可以按住下圖(4)中的元件，拖曳到下方的元件樹(Component tree)，下圖(5)就會出現該元件的圖形，點選圖形後，就可以進行相關參數設定。若要切換圖形編輯與文字編輯介面，可以按下圖(6)的「Code」進入文字編輯模式，「Design」進入圖形編輯的模式。

設定好屬性後，如要執行程式可參考以下「執行APP程式」一節。

[文字界面進行編輯]

畫面佈局的檔案位於樹狀目錄下的：app → res → layout，點擊 active_main.xml，使用上圖(6)的 Code 按鈕，可以進入文字編輯模式，將原來的文字刪除，改成以下內容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello"
        android:textSize="48sp" >
    </TextView>

</RelativeLayout>

這裡有兩個元件：RelativeLayout 跟 TextView，前者是佈局版面(Layout)的元件，Layout 的結構定義了元件排列方式，這裡使用相對佈局(RelativeLayout)的方式，讓元件呈現在手機/平板畫面上，android:layout_width 和 android:layout_height 設定跟上一層的父元件相容。TextView 則是一個文字框，可以將字串放在這個框內，設定其文字大小、字體、顏色等屬性。在之後的筆記中，在詳細說明這些元件的用法。

[執行APP程式]

使用圖形界或文字編輯方式編寫好視圖(View)層的畫面後，如要執行程式，可以在最上方的工具列選單選擇「Run」→「Run app」，或按下工具列的綠色往右箭頭，也可以按下快捷鍵  Shift   +   F10  執行專案。如果編譯過程沒有錯誤，可開啟 AVD 虛擬裝置畫面看到以下執行結果：

到這裡，各位應該有很多疑問？如何使用 XML 設定佈局版面(Layout)及元件，如 ProgressBar、Buttom、imageView等，如何開始編寫控制流程？都是接下來要筆記的重點。

[參考資料]

• 維基百科：MVC
• 明日科技：Android開發從入門到精通