使用Designer編輯UI布局

使用Designer編輯UI布局

在此階段，示例 HelloDroid 應用程序的用戶界面基于一個非常簡單的布局。UI 布局在 activity_main.xml 文件中定義的，位于 res/layout 文件夾中。默認情況下，IntelliJ IDEA 提供布局文件的圖形視圖，但它也允許您切換到手動編輯布局文件的基于文本的視圖。

讓我們使用內置 UI 設計器修改自動生成的用戶界面，并查看應用程序布局如何呈現(xiàn)，而無需在任何物理或虛擬設備上運行應用程序布局。

1.打開布局文件

在“項目（Project）”視圖中，導航到該 res\layout 文件夾并選擇該 activity_main.xml 文件?！霸O計（Design）”窗格將在編輯器中打開。

該窗格顯示與當前布局定義文件和“組件樹（Component Tree）”視圖同步的矩形畫布，因此對畫布所做的任何更改都會相應地反映出來。

2.刪除現(xiàn)有的文本元素

讓我們刪除現(xiàn)有的文本元素。為此，請單擊以選擇視圖中的文本標簽，并右鍵單擊該標簽以調用上下文菜單。選擇“刪除（Delete）”以清除用戶界面：

3.添加一個ImageView小部件

現(xiàn)在添加一個ImageView小部件：從“小部件（Widgets）”選項板中選擇 ImageView 組件，然后單擊要插入小部件的畫布。或者，您可以將該小部件拖放到“設計（Design）”窗格中：

此時，該視圖包含圖像的占位符，但尚未與其關聯(lián)圖像。要將圖像添加到項目中，您首先需要在 res 下創(chuàng)建一個 drawable 文件夾。

4.創(chuàng)建'drawable'文件夾

在“項目（Project）”視圖中右鍵單擊該 res 節(jié)點并選擇：新建| Android資源目錄（New | Android resource directory）。從“資源類型（Resource type）”下拉列表中選擇 drawable。如有必要，請選擇任何可用的限定符。

只有當您希望為不同的屏幕、UI模式、密度或區(qū)域設置使用不同的資源集合時，才使用限定符（如“small”）。如果您打算使用一組資源，則不需要限定符。

要添加圖像，只需在 Windows 資源管理器中選擇圖像文件，并將它們拖到 IntelliJ IDEA 中的 drawable 文件夾即可。

5.將圖像文件鏈接到'ImageView'小部件

提示：在添加、編輯或刪除 UI 布局的圖形組件時，可以像使用 Designer 一樣使用組件樹（Component Tree）。您可以將小部件拖放到組件樹上，并從顯示的層次結構中刪除或編輯元素。

現(xiàn)在，您需要將您添加到 ImageView 小部件的圖像文件鏈接起來。在 UI 設計器中，您需要選擇小部件來編輯其屬性。您可以通過單擊來選擇小部件，但是，這有時可能是一項令人驚訝的艱巨任務。如果您添加了圖像窗口小部件但沒有附加圖像，則該窗口小部件將呈現(xiàn)為一個很難用鼠標進行選擇的非常薄的方框。這是組件樹進入營救階段時的情形，您可以輕松選擇所需的視覺元素。

1. 在“組件樹（Component Tree）”窗格中，選擇 imageView 組件并在其屬性的表中找到 src 條目：
   
   
2. 單擊瀏覽按鈕 并在打開的對話框中選擇要附加到小部件的圖像：
   
   
   該圖像將附加到小部件。您可以在設計師中選擇它并調整其大小和位置：
   
   

6.添加一個'TextView'組件

現(xiàn)在讓我們添加一個 TextView 組件。在調色板中，找到 Widgets 下的純 TextView 組件，然后將它拖放到圖像正下方的視圖中：

默認情況下，純文本視圖顯示一些文字文本：New Text。要更改它并將其鏈接到某個可本地化的字符串，您需要創(chuàng)建一個新的文本資源。

7.創(chuàng)建一個'String'資源

1. 在組件樹（Components Tree）中，選擇 TextView 元素并在下面的屬性表中找到 text 屬性。
2. 單擊“瀏覽”按鈕 調用“資源（Resources）”對話框，該對話框允許您選取現(xiàn)有字符串值或添加新值。請注意，字符串存儲在該 res | values 文件夾下的 strings.xml 文件中。如有必要，您可以直接編輯 strings.xml 文件。
3. 點擊：新建資源| 新建字符串值（New Resource | New String Value）。在打開的對話框中，輸入資源名稱并指定將在 TextView 小部件中顯示的文本：

8.為文本添加樣式

為了使文本看起來更有吸引力，您需要設置一些附加屬性。您可以通過編輯 TextView 組件的屬性來完成此操作 。我們來做下面的事情：

1. 水平居中標簽：將“gravity”屬性設置為：center_horizontal。
2. 填充文本一點：找到“padding”屬性并將所有值設置為：10dp。
3. 更改字體顏色：編輯“textColor”屬性。您可以將屬性值設置為顏色字符串，例如，#ffd764，或者您可以讓它引用顏色資源。要添加顏色資源，請單擊“瀏覽”按鈕 ，并創(chuàng)建一個具有值 #ffd764 的名為 welcomeText 的資源。
4. 更改字體大?。壕庉嫛癟extSize”屬性。您可以設置一個值，也可以按照與上面 TextColor 屬性相同的方式將其鏈接到大小資源 。請注意，您不能將尺寸指定為純數(shù)字。您必須始終添加 dp 后綴。

因此，您的用戶界面現(xiàn)在看起來如下所示：

9.在各種條件下預覽布局

Designer 工具窗口頂部的控件允許您在不同的條件下預覽UI布局：橫向或縱向，不同屏幕尺寸，使用不同的主題，針對不同的區(qū)域設置等。這為您提供了一種快速而簡單的方法，可以在許多常見方案中查看整個應用程序 UI 的外觀。

例如，請執(zhí)行以下操作：

• 點擊 圖標并從下拉菜單中選擇“預覽所有屏幕尺寸（Preview All Screen Sizes）”。IntelliJ IDEA 將在最常見的屏幕類型上顯示您的用戶界面布局的預覽。
• 要在不同設備上預覽應用程序布局，請單擊帶有當前設備名稱的圖標（在我們的例子中是 ），然后從列表中選擇。
• 點擊 可在布局和縱向預覽模式之間切換。