What’s New in Android Studio UI Design and Debugging Tools 摘录

  • Layout Editor
    • 为 ContrainsLayout 增加上下文菜单
    • 增强预览功能
    • 增强 ContraintLayout 在界面编辑器上的编辑能力
  • Navigation Editor
  • Resource Manager
    • 批量导入
    • 设置限定(就是 zh)
    • 资源归组
    • SVG 批量导入成 VectorDrawable
    • 支持一次性预览所有布局
    • 和 LayoutEditor 集成
    • 颜色选择
  • New In Layout Inspector(还没发布)
    • Android 10 上的机器 LayoutInspector 有 Buff 加成
  • Android 10 新加的东西

Layout Editor

为 ContrainsLayout 增加上下文菜单

(02:23) 上下文菜单增加快速让 COntrainsLayout 中组件居中的菜单,其实就是以前你要拉两条线,现在点一下菜单就帮你把这两条线拉好了,总比没有好

增强预览功能

  • (03:39) recyclerView 的预览能力得到增强,也就是可以设置 demo 数据预览 item 的布局
  • (09:04) 加强 SimpleData 功能,自带几种图片集合,可以直接设置到 ImageView 预览上

增强 ContraintLayout 在界面编辑器上的编辑能力

  • (05:57)约束布局增加约束弹窗,其实就是以前你需要拉线到另外一个 item 的时候,一定要拉到对应的原点处,现在可以直接拉到item 的上方,然后就会弹出一个让你选择的弹窗。还有一个场景就是,如果两个目标 item 是重叠的,以前是很难拉得到的,现在重叠的 item 也会弹出弹窗

  • (06:55) 左边的 ViewTree 视图增加了 ContrainLayout 的菜单,可以通过菜单直接设置对应的属性

  • (07:32) 右上方增加属性面板,就是你在 xml 上写的属性,可以通过这个面板直接敲了(终于可以不用预览面板和 XML 编辑器来回切换了

  • (08:08) Contraint Widget(就是 ContraintLayout 设置 Padding 的地方)现在可以直接设置 dimen 属性了,不用写死 dp

Navigation Editor

很多人估计不知道这个功能,放个截图看看

  • (11:18) 增加 navigation_graph ,所有的跳转信息都会存储到这个地方(感觉有点像 StoryBoard)

  • (12:59) 讲 navigation 连接功能,其实就是一个界面可以连接另外一个界面,会自动帮你创建跳转代码

  • navigation 当然也支持 fragment 的 setArgument 功能(其实就是自动帮你生成这部分代码,不过总比没有好)


    生成的代码,如图

Resource Manager

  • (15:01) 他说了一个很重要(坑爹)的点,我觉得提一下, res 目录设计的时候不是给用户使用的,是给 framework 使用的,所以为什么那么反人类。为了解决反人类的事情,加入了 Resource Manager

批量导入

  • (17:01) 支持批量导入,很多时候我们收到的切图是缺少某个文件夹,或者直接给 iOS 的切图(后缀为@2x之类的),如下图

    这个时候我们导入不得不改很多东西才能放进来, Resource Manager提供批量导入功能,可以自动帮我们解决这些问题

    映射规则是这样的

设置限定(就是 zh)

  • (18:13) 说白了就是以前我们要记住各种文件夹的生成规则,比如 a.png 需要放在 xxhdpi-zh-sw100dp 上,我们就要手动创建这个文件夹。现在你只需要在 Resource Manager 图形化设定这几个参数就可以了,Resource Manager 会自动生成

资源归组

(18:54)没啥好说的,其实就是一个资源如果有多个文件的情况下帮你自动

SVG 批量导入成 VectorDrawable

  • (19:23)支持 SVG 直接批量导入到 成VectorDrawable

支持一次性预览所有布局

(19:39) 其实就是 ResourceManager 为所有布局生成缩略图,可以让你比较容易的找到你想要的布局(我觉得还是没啥用

和 LayoutEditor 集成

(21:39)就是增加了一个拖动布局到 LayoutEditor 上,会自动创建 include标签
拖动 Image 进去会创建 ImageView

颜色选择

(23:19)就是在 colors.xml 左边的颜色标记上,直接打开颜色面板选择颜色(对独立开发者还是有点用的)

New In Layout Inspector(还没发布)

Android 10 上的机器 LayoutInspector 有 Buff 加成

  • (23:39) 属性面板增加正常可以看懂的属性,就是你写的是什么,显示的就是什么,不是一堆转换后的代码属性,看图

  • (25:33) LayoutInspector 在 Android10 的机器上支持实时联动,就是应用在滚动,LayoutInsepctor 的界面也在滚动

  • (26:20) 布局可以 3D 预览,看图(这大概是最有用的功能了)

  • (26:56) 在 Layout Inspector 选中具体属性,可以直接跳转到具体设置的地方,如果你这个 View 是被 Style 设置了 backgroundColor 会直接跳转到 Style 上

  • (27:43) Layout Inspector 可以直接显示 View 在那个布局上,详情看图的左边,可以看到所有的 View 的来源的布局都显示在这里

Android 10 新加的东西

(28:00)主要就是讲 Android10 新增加的东西才能使得 buildTools 能够实现以上功能,其中包括

  • Skia Picture
  • Fast Properties
  • Style Stacks

这里都是讲一些原理的东西,有兴趣的可以自己看