AutoLayout的前世今生

简介: 今天你用AutoLayout了么?

诞生

AutoLayout是Apple在iOS 6的时候引入的新特性。

AutoLayout使用算法是Cassowary,Cassowary能够有效解析线性等式和线性不等式,用来表示用户界面中的相等关系和不等关系。同时提供一套规则系统,通过约束来描述View之间的关系。

AutoLayout不止有布局算法,还包含了一套布局引擎系统(Layout Engine),用于维护布局在运行时的生命周期。

如何工作

每个View在布局之前,Layout Engine都会先通过计算布局约束,得到View的Size和Position。

Layout Engine会监听约束的变化,当约束发生变化,就会触发约束的重新计算(比如添加、删除View、View的显示隐藏、修改约束条件或者约束优先级)。

在刷新布局时,Layout Engine会从上到下调用layoutSubviews()方法,同时计算出约束的frame,再赋值给View,最后调用superView的setNeedLayout方法来刷新布局。

性能问题

问题出现在View嵌套,并且有同层级View相互关联约束的时候(比如ViewA中,有一个ViewB和ViewC,ViewC有一条约束是ViewC的左侧等于ViewB的右侧偏移10个像素),对性能的影响是呈指数型增长的。

iOS 12之前,每次约束变化时,Layout Engine需要创建一个NSISEngier将约束关系重新计算,所以当约束关系多层嵌套后,计算量会呈指数增长。

iOS 12的Auto Layout更多地利用了Cassowary算法的界面更新策略,提高了约束计算的性能(WWDC 220 Session High Performance Auto Layout),让AutoLayout可以达到和Frame一样的性能。

UIStackView

UIStackView就是Apple在iOS 9时推出的新控件,目的就是仿造前端Flexbox的思路,提高开发效率。再两个相关联的View需要排列时,不再需要添加View之间的约束关系,而可以用Fill,leading,Center来约束他们的排列方式。这是一个推荐的用法。

目录
相关文章
|
2月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
95 0
|
移动开发 Dart
【新年快乐第二弹】在 Flutter 中使用交错网格视图创建瀑布流布局
马上过新年了,想好如何过年了吗?,今天我带大家在瀑布流布局中写新年快乐。 在 Web 和移动开发世界中,当我们想要显示大小不相同的项目网格时,瀑布流布局很有用。一个轴使用严格的网格布局,通常是列。在另一个轴上,项目具有不同的高度,但可以灵活排列以填满可用空间。使用瀑布流布局的一个著名例子是 Pinterest。他们为他们的网站和移动应用程序实现了这种布局,以显示不同大小的图像。
320 0
|
开发框架 Android开发 iOS开发
Android开发中TableLayout表格布局(一)
Android开发中TableLayout表格布局
627 0
Android开发中TableLayout表格布局(一)
|
Android开发 开发者 容器
Android开发中TableLayout表格布局(二)
Android开发中TableLayout表格布局
134 0
Android开发中TableLayout表格布局(二)
|
编解码 API Android开发
Android开发之AbsoluteLayout绝对布局
Android开发之AbsoluteLayout绝对布局
190 0
Android开发之AbsoluteLayout绝对布局
|
Android开发 iOS开发
Xamarin自定义布局系列——瀑布流布局
原文:Xamarin自定义布局系列——瀑布流布局 Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简称XF,下同)为我们提供大这么多的控件,但在实际使用中,会发现这些控件的可定制性特别差,基本上都需要里利用Renderer来做一些修改。
1133 0
|
iOS开发 Swift 数据可视化
iOS编程(双语版)-视图-Autolayout代码初步
一谈到Autolayout,初学者肯定想到的是IB中使用拖拽啊,pin啊各种鼠标操作来进行添加各种约束。 今天我们要聊得是如何利用代码来添加视图间的约束。 我们来看一个例子: (Objective-C代码) UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(100, 111, 132, 194)]; v1.
965 0