Android Studio 2.2 通过Layout Editor建立UI

最新推荐文章于 2024-06-04 09:35:14 发布

燃烧的CO2

最新推荐文章于 2024-06-04 09:35:14 发布

阅读量892

点赞数

分类专栏： Android 文章标签： android android studio ui layout

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在Android Studio Layout Editor 中，你能通过拖拉控件代替手写布局XML到视觉设计编辑器从而快速建立布局。编辑器能在不同的Android设备和版本中进行预览，你能动态调整布局确保它在不同屏幕尺寸中效果很好。 Layout Editor 建立ConstraintLayout（支持库提供的一个最低兼容Android2.3(API 9)的布局管理）新布局时特别厉害。

这里提供Layout Editor的接口和功能的概要，通过 Build a Responsive UI with ConstraintLayout.学习怎么使用ConstraintLayout建立布局

编辑器介绍

当你打开一个XML布局文件出现Layout Editor。对应图1，是编辑器的区域如下：
1. Palette: 提供控件和布局的列表，你可以在编辑器中拖放到你的布局
2. Component Tree：显示你的布局视图层次结构。点击某项后看到它在编辑器中选择
3. Toolbar: 提供按钮来配置编辑器中你的布局外观以及布局属性
4. Design Editor：在Design和blueprint组合中显示你的布局
5. Properties：为当前选择的视图提供属性控制

图1. The Layout Editor showing the Design editor

当你打开XML布局文件，默认打开Design editor(如图1)。若要改为在文本编辑器的编辑XML，单击窗口底部的Text选项。而在文本编辑器，你也可以通过点击窗口右侧Preview 查看Palette,Component Tree,Design editor （如图2所示）。不过，在文本编辑器中Properties窗口是不可用的。

提示：你可以通过按Ctrl + Shift +左/右方向键切换Design和文本编辑器

图2.打开Preview窗口的文本编辑器

更改外观预览

可以通过Design editor顶部的按钮配置你的布局外形，在文本编辑器中的Preview窗口中也能使用这工具栏

图3.Layout Editor工具栏中按钮配置布局的外观

对应于图3中的数字，可用的按钮如下：

Design and blueprint: 选择您想如何在编辑器中查看您的布局，Design 视图显示布局的颜色预览，而Blueprint视图只显示View的概括，或者，你可以并排查看两个Design+Blueprint
Tip: 你可以按B这些视图之间切换
Screen orientation: 在横向和纵向中旋转设备
Device type and size：选择设备类型 (phone/tablet, Android TV, or Android Wear) 和屏幕配置 (尺寸和密度). 你可以从多个预配置的设备类型和自定义的AVD选择，或者从列表中选择Add Device Definition添加一个新的AVD
Tip: 你可以通过拖动布局的右下角调整设备的大小
API version: 选择Android系统版本预览您的布局
App theme: 选择预览使用的UI主题。 注意: 这仅适用于支持的布局样式;因此列表中许多主题会导致错误。
Language: 为你的UI字符选择语言，该列表只显示你已经配置的字符串资源。如果您想编辑您的翻译，从下拉菜单中单击Edit Translation(请参阅Localize the UI with Translations Editor).
Layout Variants: 切换到你选择文件的布局之一，或创建一个新的(请参阅Create a layout variant).

注意: 这些配置对您的应用程序的代码或manifest没有影响（除非你选择从Layout Variants中添加一个新的布局文件）；它们只影响布局预览

Create a New Layout

当需要为你的应用程序增加一个新的布局时，首先在你程序的默认layout/ 目录下创建一个布局文件使之适用于所有设备配置，一旦你有一个默认布局，你能为特定设备配置创建布局的Variants （如xlarge屏幕）- 如果这就是你想要做的，跳到创建Layout Variants 。

有几种不同的方式来创建新的布局，这取决于你的Project窗口视图，但下面的过程是从任何视图都需要经历的：

在Project窗口中，点击你想要增加布局的模块(比如app)
主菜单中，选择 File > New > XML > Layout XML File
在出现的对话框中，为文件输入名称，根布局标签(Root Tag), 并选择一个Target Source 。然后单击Finish。

图4.新增布局XML文件对话框

A couple other ways to start a new layout file (although the dialogs that appear are different) are the following:
另一个组合方式来开始新的布局文件（尽管出现的对话框是不同的）如下：

如果您选择Project视图在Project 窗口,打开应用程序模块res目录，右键你想增加布局的layout 的目录，然后单击New>Layout resource file
如果您选择 Android视图在Project窗口, 右键layout目录然后选择New > Layout resource file.

创建Layout Variants

如果你已经有一个布局而且想创建一个替代版本优化不同的屏幕尺寸或方向的布局，按下面的步骤：

打开你的原始布局文件，并确保您查看的Design editor（在窗口的底部单击Design）
在工具栏中点击Layout Variants，在下拉列表中，单击一个推荐的variant，比如Create Landscape Variant，或者点击Create Other然后继续下一步
在出现的对话框中，你只需要为定义目录名称选择qualifiers 您可以输入Directory name或从 Available qualifiers列表中，一次一个选择，然后单击Add。
一旦你添加了所有qualifiers, 点击OK.
当你有相同的布局的多种变化，可以很容易地在Layout Variants列表之间切换
有关如何为不同屏幕创建布局的更多信息，请参阅Supporting Different Screen Sizes

转换布局为ConstraintLayout

ConstraintLayout 是一个在Constraint Layout library使用的view group, 包含在Android Studio 2.2或更高版本。它是随着Layout Editor一起建立的，所以一切都是从Design editor访问，你永远不需要手动编辑XML，最重要的是，它是constraint-based 布局系统，可以让你建立大多数不嵌套任何view groups的布局。

为了提高布局的性能，你应该把旧的布局转换为ConstraintLayout。 Android Studio有一个内置的转换器来帮助你做到这一点：
1. 在Android Studio中打开你的现有布局，并且点击编辑器窗口底部的Design选项
2. 在Component Tree window, 右击layout并且点击Convert layout to ConstraintLayout

学习更多怎样用ConstraintLayout创建布局，请参与Build a Responsive UI with ConstraintLayout