Constraint Layout 2.0 介绍

本文为 Sean McQuillan 发布于 Medium 的文章译文
原文链接为 Introducing Constraint Layout 2.0
本文仅作为个人学习记录所用。如有涉及侵权,请相关人士尽快联系译文作者。

Constraint Layout 是最受欢迎的 jetpack 库之一,我们很高兴地分享 Constraint Layout 2.0的发布! 它具有您熟悉的 Constraint Layout 1.1的所有功能,可快速构建复杂的布局,并与 Android Studio 集成了工具来预览 XML 甚至编辑布局。

Constraint Layout 2.0为 Constraint Layout 带来了几个新功能。 要使用它,请在 build.gradle 中修改版本。
implementation “androidx.constraintlayout:constraintlayout:2.0.1”
在2.0版本中,我们还为 Constraint Layout 创建了一个 github 存储库。 当前是只读存储库,我们正在准备去开启 pull requests。

Flow

Flow 是用于构建链的新虚拟布局,当链用完时可以缠绕到下一行甚至屏幕的另一部分。 当您在一个链中布置多个项目时,这很有用,但是您不确定容器在运行时的大小。 您可以使用它来根据应用程序中的动态尺寸(例如旋转时的屏幕宽度)构建布局。

动画显示Flow创建了多个链作为元素过量填充一行

Flow 是虚拟布局。 约束布局中的虚拟布局是参与约束和布局的虚拟视图组,但不将层次添加到层次结构中。 而是,它们在“约束布局”中引用其他视图以完成布局。


Visualization of flow modes "none", "chain", "align"

您可以使用 Flow 标签在 Constraint Layout 2.0中添加 Flow。 Flow 将围绕您在 constraint_referenced_ids 中传递的视图创建一个虚拟视图组,并将参考视图按链排列。

<androidx.constraintlayout.helper.widget.Flow
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:flow_wrapMode="chain"
   app:constraint_referenced_ids="card1, card2, card3"
   />

Flow 最重要的选项之一是 wrapMode,它允许您配置内容溢出(或换行)时的处理方式。
您可以为 wrapMode 指定三个选项:

  • none:创建单个链,如果内容不合适,则溢出
  • chain:溢出时,为溢出元素添加另一个链
  • align:类似于链,但将行对齐为列

要了解有关 Flow 的更多信息,请阅读官方文档

Layer

新的助手:Layer,可以让你从多个视图创建虚拟图层。 与 Flow 不同,它不会展示视图。 取而代之的是,Layer 使你可以一次将变换应用于多个视图。
如果要构建动画以一起旋转,平移或缩放多个视图,这将很有用。


使用图层,一起将变换,应用于多个视图

图层在布局期间会调整大小,并将根据其引用的所有视图进行调整。
要在 Constraint Layout 2.0 中添加图层,请使用 Layer 标签:

<androidx.constraintlayout.helper.widget.Layer
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:constraint_referenced_ids="card1, card2, card3"
   />

Motion Layout

新的MotionLayout的集成示例

集成示例代码在 Github 仓库。
MotionLayout 是 ConstraintLayout 2.0中最令人期待的功能之一。 它提供了一个丰富的动画系统来协调多个视图的动画。 MotionLayout 基于 ConstraintLayout 并对其进行扩展,以允许您在多组约束(或ConstraintSets)之间进行动画处理。 您可以自定义视图如何移动,滚动,缩放,旋转,淡化甚至设置自定义属性动画。 它还可以处理基于物理的手势并控制动画的速度。 使用 MotionLayout 构建的动画是可搜索且可逆的。 这意味着您可以跳到动画中的任何点,甚至可以向后播放。
动作编辑器集成在 Android Studio 中,可让您使用 MotionLayout 生成,预览和编辑动画。 在协调多个视图时,可以轻松调整动画的精细细节。
了解有关运动编辑器的更多信息,请阅读 Scott Swarthout 的博客文章
通过动手指南学习 MotionLayout,请查看运动布局代码实验室
Motion Layout 是一种通用的动画工具。你可以使用它在 Android 上构建几乎所有动画。 但是,在两种情况下,与其他选项相比,Motion Layout 在构建动画方面更胜一筹。

  • Seekable animations —— 由其他输入驱动的动画,例如响应滚动的折叠工具栏
  • State transitions(状态转换) —— 由状态更改驱动的动画,例如用户进入屏幕

新的Motion Layout Integrations示例展示了如何使用Motion Layout为这些用例构建丰富的动画。 每个屏幕都旨在展示您可以使用Motion Layout构建的实用动画效果,以及如何与其他视图建立集成。

Constraint Layout 2.0有很多新功能。 查看文档,代码实验室和示例,以开始在您的应用中使用它。

We can’t wait to see what you build!(我们迫不及待的想看看你,用 Motion Layout 去创造一些东西!)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342