Build a UI with Layout Editor(翻译文章)Android Studio 可视化界面编辑器

原文

   在Android Studio 的布局管理器中，你能够迅速的通过在可视化编辑器中拖拽控件而不用在xml文件中手动编辑了。这个编辑器能够在不同的尺寸上的设备预览你的布局。你可以自动调整你的布局保证能在不同的设备上适配。这个布局管理器在你使用ConstraintLayout进行布局的时候功能显得尤为强大。ConstraintLayout是一个提供兼容库兼容到 2.3以上的库。

此页将简单介绍布局编辑器的使用。想学习更多的关于ConstraintLayout的知识，请

介绍

当你用Android Studio 打开一个XML的layout文件的时候就可以看到编辑器了。如下图所示

1. 调色板：提供一个空间/布局的控件列表，这些东西你可以直接拖拽到编辑器中。

2. 组件列表/组件树：展示你的布局的继承布局关系，点击一下就能在编辑器中看到对应控件被选中。

3. 工具栏：提供一些能配置布局的展示效果和能够编辑布局的按钮选项等。

4. 设计编辑器：把你的设计图按照设计图纸真实展现出来，还能看到设计的蓝图。

5. 属性：提供可以修改控件的一些属性。

  当你打开一个xml的布局文件，布局编辑会默认打开。就想上图所示。你想切换到XML的文件编辑器的状态，你可以点击屏幕下方的Text Tab 按钮。在你使用xml文件编辑器的同时，你也可以点击编辑器右边的预览按钮，查看Palette，组件的继承关系。就像下图所示一样。但是属性窗口就看不到了哦。

小贴士：你可以使用快捷键 Control+Shift+Right/Left ，切换文本/拖拽两种编辑模式。

修改预览效果

上图所示的功能现在来一一介绍：

1. 设计蓝图：可以切换到你想展示的样子，窗口中会显示真是的预览效果并且还会显示只包含view轮廓的设计蓝图。这两种试图也可以并排显示。 小贴士：你可以按 B 键进行切换。
2. 屏幕方向：你可以横向纵向切换你预览设备。
3. 设备类型和尺寸：选择设备类型（手机 /pad/ 手表） 屏幕配置（尺寸、像素密度）。你可以从预先定义好的设备类型、或者你自己定义的设备中选择一个。或者从列表中选择一个新的AVD进行重新定义。 小贴士：你可以拖拽右下角进行缩放操作。
4. API version：选择一个Android系统版本预览你的布局。
5. App 主题：选择一个主题应用到你的预览中。 提示：只支持 layouts的布局属性，所以有个主题显示会出现问题。
6. 语言：选择一个string的资源文件夹显示在你的预览中。只会显示你项目中已经适配的语言资源。如果你想编辑的翻译文件，从下拉菜单中 选择Edit Translations 选项。
7. Layout Variants（这个会翻译）：从下来菜单中选择一个layout文件应用到你的预览中，或者创建一个新的。

创建一个新的布局文件

当你给应用添加一个新的布局，在你的项目的默认路径layout/ directory 下创建这个文件，这个布局文件就可以在不同的设备上使用。一旦你有一个一个默认的layout布局文件之后，你可以创建一个layout文件的子类应用于特殊的设备上。（比如 配置 xlarge 的屏幕）如果你想创建一个layout另外的配置文件，跳转到创建一个layout 的变种。

There are a few different ways to create a  new  layout, depending on your Project window view, but the following procedure is accessible from any view:

有几种方法可以创建一个新的layout，取决于你的项目窗口视图，但是下面的这个步骤你在任何界面都可以。

1. 在项目窗口，点击你想添加layout文件的module

2. 在顶部主菜单中 选择 File > New > XML > Layout XML File.

3. 弹出一个提示窗，给这个文件取一个名字，根布局tag，目标资源列表（main、debug、release）意思就是你创建的这个资源是给哪个资源用的。

另一种创建layout文件的方法如下：

* 如果你正在项目视图的project结构视图下，打开这个项目modle的res目录，右键res/layouts目录，然后 New > Layout resource

* 如果你在项目视图的android结构目录下，右键layout文件然后点击 New  > Layout resource

* 列表内容

创建layout变量

   如果你已经有一个layout文件夹了，你想创建另一个同类型的layout文件针对不同的屏幕尺寸/横屏 优化布局文件 ，使用如下步骤：

打开你的原始的layout文件夹并且确保你正常的浏览Design  editor  编辑器

点击的Layout Variants 在toolbar里面，然后在下拉列表中，你可以选择系统建议的Create Landscape Variant然后确定，或者点击创建Other然后点击下一步

在弹出的对话框中，你只需要给文件名命名的时候给文件名使用资源限定符。你可以在目录名字中直接输入或者从可用限定符的列表中选择一个。一次选一个，然后点击添加。

当你已经添加完毕所有想添加的，然后点击确定。

当你有很多layout的变种文件时候，你可以通过点击 Layout Variants 很方便的在下来列表中选择他们。

想知道更多的关于创建不同尺寸屏幕的layout文件， 看这里

Convert a layout to ConstraintLayout

ConstraintLayout is a view group available in the Constraint Layout library, which is included with Android Studio 2.2 and higher. It was built from the ground up along with the  Layout Editor , so everything is accessible from the Design editor and you never need to edit the XML by hand. Best of all, its constraint-based layout system allows you to build most layouts without nested any view groups.

For improved layout performance, you should convert older layouts to ConstraintLayout. Android Studio has a built-in converter to help you do this:

Open your existing layout in Android Studio and click the Design tab at the bottom of the editor window.

In the Component Tree window, right-click the layout and then click  Convert layout to ConstraintLayout.

To learn more about how to build a layout with ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

Add Views to Your Layout

Building a layout for your app requires that you understand the layout fundamentals, but Android  Studio  takes away many of the complexities of working directly in the XML files. The Layout Editor helps you accomplish a lot of work by dragging widgets into the Design editor and refining layout attributes in the Properties window.

To start building your layout, simply drag views from the Palette pane into the Design editor. As you place a view in the layout, the editor indicates the view’s relationship with the rest of the layout in a manner appropriate to the type of layout in which you place it.

For example, video 1 shows how dragging a TextView into a ConstraintLayout creates constraints below and aligned left to the above TextView (this is with Autoconnect enabled).

Video 1.The Layout Editor can add constraints for your view when you drag it into the editor

When dragging views into a layout other than ConstraintLayout, the Layout Editor responds differently, as appropriate for the layout properties available for that layout.

Any errors detected in your layout are counted in the toolbar. To view them, click Show Warnings and Errors .

The appearance in the Design editor is for preview only. Although editing your layout in the Design editor can get you far with accurate appearances, you should run your app on an emulator or real device to verify the results.

For more information about how Android’s View APIs work to build a layout, see Layout Fundamentals. Or for a guide to using ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

Edit the view properties

Figure 5. The Properties window

Instead of editing your view properties in XML, you can do so from the Properties window (on the right side of the Layout Editor). This window is available only when the Design editor is open, so be sure you’ve selected the Design tab at the bottom of the window.

Select a view in the editor to see and edit common properties for that view. If you need to access more properties for the view, click View all properties .

When the selected view is a child of ConstraintLayout, the Properties window includes a view inspector at the top with several controls, as shown in figure 7. For more information about the property controls for views in a ConstraintLayout, see Build a Responsive UI with Constraint