4.1 版面配置設計畫面

請先開啟「res/layout/activity_main.xml」,預設以一個版面配置的設計畫面,讓開發或設計人員可在這個環境下進行設計,整體畫面如下圖:

畫面中的每個區塊都有其用途,詳細說明如下:

1. 左方為可使用元件區 (palette)

元件區是展示目前能夠使用的 Android 元件,其左邊是分類,右邊是元件選擇區,使用滑鼠點擊需要的元件後,再放置到中間預覽設計區中。

2. 中間為預覽設計區

目前版面配置的預覽區塊,也是編輯區域,使用滑鼠單擊可選擇元件, 若在滑鼠點擊元件,會在右方屬性區顯示該元件最常使用的屬性,可設定元件的 id 或顯示文字等屬性。

3. 上方則為快速功能圖示

在預覽區上方為版面的外觀顯示設定,可設定如預覽手機的外貌、翻轉、樣式與本版面使用在那一個類別等,另外,亦可為本版面新增多國語言的文字資源,如下圖:

多國語言資源設計將在下一章中介紹。

4. 元件樹(Component Tree)

元件樹以樹狀結構顯示版面中的元件,亦可將欲新增的元件置放在此,選擇某特定元件後,可在元件上按下滑鼠右鍵,選擇最後一項「Go To XML」可快速切換為 XML 原始碼並移至該元件處,如下:

點擊後會快速切換至 XML 中的元件定義處,如下圖:

5. 右方為元件屬性調整區:

被選擇元件常用的屬性設定區, 很常用的功能, 尤 其在新的 ConstraintLayout 約束版面中,更常需要用到屬性設定。