Android開發 | 構建簡單的頁面
阿新 • • 發佈：2020-10-18
一、簡單介紹
Android 應用的介面以佈局和微件的層次結構形式構建而成。佈局是 ViewGroup 物件，即控制棋子檢視在螢幕上的放置方式的容器。微件是 View 物件，即按鈕和文字框等介面元件。
Android 提供了 ViewGroup 和 View 類的 XML 詞彙表，因此介面的大部分內容都是在 XML 檔案中定義。不過，本節課將向你介紹如何使用 Android Studio 的 Layout Editor 建立佈局。佈局編輯器會在您拖放檢視構建佈局時為您編寫 XML 程式碼。
1.2. 佈局編輯器
首先，請按照以下步驟設定工作區：
- 在 Project 視窗中，依次開啟 app > res > layout > activity_main.xml。
- 要給 Layout Editor 留出空間，請隱藏 Project 視窗。為此，請依次選擇 View > Tool Windows > Project，或直接點選 Android Studio 螢幕左側的 Project
。 - 如果您的編輯器顯示 XML 原始碼，請點選視窗底部的 Design 標籤。
- 點選 Select Design Surface
，然後選擇 Blueprint。 - 在 Layout Editor 工具欄中點選 Show
，並確保已勾選 Show All Constraints。 - 確保 Autoconnect 處於關閉狀態。當 Autoconnect 處於關閉狀態時，工具欄中的提示會顯示 Enable Autoconnection to Parent
。 - 點選工具欄中的 Default Margins，然後選擇 16。如果需要，您可以稍後調整每個檢視的外邊距。
- 點選工具欄中的 Device for Preview
，然後選擇 5.5, 1440 × 2560, 560 dpi (Pixel XL)。
然後佈局編輯器應如圖所示
1.3. 佈局編輯器簡介
開啟 XML 佈局檔案時，就會顯示佈局編輯器。
- Palette：包含您可以拖到佈局中的各種檢視和檢視組。
- Component Tree：顯示佈局中的元件層次結構。
- 工具欄：點選這些按鈕可在編輯器中配置佈局外觀及更改佈局屬性。
- 設計編輯器：在 Design 檢視和/或 Blueprint 檢視中修改佈局。
- Attributes：用於對所選檢視的屬性進行控制的控制元件。
- 檢視模式：採用 Code
、Design 
或 Split 
模式檢視佈局。Split 模式會同時顯示 Code 和 Design 視窗。 - 縮放和平移控制元件：控制編輯器內的預覽大小和位置。
當您開啟 XML 佈局檔案時，預設會開啟設計編輯器，如圖 1 所示。如需在文字編輯器中修改佈局 XML，請點選視窗右上角的 Code 按鈕。請注意，在 Code 檢視中修改佈局時，Palette、Component Tree 和 Attributes 視窗不可用。
提示：您只需按
Alt + Shift + Right/Left arrow（在 Mac 上按Control + Shift + Right/Left arrow），即可在設計編輯器和文字編輯器之間切換。
1.4. 新增文字框
- 按照到父佈局頂部和左側的距離約束文字框
請按照下面的步驟新增文字框：
- 首先，您需要移除佈局中已有的內容。在 Component Tree 面板中點選 TextView，然後按 Delete 鍵。
- 在 Palette 面板中，點選 Text 以顯示可用的文字控制元件。
- 將 Plain Text 拖動到設計編輯器中，並將其放在靠近佈局頂部的位置。這是一個接受純文字輸入的
EditText微件。 - 點選設計編輯器中的檢視。現在，您可以在每個角上看到調整檢視大小的正方形手柄，並在每個邊上看到圓形約束錨點。為了更好地控制，您可能需要放大編輯器。為此，請使用 Layout Editor 工具欄中的 Zoom 按鈕。
- 點選並按住頂邊上的錨點，將其向上拖動，直至其貼靠到佈局頂部，然後將其釋放。這是一個約束條件：它會將檢視約束在已設定的預設外邊距內。在本例中，您將其設定為距離佈局頂部 16 dp。
- 使用相同的過程建立一個從檢視左側到佈局左側的約束條件。
1.5. 新增按鈕
- 在 Palette 面板中，點選 Buttons。
- 將 Button 微件拖到設計編輯器中，並將其放在靠近右側的位置。
- 建立一個從按鈕左側到文字框右側的約束條件。
- 如需按水平對齊約束檢視，請建立一個文字基線之間的約束條件。為此，請右鍵點選按鈕，然後選擇 Show Baseline
。基線錨點顯示在按鈕內部。點選並按住此錨點，然後將其拖動到相鄰文字框中顯示的基線錨點上。