Xamarin.iOS UI Layout Guide

当你在进行 iOS 界面布局的时候,尤其是使用代码编写而不是使用可视化设计器的时候,了解 UI Layout Guide 非常有必要。

关键词:C# Xamarin iOS TopLayoutGuide LayoutMarginGuide ReadableContentGuide UILayoutGuide

StackOverflow 上面有比较详细的图文解说。如果认为下面的文字描述不足以理解,可以单击此处打开链接。

这是什么

作用

其实布局指南可以理解为辅助线,辅助线在建立约束的时候可以让你把约束钉到一个虚拟的视图上,并且减少性能消耗。

另外它起到类似出血框的作用(并不是出血的框,是指在印刷业裁剪纸张时,为避免误差造成页面中的有效内容被机器不小心裁剪掉而预留的安全距离,这也是平时使用 Word 文档排版时预留边距的原因之一)。

以上述 StackOverflow 的解说为例。

辅助等距排序

C# Xamarin iOS topLayoutGuide layoutMarginGuide readableContentGuide UILayoutGuide
UI Layout Guide 虚拟视图

这张图主要是讲述在需要等距排列的场合,传统的方式是在两个 UI 元素之间添加一个透明的 UI 元素(灰色区域)作为等距的空白处,然后通过约束把两个 UI 元素(绿色和红色区域)和透明 UI 元素首尾相接。这样做的意义在于通过让所有的透明元素的长度或宽度相等,实现两个可见元素之间的距离相等。

如果你尚不了解约束,可以查看 iOS 布局介绍。约束就是把一个元素的某条边,或者中心,或者尺寸,通过等式或者不等式建立联系,如同把一根绳子系在两个物件之上。

如图所示,你只能指定上方绿色元素红色元素保持恒定的距离(比如一个常数,假设10),却不能指定红色元素下方绿色元素保持上方绿色元素到红色元素的距离(即 10),因为约束的目标必须是已有的锚(四条边、中心和长宽,并没有一个元素到另一个元素的距离)。

你或许会认为,把下方绿色元素红色元素的距离也设置为 10 即可。但在自动布局的场合,距离通常是不固定的。比如当屏幕方向变化时,各元素应该彼此之间分散开来,以便填满整个屏幕,而不是所有的界面元素堆积在一个角落里。

使用额外的元素作为它们之间的空隙的填充,即可在不确定具体间隔多少的情况下,通过把各个辅助元素的宽度锚钉在一起(即要求它们的宽度时刻保持相等),实现等距的效果。

为什么不用透明的 UIView 作为布局的辅助工具

这种场合下,如果直接添加一个 UIView ,即使这个 UI 元素的背景设定为透明不可见,它仍然是一个 UIView,意味着它会像一个 UIView 一样消耗资源,即使它的作用并不是参与和用户的互动,而只是单纯为了排版。

这时如果使用 UI Layout Guide 代替透明 UI 元素,那么便可起到节约资源的作用,因为 UI Layout Guide 就是为了布局而存在的,没有多余的功能,也不会出现在视觉树(Visual Tree,在 iOS 中叫 View Hierarchy)上。

顺带一提,减少视觉树的元素可以有效降低消耗。换句话说,隐藏或者设置透明并不能减少消耗。你需要尽量减少界面上的元素,或者只在需要的时候加载。

系统级部件的锚

另外一个作用就是给开发者提供系统部件(比如标题栏、导航栏)的锚。链接中的解说提到 TopLayoutGuideBottomLayoutGuide

比如把元素顶部钉到 TopLayoutGuide 的底部 而不是根容器的顶部,可以避免被可能出现的导航栏覆盖。它们在 iOS 11 后被替换为 SafeAreaLayoutGuide ,如上面提到的出血框,起到确保内容能够被看见的作用。

其它 Layout Guide

ReadableContentGuide 可读内容指南,或者理解为内容可读性指南,如果把文字类的元素(比如 UILabel )的锚钉到上面,则可以确保大尺寸屏幕(比如平板)的使用者不需要移动头,只需要眼睛左右移动即可看完一行的内容。

你可以想象一下在巨大的宽屏电脑显示器上阅读一篇窗口最大化的文章,你需要运动头部才能把文字从左侧到右侧看完,而在多数手机屏幕上,你在阅读的时候甚至连眼睛也不用动。

LayoutMarginGuide 布局边界指南,每个 UIView 都有的属性,元素钉到一个 UIView 的 layoutMarginGuide 上面,默认等于钉在它的周边 8 个点距离的地方。想象一下一张照片有一个宽 8 个单位的相框,你便是钉在相框的锚上面。如果你不喜欢默认的 8 个点的距离,可以修改每一个 UIView 都有的 LayoutMargins 属性以更改它的 Margin 。

参考链接

StackOverflow – On iOS, what are the differences between margins, edge insets, content insets, alignment rects, layout margins, anchors…?

发表评论

电子邮件地址不会被公开。 必填项已用*标注