使用Designer編輯UI布局

使用Designer編輯UI布局

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

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

1.打開布局文件

在“項(xiàng)目（Project）”視圖中，導(dǎo)航到該 res\layout 文件夾并選擇該 activity_main.xml 文件?！霸O(shè)計(jì)（Design）”窗格將在編輯器中打開。

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

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

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

3.添加一個ImageView小部件

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

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

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

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

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

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

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

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

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

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

6.添加一個'TextView'組件

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

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

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

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

8.為文本添加樣式

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

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

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

9.在各種條件下預(yù)覽布局

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

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

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