codecamp

使用Android UI设计器添加和编辑布局组件

使用Android UI设计器添加和编辑布局组件

布局定义活动或应用程序窗口小部件(片段)的用户界面。布局是在 XML 资源定义文件中声明的。有关如何创建资源文件夹和资源定义文件的说明,请参阅创建Android应用程序资源

或者,可以使用 IntelliJ IDEA 提供的 Android 特定重构来手动编辑布局定义文件,并预览在专用"预览(Preview)"工具窗口中立即反映的更改,您可以在其中调整布局以适应各种平台和设备。要切换到手动模式,请单击“文本”选项卡或从“设计”窗格的上下文菜单中选择“转到声明”,或单击“预览(Preview)”窗口工具栏中的 图标。

利用 IntelliJ IDEA,您可以在不需要手动编辑布局定义文件的情况下构建应用程序的设计,并检查应用程序设计在各种目标环境中的呈现方式,而无需在任何物理或虚拟设备上运行应用程序。

在可视化(visual)模式下设计布局在 Android UI Designer 工具窗口的 Design 窗格中执行。该窗格位于 UI Designer 的中心部分(假定为默认工具窗口布局)。当您打开布局定义文件进行编辑时,默认情况下,该窗格将会显示在“编辑器”选项卡中。如果手动编辑布局定义文件,然后通过单击“设计(Design)”选项卡切换到可视模式,则窗格将在编辑后的布局定义文件的选项卡中打开,

该窗格显示一个与当前布局定义文件和“组件树(Component Tree)”视图同步的矩形画布,因此对画布所做的任何更改都会相应地反映出来。如果 IntelliJ IDEA检测到代码中存在任何差异,则会显示警告。

请注意,意图操作和快速修复在设计模式下可用,与手动编辑布局定义文件的方式相同。意图操作图标或快速修复图标显示在画布上、组件树或属性窗格中。

要构建 Android 应用程序的设计,请执行以下基本操作:

  • 从 Palette(组件面板)添加预定义的组件
  • 从 Android SDK 添加用户定义的组件和组件
  • 排列组件
  • 指定组件属性
  • 将组件转换为保存公共属性的其他类型
  • 预览布局

将预定义组件添加到画布

要将预定义的组件添加到画布,请执行以下操作之一:

  • 在“组件面板(Palette)”窗格中选择所需的元素,然后将其拖放到“设计(Design)”窗格中的画布上。
  • 在“组件面板(Palette)”窗格中单击所需的元素,然后单击画布上的某个区域。
  • 点击“组件面板(Palette)”窗格中所需的元素,然后点击你想要这个元素被定位的组件树。

以任何一种方式添加的每个组件都会添加到组件树中,并在布局定义文件中声明。

添加在您的项目或Android SDK中定义的组件

  1. 展开“组件面板(Palette)”窗格中的“自定义(Custom)”区域。
  2. 执行以下操作之一:
    • 要嵌入布局,请单击“包含(Include)”图标。在打开的“资源(Resources)”对话框中,单击“项目(Project)”选项卡以在您的布局定义中搜索,或单击“系统(System)”选项卡以在 SDK 中搜索。
    • 要添加组件的组合,请单击“片段(Fragment)”并在打开的资源对话框中选择要嵌入的片段。
    • 要添加用户定义的视图,请单击 CustomView,然后在打开的对话框中选择要插入的视图。

将组件放置在正确的位置

画布与组件树同步,因此您可以通过在任一窗格中移动它们中的任何一个来安排组件。

在画布上或组件树中选择所需组件并将其拖动到正确的位置,或者使用上下文菜单复制并粘贴它。

指定组件属性

您可以在画布中直接设置强制组件属性的值,或切换到“属性(Properties)”窗格以进行更深入的配置。

  • 如果要为画布中的基本属性指定值,请双击相关组件并在出现的弹出对话框中指定值。
  • 要深入配置组件属性,请在画布或组件树中选择组件,切换到“属性(Properties)”窗格,然后指定所选属性的值。

    单击“属性(Properties)”窗格中的右列以开始编辑属性。您可以单击浏览按钮,它显示在“选择”或“项目”或“系统资源”的右侧。

    • 默认情况下,该窗格只显示一组标准的属性,最常用的属性以粗体显示。要使窗格显示根据规范为选定组件定义的所有属性,请单击工具栏上的“显示专用属性(Show expert properties)”按钮
    • 要从 Android 引用中查看所选属性的简要文档,请单击工具栏上的“显示文档(Show documentation)”按钮或按 Ctrl+Q。
    • 具有更新值的属性以蓝色突出显示。要放弃所做的更改并返回到默认值,请选择该属性并单击工具栏上的“恢复默认值(Restore default value)”按钮

将组件转换为另一种类型

在某些情况下,您可能需要将已完全配置的组件转换为另一种类型的组件。使用 IntelliJ IDEA,您可以在不丢失指定属性的情况下执行此操作:这两种类型通用的所有属性都将保留在新组件中。这个操作被称为变形。

  1. 在工作区或组件树中选择要转换的组件,然后在选择的上下文菜单上选择“变形(Morphing)”。
  2. IntelliJ IDEA 显示兼容组件类型的列表,即所选组件可以转换的类型。选择目标类型并配置未在原始组件中配置的属性。
创建Android应用程序图标
IntelliJ IDEA预览布局定义文件的输出
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

IntelliJ IDEA的一般准则

什么是IntelliJ IDEA项目

使用IntelliJ IDEA的意图行为

IntelliJ IDEA使用运行/调试配置

特定于VCS的程序

IntelliJ IDEA语言和特定框架指南

IntelliJ IDEA的数据库和SQL功能

IntelliJ IDEA使用之JavaServer Faces(JSF)

IntelliJ IDEA:分析PHP应用程序的性能

IntelliJ IDEA:调试PHP应用程序

IntelliJ IDEA:适用于PHP的Google App Engine

IntelliJ IDEA更多内容

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }