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

移动开发 waitig 784℃ 百度已收录 0评论

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已经熟了,这个应该很容易看懂,就是两个元素基于什么位置对齐的事【右击新窗口中打开 查看大图】

anchor  应用说明

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

这里写图片描述

// 已经存在的 三个变量: 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)

本文由【waitig】发表在等英博客
本文固定链接:NSLayoutConstraint 自动布局关系说明 Anchor iOS Swift
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)