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

最新推荐文章于 2020-04-17 18:24:40 发布

十月ooOO

最新推荐文章于 2020-04-17 18:24:40 发布

阅读量3.1k

点赞数

分类专栏： # iOS 文章标签：布局 ios swift 自动布局 autoLayout

本文链接：https://blog.csdn.net/KimBing/article/details/78541677

版权

iOS 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

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)