idea网页预览功能_IntelliJ IDEA预览布局定义文件的输出

╰半橙微兮° 2022-11-10 14:58 991阅读 0赞

预览布局定义文件的输出

通过使用 IntelliJ IDEA，您可以预览当前打开的布局定义文件的输出，而无需启动物理设备或虚拟设备。更新布局定义文件时，预览会动态更新。使用布局预览，您可以将您的应用程序调整到不同的 Android 平台、设备、方向、停靠模式、区域设置等。

根据设计 Android 应用程序布局的模式，你可以以不同的方式预览输出：

在专用“预览(Preview)”工具窗口中，手动编辑布局定义文件。打开布局定义文件并切换到“文本(Text)”选项卡时，会出现工具窗口。

在编辑器中，使用 Android UI 设计器编辑布局。

访问布局预览

访问布局预览的方式如下：

在编辑器中打开所需的布局定义文件。

选择编辑模式：

要手动编辑布局，切换到“文本(Text)”选项卡。将会打开“预览(Preview)”工具窗口。

要在“设计器(Designer)”工具窗口中编辑布局，请切换到“设计(Design)”选项卡。在此选项卡中，您可以在可视模式下编辑布局而无需编辑文本定义文件。

![0a84d1f4610babe7dc5f05f217452b0a.png][]

在不同的环境中预览布局

使用“预览(Preview)”工具窗口或“设计(Design)”选项卡的控件来模拟目标配置以运行应用程序。下表列出了所有可用选项：

项目

提示

描述

![d41f91c25ae01fadc0f0507dea4cc2b1.png][]

配置以在 IDE 中呈现此布局

从此下拉列表中，选择要预览和编辑的布局配置，创建新的布局配置或选择不同的预览选项。可用的选项是：

创建横向变量(Create Landscape Variation)：选择此选项可创建布局的横向版本。相应的布局定义文件将在res\\layout-land文件夹中生成。一旦创建了这个变量，这个菜单选项将被替换为切换到layout-land 选项，该选项打开layout-land\\.xml文件以进行编辑。

创建 layout-xlarge变量(Create layout-xlarge Variation)：选择此选项可为您的布局创建变量，以获得超大尺寸的屏幕尺寸(至少960x720 dp)。相应的布局定义文件将在res\\layout-xlarge文件夹中生成。一旦创建了这个变量，这个菜单选项将被替换为切换到layout-xlarge 选项，该选项打开layout-xlarge\\.xml文件以进行编辑。

切换到布局(Switch to layout)：只有创建了多个布局版本时，此选项才可用。选择它返回到原始布局定义文件。

创建其他(Create Other)：选择此选项可创建布局的另一种变量。在打开的“选择布局目录(Select Layout Directory)”对话框中，指定将存储布局定义的文件夹，并选择确定特定设备配置的资源限定符。选择相关的限定符并单击

![b8f82850215ada7adadb93171c3bece2.png][]。然后在打开的对话框中指定限定符的值。限定符被添加到选择的限定符列表中。

预览代表示例(Preview Representative Sample)，选择此选项可显示多个设备配置，并在最重要的屏幕尺寸上预览布局。

预览所有屏幕尺寸(Preview All Screen Sizes)：选择此选项可显示多个设备配置，并预览所有可用屏幕尺寸的布局。

预览所有区域设置(Preview All Locales)：选择此选项以预览将要使用应用程序的所有区域设置中的布局。

预览从右到左布局(Preview Right-to-Left Layout)：选择此选项可以并排预览两个方向(从左到右和从右到左)的布局。

预览 Android 版本(Preview Android Versions)：选择此选项以预览所有已安装的Android API 版本的布局。

包含预览(Preview Included)：选择此选项可预览嵌套在另一个布局中的布局。此选项仅在当前布局包含在其他布局中时可用。

预览布局版本(Preview Layout Versions)：选择此选项可显示多个设备配置并预览所有可用变体中的布局。

无(None)：选择此选项可返回到默认视图。

切换布局模式(Toggle Layout Mode)：选择此选项以在不同的预览选项之间切换。

![48d029f97fc0172be1c8a23c8fad5e62.png][]

用于呈现布局的虚拟设备

从此下拉列表中选择一个虚拟或物理设备，以预览您的应用程序在此设备上的外观。要添加新的虚拟设备，请选择“添加设备定义(Add Device Definition)”并在打开的 Android 虚拟设备(AVD)管理器中配置仿真器。

![d09f303b19ef07a06265190c35a83a17.png][]

转到下一个状态

从此下拉列表中选择预览方向(纵向或横向)，UI模式(Normal, Car Dock, Desk Dock, Television, Appliance)，并在夜间(变暗屏幕)和非夜间(标准亮度)模式之间切换。

![3d31cd67315c3bc0ef6d8fe94a9c269c.png][]

主题

点击此按钮从“选择主题(Select Theme)”对话框中选择一个主题。

![534a8661d3609e85029331ac01ca4dcb.png][]

N/A

点击此按钮将布局与活动相关联。选择与关联以将其与当前活动相关联，或者与其他活动关联以显示可供选择的可用活动的列表。

![fe1d56e09d35e0e5ae7aa8dc1155027e.png][]

用于在 IDE 中呈现布局的区域设置

从此下拉列表中选择一个现有区域设置或为您的应用程序添加区域设置。区域设置是目标国家和语言的组合，以便根据当地规则和偏好提供日期和其他一些数据。您还可以在所有可用语言环境中以及在两个方向(从左到右和从右到左)预览布局。

![b1b3dad817a26753fcb5264d063e62e5.png][]

在 IDE 中呈现布局时使用的 Android 版本

从此下拉列表中选择一个 API 版本或使用“自动选取最佳(Automatically Pick Best)”选项来使用最合适的 Android 版本呈现布局。您还可以预览所有已安装的 Android API 版本的布局。

通常，当您更新定义文件时，预览会即时更改。如果没有，点击刷新按钮

![579473f8d1af79859df1f97b176ede66.png][]让 IntelliJ IDEA 更新预览。

调整预览外观

在预览工具窗口中预览布局输出并在编辑器中手动设计布局时，可能需要移动工具窗口的边界，以便在编辑器中提供更多空间。在这种情况下，压缩预览使其适合工具窗口大小可能会有所帮助，但仍可反映在模拟环境中的布局输出。

使用工具栏中的控件调整布局预览的外观：

项目

提示

描述

![712a0153639e65216288c88aae8c689f.png][]

缩放以适应

切换此按钮以使 IntelliJ IDEA 压缩或扩展预览，使其适合目标屏幕大小。

![47517d892f280d5180b365be9e0cfdfb.png][]

重置缩放至100％

点击此按钮让 IntelliJ IDEA 重置缩放以预览实际大小。

![ac0b4e08e9ddc1f813aa85146ae9c83d.png][]

放大

点击此按钮让 IntelliJ IDEA 展开预览。

![62e1ac4c8d06bcbdcd44810c38732cb3.png][]

缩小

点击这个按钮让 IntelliJ IDEA 压缩预览。

![e91888f4dc30a7b878949f727a772ed7.png][]

跳转到源代码

单击此按钮切换到“文本(Text)”选项卡，您可以在其中编辑源.xml文件中的应用程序布局。

![6ec1dde85eaa230fe7ebd72e0b5018fb.png][]

刷新

点击此按钮让 IntelliJ IDEA 更新预览，以便它反映对当前布局定义的即时更改。

![5848ea4f57b31087b438dcbd74bfce6e.png][]

保存截图

点击此按钮截取应用程序预览。

此按钮仅可在布局预览窗口的文本选项卡中使用。

![af9e35abbeb5bc6abecb5037f84f7a1f.png][]

选项

单击此按钮可配置工具窗口的外观和行为。

隐藏非布局文件(Hide for non-layout files)：选择此选项可让 IntelliJ IDEA 在编辑器中的焦点切换到非布局文件时临时关闭工具窗口。只要同一个或另一个布局定义文件处于焦点状态，工具窗口就会自动重新出现。

包含设备框架(Include Device Frames)(如果可用)：选择此选项可使预览看起来像将出现在实际设备上。

显示灯光效果(Show Lighting Effect)：选择此选项可显示灯光效果，使预览看起来更自然。

此选项仅在选择包含设备框架选项时可用。

[0a84d1f4610babe7dc5f05f217452b0a.png]: /images/20221022/fc1d5423a4f643398db1ae752e79b929.png
[d41f91c25ae01fadc0f0507dea4cc2b1.png]: /images/20221022/5c05358a4627453e81415692d780b142.png
[b8f82850215ada7adadb93171c3bece2.png]: https://img-blog.csdnimg.cn/img_convert/b8f82850215ada7adadb93171c3bece2.png
[48d029f97fc0172be1c8a23c8fad5e62.png]: https://img-blog.csdnimg.cn/img_convert/48d029f97fc0172be1c8a23c8fad5e62.png
[d09f303b19ef07a06265190c35a83a17.png]: https://img-blog.csdnimg.cn/img_convert/d09f303b19ef07a06265190c35a83a17.png
[3d31cd67315c3bc0ef6d8fe94a9c269c.png]: https://img-blog.csdnimg.cn/img_convert/3d31cd67315c3bc0ef6d8fe94a9c269c.png
[534a8661d3609e85029331ac01ca4dcb.png]: https://img-blog.csdnimg.cn/img_convert/534a8661d3609e85029331ac01ca4dcb.png
[fe1d56e09d35e0e5ae7aa8dc1155027e.png]: https://img-blog.csdnimg.cn/img_convert/fe1d56e09d35e0e5ae7aa8dc1155027e.png
[b1b3dad817a26753fcb5264d063e62e5.png]: https://img-blog.csdnimg.cn/img_convert/b1b3dad817a26753fcb5264d063e62e5.png
[579473f8d1af79859df1f97b176ede66.png]: https://img-blog.csdnimg.cn/img_convert/579473f8d1af79859df1f97b176ede66.png
[712a0153639e65216288c88aae8c689f.png]: https://img-blog.csdnimg.cn/img_convert/712a0153639e65216288c88aae8c689f.png
[47517d892f280d5180b365be9e0cfdfb.png]: https://img-blog.csdnimg.cn/img_convert/47517d892f280d5180b365be9e0cfdfb.png
[ac0b4e08e9ddc1f813aa85146ae9c83d.png]: https://img-blog.csdnimg.cn/img_convert/ac0b4e08e9ddc1f813aa85146ae9c83d.png
[62e1ac4c8d06bcbdcd44810c38732cb3.png]: https://img-blog.csdnimg.cn/img_convert/62e1ac4c8d06bcbdcd44810c38732cb3.png
[e91888f4dc30a7b878949f727a772ed7.png]: https://img-blog.csdnimg.cn/img_convert/e91888f4dc30a7b878949f727a772ed7.png
[6ec1dde85eaa230fe7ebd72e0b5018fb.png]: https://img-blog.csdnimg.cn/img_convert/6ec1dde85eaa230fe7ebd72e0b5018fb.png
[5848ea4f57b31087b438dcbd74bfce6e.png]: https://img-blog.csdnimg.cn/img_convert/5848ea4f57b31087b438dcbd74bfce6e.png
[af9e35abbeb5bc6abecb5037f84f7a1f.png]: https://img-blog.csdnimg.cn/img_convert/af9e35abbeb5bc6abecb5037f84f7a1f.png