0
点赞
收藏
分享

微信扫一扫

NSLayoutConstraint 自动布局关系说明 Anchor iOS Swift

NSLayoutConstraint 自动布局关系说明

NSLayoutConstraint 官方文档: ​​https://developer.apple.com/documentation/uikit/nslayoutconstraint​​​
三种实现对齐的方法:​​​链接​​​
UILayoutGuide:​​​https://developer.apple.com/documentation/uikit/uilayoutguide​​

有三种设置约束的方法,这里只说一种最常用,最科学,最安全的方法: 用各种 Anchor 来设置约束

先看个例子:

// 获取父元素边界
let margins = view.layoutMarginsGuide

// 将 myView 的左边界与父元素的左边界对齐
myView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true

// 将 myView 的右边界与父元素的右边界对齐
myView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true

// 将 myView 长宽比约束为 1:2
myView.heightAnchor.constraint(equalTo: myView.widthAnchor, multiplier: 2.0).isActive = true

如果你之前用 Interface Builder已经熟了,这个应该很容易看懂,就是两个元素基于什么位置对齐的事【右击新窗口中打开 查看大图】

NSLayoutConstraint 自动布局关系说明 Anchor iOS Swift_autoLayout

举个例子你就明白了:
定义如下图所示的约束,在一个 view 的容器中,有两个 block 位置如图。

NSLayoutConstraint 自动布局关系说明 Anchor iOS Swift_自动布局_02

// 已经存在的 三个变量: blueBlock orangeBlock view

blueBlock.leadingAnchor .constraint(equalTo: view.leadingAnchor , constant: 10).isActive = true
blueBlock.topAnchor .constraint(equalTo: view.topAnchor , constant: 10).isActive = true
blueBlock.bottomAnchor .constraint(equalTo: view.bottomAnchor , constant: 10).isActive = true
blueBlock.widthAnchor .constraint(equalToConstant: 100).isActive = true

orangeBlock.leadingAnchor .constraint(equalTo: blueBlock.leadingAnchor , constant: 10).isActive = true
orangeBlock.topAnchor .constraint(equalTo: view.topAnchor , constant: 10).isActive = true
orangeBlock.bottomAnchor .constraint(equalTo: view.bottomAnchor , constant: 10).isActive = true
orangeBlock.widthAnchor .constraint(equalTo: blueBlock.widthAnchor , multiplier: 2)


举报

相关推荐

0 条评论