Android Studio官方文档之使用布局编辑器来设计UI界面

Android Studio官方文档之使用布局编辑器来设计UI界面

本节由nyk翻译，jkYishon审校。

1、前言

Android Studio中提供了一个高级的布局编辑器，它可以使你直接向布局中拖放现成的组件和提前预览你正在编辑的布局的样式。

在这个布局编辑器中，你只需要点击底部的Design按钮或Text按钮，就可以在布局的文本视图和设计视图中来回切换。

2、在文本视图中编辑布局

你可以在文本视图中编辑布局文件，这部分描述的是在文本视图中可用的功能

（1）预览布局文件

当你在文本视图中编辑布局文件时，点开窗口右边的预览面板，可以预览到当前布局在设备上的样子。在预览面板中，你可以通过改变顶部的各种选项实现不同的预览，包括实现在不同的设备、主题、系统版本上等等的预览。点击预览图标选择你想要的设备，你可以看到在特定的设备外壳下你的app的预览图。下图是在Nexus 4上的预览示例

选择设备的下拉菜单中的Preiew All Screen Devives选项，可以同时预览界面在多个设备上的样子。

当你点击预览界面时，布局编辑器会高亮你选中控件的相关代码，反之亦然。

（2）编辑过程问题的发现和修正

当你在文本视图中编辑布局的XML文件时，Android Studio会标记语法错误并提供辅助。

例如，假设你正在向布局中添加一个Button，结果你错拼成Buttonn。Android Studio会显示以下的错误提示信息来帮助你修正它，你可以点击”Change to Button”来修正这个XML文件中的信息。

Android Studio还可以提示你补上漏写的代码。例如，假设你正在向布局xml文件中添加一个fragment。首先，Android Studio会有代码自动补全的提示。一旦Android Studio意识到你正在添加一个fragment，就会显示一个错误信息面板，这个面板上有链接，点击链接可以帮你补上未写的控件属性。如下图所示，点击Automatically add all missing attributes会在布局xml文件中补全fragment的代码。

（3）选择一个主题预览

点击主题图标选择App预览时的主题。
下图是Select Theme的弹窗，你可以搜索特定的主题或在右边界面中选择一个主题，你选择的主题会应用到你预览的界面中。

（4）本地化

Android Studio内建了区域化支持。当你点击区域化图标时，你可以选择一个特定的区域，可以添加和编辑关键字的翻译，可以在所有区域或单个区域下预览你的app对区域化的支持，还可以对从右向左的语言支持从右向左的预览。

可以点击查看怎样在app中支持不同的区域化中的支持多种不同语言的描述。

例如，下图就是一个”Hello World”App对区域化的预览。

3、在设计视图中编辑布局

你可以通过点击窗口底部的Design按钮切换到图形编辑器中。当在Design视图中时，你可以通过拖放窗口左边控制面板中的控件来实现界面中控件的显示和隐藏。点击窗口右边的Component Tree可以显示一个控制板，这个控制板中有当前布局的控件层级关系和布局中每一个View的属性设置。

当你拖放一个控件到你App的布局中时，界面会随时改变以应对你放置控件。例如，如下图所示，假设你拖放一个控件到FrameLayout中，界面就会显示一个网格状帮助你放置组件。

在图像编辑器中，你可以通过拖放到你想要的位置。

（1）多个API版本下的渲染

Android Studio提供多API版本下的渲染。当你点击Design视图中Android版本图标，你可以预览多个API版本下的布局。

（2）快照

当你在设备上运行你App时，你可以通过点击日志控制板（默认在窗口底部）中的左边的相机图标来获取一张快照，这是一张你正在运行App的快照（或者你的设备当前显示的界面），并显示在当前窗口中。设置Frame Screenshot可以显示在你选择的设备外壳下的快照。你还可以指定这个快照是否有强光或倒影效果。一旦得到你想要的想过，你可以保存它。

你可以用同样的步骤在App的预览界面创造快照，只需要点击预览界面的相机图标。