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文件针对不同的屏幕尺寸/横屏 优化布局文件 ，使用如下步骤：

1. 打开你的原始的layout文件夹并且确保你正常的浏览Design editor 编辑器
2. 点击的Layout Variants 在toolbar里面，然后在下拉列表中，你可以选择系统建议的Create Landscape Variant然后确定，或者点击创建Other然后点击下一步
3. 在弹出的对话框中，你只需要给文件名命名的时候给文件名使用资源限定符。你可以在目录名字中直接输入或者从可用限定符的列表中选择一个。一次选一个，然后点击添加。
4. 当你已经添加完毕所有想添加的，然后点击确定。
   当你有很多layout的变种文件时候，你可以通过点击 Layout Variants 很方便的在下来列表中选择他们。

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

转化你的layout布局到ConstraintLayout
ConstraintLayout 是一个Constraint布局库里面的一个可用视图组。在 Android Studio 2.2 还有更高版本中可以使用。直接可以从 Layout 编辑器的界面上直接操作，你可以不去手动编辑xml文件。最方便的是基础约束系统允许你建立大多数的布局儿不用内嵌任何视图组。

   为了提供layout性能，你最好转换之前的布局到ConstraintLayout，Android Studio 已经建立了一个工具帮助你做这些：

1. 在Android Studio 打开已经存在的layout布局并且点击编辑器窗体底部的设计栏。

2. 在窗体组件输上，右键点击layout布局然后点击转换布局到ConstraintLayout

如果想学习更多的关于ConstraintLayout的布局，see Build a Responsive UI with ConstraintLayout

添加视图到布局

---

   给app构建布局需要你懂布局文件构建的基本原理。除此之外Android Studio 已经去掉了许多对xml进行修改的复杂操作。许多操作你可以直接在布局编辑器中拖拽控件并且把属性展示在页面的右方。

   开始构建你的布局，从 Palette pane 简单的拖拽到编辑器中间，当你拖拽一个view到布局中，编辑器会给出一个恰当的提示，告知view与当前的布局中剩余部分的关系你可以选择何种属性关系。

下面是视频中展示如何拖拽一个 TextView 到 ConstraintLayout 中并且设置在Textview控件下方并且左对齐。
视频地址 视频只有大概10S左右。

   当拖拽一个view到一个非ConstraintLayout 布局中的时候，布局编辑器效果是不同的，会给出当前的布局可用的属性。

  错误提示会已数字方式在toolBar上显示，想看到它，点击 Show Warnings and Errors .

   在布局管理器中的效果只是用于预览，所以编辑器中你看到的效果与实际运行效果有偏差，你最好在模拟器或者是真是设备上跑你的布局获得真是运行效果。

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.
想要知道更多的关于 View APIs 如果构建的，see Layout Fundamentals，或者想知道如何使用ConstraintLayout布局的，see Build a Responsive UI with ConstraintLayout

编辑控件的属性

---

   可以不在xml文件里面编辑属性的另一种方法，你能够从Properties window （在布局编辑窗口的右边）中直接进行操作。你确保你已经选择 窗体底部的 Design tab 窗口按钮。

   在编辑窗口中选择一个控件编辑控件通用属性。如果你需要进入更多的属性窗口，点击View all properties

   当你选择一个在ConstraintLayout布局里面的view的时候， Properties window 窗口在最上面将显示view的检查器，想要知道更多see Build a Responsive UI with Constraint