预览布局定义文件的输出

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

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

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

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

访问布局预览

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

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

选择编辑模式:

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

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

在不同的环境中预览布局

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

项目

提示

描述

配置以在 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)”对话框中,指定将存储布局定义的文件夹,并选择确定特定设备配置的资源限定符。选择相关的限定符并单击

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

预览代表示例(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):选择此选项以在不同的预览选项之间切换。

用于呈现布局的虚拟设备

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

转到下一个状态

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

主题

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

N/A

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

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

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

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

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

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

让 IntelliJ IDEA 更新预览。

调整预览外观

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

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

项目

提示

描述

缩放以适应

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

重置缩放至100%

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

放大

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

缩小

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

跳转到源代码

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

刷新

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

保存截图

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

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

选项

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

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

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

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

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

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

  1. 前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件

    前端江太公 前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...

  2. 【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

    文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览 方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...

  3. 【文献管理】Zotero插件QuickLook || 让Zotero具备文献预览功能

    目的:让Zotero具备文献预览功能 Zotero不能预览pdf文件,需借助QuickLook插件才可以实现预览功能 第一步:安装Zoteroquicklook插件 插件下载地址:https://gi ...

  4. 智能媒体管理产品文档转换/预览功能介绍(1)---Cloud Native架构

    一.导语 办公文档是每个人日常频繁使用的工具,ppt.word.xls.wps.pdf等为我们工作和生活带来了很多的便利,本文介绍在云计算和智能手机时代,基于 智能媒体管理 的新型Cloud Nati ...

  5. 用微软接口实现在线预览功能+iframe

    我们有的时候需要在线预览功能:2-doc/docx/ppt等office文件 1:文件类型filetype:1-html/pdf/png/jpeg等 {type == 1 && < ...

  6. 网页中JS实现(调用)打印预览功能

    近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...

  7. HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...

    本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...

  8. js直接显示html,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例.pdf...

    JS实实现现可可直直接接显显示示网网页页代代码码运运行行效效果果的的HTML代代码码预预览览功功能能实实例例 本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大 供大 参 ...

  9. 文档文件等网页端预览功能

    要实现word.ppt.excel.pdf等文档在web应用端预览功能,目前一般做法为:   在页面的显示效果: 主要用的工具: Openoffice4(windows.linux):SWFTools ...

最新文章

  1. java文件的相对路径_java中使用相对路径读取文件的写法总结 ,以及getResourceAsStream() (转)...
  2. WIN-8“内置管理员无法激活此应用”问题
  3. 推荐系统常用术语 [ACM暑校]
  4. 【ARM】Tiny4412裸板编程之MMU(页 4K)
  5. Eclipse更改默认字符集 设置UTF-8
  6. VS2017打开低版本的VS MVC架构的项目的时候需要修改的地方
  7. JSP 编译原理:JSP 是 Servlet?如何用 Eclipse 查看 JSP 编译生成的 Servlet 源文件?
  8. android 半透明色值_Android 色值转换成透明度色值
  9. http各类攻击及tcpcopy工具
  10. CST学习笔记------材料边界
  11. Linux系统如何查看内存
  12. Java 纸牌游戏 牛牛 逻辑代码 实现
  13. 计算机卡登录界面,windows10系统卡在登录界面的解决方法
  14. ConneR and the A.R.C. Markland-N
  15. 浅谈Retrofit封装-让框架更加简洁易用
  16. 图像分割库segmentation_models.pytorch
  17. MATLAB-将数据读取/写入excel表格
  18. 当时的我很淘气openeim003
  19. ros下使用rosserial和STM32F1/STM32F4系列进行通信(MDK5工程)
  20. java日期类型_Java 学习笔记 (三) Java 日期类型

热门文章

  1. 内核系统调用openat Hook(Android10)
  2. ABAQUS学习(1):打开求解好的cae文件并查看云图
  3. 面试常问!!TCP的三次握手与四次挥手理解
  4. ES6详细知识点汇总
  5. 右键我的电脑后点击属性没有高级系统设置(桌面我的电脑等图标的恢复)
  6. linux 查看软件版本
  7. win10无法为此计算机验证,Win10系统下网站验证码无法显示怎么解决?
  8. 关于IXP2400的基本结构和功能(1)
  9. zookeeper分布式应用程序协调服务
  10. 何红辉设计模式之六大原则