使用Designer編輯UI布局

使用Designer編輯UI布局

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

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

1.打開(kāi)布局文件

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

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

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

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

3.添加一個(gè)ImageView小部件

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

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

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

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

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

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

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

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

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

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

6.添加一個(gè)'TextView'組件

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

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

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

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

8.為文本添加樣式

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

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

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

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

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

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

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