首页 技术 正文
技术 2022年11月23日
0 收藏 764 点赞 3,903 浏览 3050 个字

使用Auto Layout处理比例间距问题

Auto Layout 是一个掌握起来很具有挑战性的东西。iOS 9引入的 Stack Views和 layout 锚点有一些帮助,但是明白如何创建特定的 layout仍有一定难度。

在这篇文章中我想着眼于一个经常出现的情形: 你需要沿一个轴向按固定比例放置视图。可能并不是十分明显, 但是这个需求可以通过 一个multiplier中心对齐来轻松实现,它是一种在有无Stack Views情况下都可以使用的技术。

问题

设想我们要构建这样一个布局,上面有两排图片视图,都是基于父视图宽度和高度的某一百分比放置。之所以使用图片视图, 是因为如果意外地把它们拉伸或压缩了, 可以十分明显得看出来。

使用Auto Layout处理比例间距问题

当视图适应不同的屏幕大小时, layout 会保持相同的比例。下面是同一个视图在横屏模式下的情形:

使用Auto Layout处理比例间距问题

一旦你看出来我们是基于视图中心进行对齐的,你就会发现我们可以只使用中心对齐约束来创建整个布局。对每个imageView,我们需要一对约束来确定其在X轴和Y轴的位置,一般的格式是这样的:

imageView.CenterX = view.CenterX * modifierimageView.CenterY = view.CenterY * modifier

modifier参数将imageView放置在父视图尺寸的某个百分比的位置上,如下所示:

使用Auto Layout处理比例间距问题

寓教于乐。这里有三种方式来创建该布局,第一是使用 IB, 第二是用代码添加约束,第三是使用 stack view.

使用Interface Builder创建约束

对每个 image view 我们需要添加两个约束。使用文档大纲工具栏或者直接在视图画布中按住 control 键从 image view 中拖拽到父视图上。每一个都添加一个“Center Horizontally in Container”和“Certer Vertically in Container”约束。

使用Auto Layout处理比例间距问题

现在, 编辑每个约束来设置我们需要的百分比例。下面是左上角的红心图片视图的水平和垂直约束设置:

使用Auto Layout处理比例间距问题

注意这也是给我们的约束添加identifiers 的好时机。完成后,你应该添加了10个约束,如下所示:

以代码形式创建约束

在看添加约束的代码之前,我要提下一个常见的错误,当使用代码添加视图时, 你需要关闭视图的 autoresizing mask 向 constraints 的转变。如果不这样做,系统会自动创建约束,这会和我们创建的约束发生冲突。

//...code to create image view...imageView.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(imageView)

有几种创建这些约束的方法,我将会在视图控制器的 viewDidLoad 方法中创建. 一个简单的辅助函数会使创建每个 NSLayoutConstraint 的过程不那么麻烦:

func addConstraintFromView(subview: UIView?,                         attribute: NSLayoutAttribute,                        multiplier: CGFloat,                        identifier: String) {  if let subview = subview {    let constraint = NSLayoutConstraint(item: subview,            attribute: attribute,            relatedBy: .Equal,            toItem: view,            attribute: attribute,            multiplier: multiplier,            constant: 0)    constraint.identifier = identifier    view.addConstraint(constraint)  }   }

这样就可以创建并添加一个相对于父视图的约束 (使用视图控制器的 view 属性)。NSLayoutAttribute 参数在水平约束中为 .CenterX,在竖直约束中为 .CenterY。例如,下面是上面一行的红心图片视图的约束:

// vertical constraintaddConstraintFromView(heartTop,              attribute: .CenterY,             multiplier: 0.667,             identifier: "heartTop center Y")              // horizontal constraintaddConstraintFromView(heartTop,              attribute: .CenterX,             multiplier: 0.5,             identifier: "heartTop center X")

剩下的和这个类似,全部设置见示例代码。

使用Stack View呢?

无论何时只要你遇到水平或垂直布局的问题,你就要想到 stack view。向 stack view 中添加 image views 是很简单的,但是如何配置呢? 我们不想让stack view中堆满views, 所以 Axis 选择水平轴向, 使用“Equal Spacing”分布方式:

现在我们需要约束 stack view 的大小和位置:

  • 使用和设置图片视图竖直位置相同的方式设置每个 stack view 的竖直位置。使用modifier中心约束 (例如顶部 stack view 使用 stackView.centerY = 0.667 * superview.centerY 约束)。

  • 向每个 stack view 添加一个水平居中的约束。

  • 最后的约束需要一点小小的技巧,我们需要确定 stack view 的宽度,使用 stack view 的 leading 和 trailing 边缘是最简单的方式:

使用Auto Layout处理比例间距问题

左上的 image view 的中心应该是父视图中心的 0.5 倍. 那么我们需要 stack view 的左边向左移动image view 宽度的一半. image view 大小时 100×100, 所以我们需要在约束中减去 50:

使用Auto Layout处理比例间距问题

注意在 IB 中添加这个约束时你需要改变第二项为 superview center,equal spacing 分布方式将会为我们修正 trailing 位置. 用类似的方法处理下方的 stack view,于是我们最终结果如下:

使用Auto Layout处理比例间距问题

这是我发现的一种用代码添加约束要比在IB中编辑简单得多的一种情形,尤其是当我们可以在运行时计算 image view 的大小时。

2016-01-31 更新: 还有一个更简单的方法,为最左边图片的中心添加一个约束,stack view 会改变大小来适应,而不需要计算图片的大小。详见代码。

补充阅读

你可以在 GitHub CodeExamples( https://github.com/kharrison/CodeExamples/tree/master/AutoLayout )上找到这篇帖子的代码,它包含IB、代码和 stack view 三个版本,你可以比较下这几个方法。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,047
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:4,905
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:5,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,593
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:6,806
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,235