iOS LayoutAnchor 解读

本文内容来自Easier Auto Layout: Coding Constraints in iOS 9

iOS9下代码创建约束，不是把重点放在约束上，而是把重点放在约束所涉及到的属性上，这些属性为UIView为的anchor属性，包括为：

  • widthAnchor,heightAnchor
  • topAnchor,bottomAnchor
  • leftAnchor,rightAnchor,leadingAnchor,trailingAnchor
  • centerXAnchor,centerYAnchor
  • firstBaselineAnchor,lastBaselineAnchor

NSLayoutConstraint实例方法，每种形式有三种，如果忽略constant，则其值为0，如果忽略multiplier，则其值为1：

  • constraint(equalTo:)
  • constraint(greaterThanOrEqualTo:)
  • constraint(lessThanOrEqualTo:)
  • constraint(equalTo:constant:)
  • constraint(greaterThanOrEqualTo:constant:)
  • constraint(lessThanOrEqualTo:constant:)
  • constraint(equalTo:multiplier:)
  • constraint(greaterThanOrEqualTo:multiplier:)
  • constraint(lessThanOrEqualTo:multiplier:)
  • constraint(equalTo:multiplier:constant:)
  • constraint(greaterThanOrEqualTo:multiplier:constant:)
  • constraint(lessThanOrEqualTo:multiplier:constant:)
  • constraint(equalToConstant:)
  • constraint(greaterThanOrEqualToConstant:)
  • constraint(lessThanOrEqualToConstant:)

VFL的介绍与用法可以参考：

创建约束

The NSLayoutAnchor class is a factory class for creating NSLayoutConstraint objects using a fluent API.
NSLayoutAnchor是用来创建NSLayoutConstraint对象的工厂类。相对于原来创建约束的方法更简便。

// 使用NSLayoutConstraint创建约束
NSLayoutConstraint(item: subview,
                   attribute: .Leading,
                   relatedBy: .Equal,
                   toItem: view,
                   attribute: .LeadingMargin,
                   multiplier: 1.0,
                   constant: 0.0).active = true

NSLayoutConstraint(item: subview,
                   attribute: .Trailing,
                   relatedBy: .Equal,
                   toItem: view,
                   attribute: .TrailingMargin,
                   multiplier: 1.0,
                   constant: 0.0).active = true

// 使用Layout Anchors来创建约束
let margins = view.layoutMarginsGuide

subview.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true
subview.trailingAnchor.constraintEqualToAnchor(margins.trailingAnchor).active = true

NSLayoutAnchor有三个子类：

  • NSLayoutXAxisAnchor
  • NSLayoutYAxisAnchor
  • NSLayoutDimension

例如，如下创建的约束：

// 1
bookTextView.translatesAutoresizingMaskIntoConstraints = false
// 2
bookTextView.leadingAnchor.constraintEqualToAnchor(
                view.leadingAnchor).active = true
bookTextView.trailingAnchor.constraintEqualToAnchor(
                view.trailingAnchor).active = true
bookTextView.bottomAnchor.constraintEqualToAnchor(
                view.bottomAnchor,
                constant: -20).active = true
// 3
bookTextView.heightAnchor.constraintEqualToAnchor(
                view.heightAnchor,

active设置为true，表示其马上生效。

View Layout Margins
所有的view都有一个layoutMarginsGuide属性。相对于View Layout Margins创建的约束，在其view的边缘会留下一些空白的距离。

// 1
avatarView.translatesAutoresizingMaskIntoConstraints = false
// 2
avatarView.topAnchor.constraintEqualToAnchor(
                view.topAnchor).active = true
// 3
avatarView.leadingAnchor.constraintEqualToAnchor(
                view.layoutMarginsGuide.leadingAnchor).active = true
avatarView.trailingAnchor.constraintEqualToAnchor(
                view.layoutMarginsGuide.trailingAnchor).active = true
// 4
avatarView.heightAnchor.constraintEqualToConstant(200).active = true

如下，avatarView在左右两侧会留下空白的距离：


View Layout Margins

View Controller Layout Guides
同view一样，view controller 都有一个top和bottom的layout guide。

上图中，avatarView在状态栏的底部，但如果还有其他的透明的bars，例如导航栏和底部的tab bar，那么上面的avatarView，就会被遮挡住。

所以当给view controller的view的subviews，添加约束时，要约束到view controller的top guide的 bottom和bottom guide的top anchor

avatarView.topAnchor.constraintEqualToAnchor(
       topLayoutGuide.bottomAnchor).active = true

bookTextView.bottomAnchor.constraintEqualToAnchor(
             bottomLayoutGuide.topAnchor,
             constant: -20).active = true

效果如下：

效果

Readable Content Guide
上图中绿色的bookTextView，当前左右边缘对齐到屏幕的边缘，这样在iPad上显示时，非常不便于阅读。

使用 readable content guides，会根据size class来调整大小，这样会在边缘添加空白的距离，来跟适合阅读。

bookTextView.leadingAnchor.constraintEqualToAnchor(
             view.readableContentGuide.leadingAnchor).active = true
bookTextView.trailingAnchor.constraintEqualToAnchor(
             view.readableContentGuide.trailingAnchor).active = true

在iPad横屏下，显示如下：

iPad横屏

Intrinsic Content Size

所有的view都有一个intrinsic content size， 如果设置了content size，就不用创建width 和 height 约束。
UILabel的Intrinsic Content Size由font和text决定
UIView默认的Intrinsic Content Size是UIViewNoIntrinsicMetric，表示的是没有大小。

设置AvatarView的UIViewNoIntrinsicMetric

override func intrinsicContentSize() -> CGSize {
  return CGSize(width: UIViewNoIntrinsicMetric, height: 100)
}

其效果就如下：

效果

注意：如果想要在app运行时改变 intrinsic content size，可以调用invalidateIntrinsicContentSize()方法来更新

优先级

可能会出现如下的情况，chapterLabel被拉伸了，而我们希望的是avatarView被拉伸，如下：

优先级

通过设置ContentHuggingPriority和ContentCompressionResistancePriority来解决

setContentHuggingPriority(_:forAxis:) takes a priority and an axis to determine how much a view wants to stretch. A high priority means that a view wants to stay the same size. A low priority allows the view to stretch.高优先级表示view想要保持其原来的size，低优先级则允许view拉伸

setContentCompressionResistancePriority(_:forAxis:) also takes a priority and an axis. This method determines how much a view wants to shrink. A high priority means that a view tries not to shrink and a low priority means that the view can squish.高优先级表示view尽量不被压缩，低优先级表示view会被压缩

优先级大小在1到1000之间，1000是最高的，标准的优先值如下：

UILayoutPriorityRequired = 1000
UILayoutPriorityDefaultHigh = 750
UILayoutPriorityDefaultLow = 250

给chapterLabel设置优先级：

chapterLabel.setContentHuggingPriority(
                  UILayoutPriorityRequired,
                  forAxis: .Vertical)
chapterLabel.setContentCompressionResistancePriority(
                  UILayoutPriorityRequired,
                  forAxis: .Vertical)

这样保证chapterLabel其不会被拉伸和压缩

激活约束数组

上面的例子中，都是一个一个的激活约束，在设置好约束后，一起激活它们，这种方式会高效

这里写图片描述

如下的约束：

// 1
let labelBottom =
      titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor)
let labelCenterX = titleLabel.centerXAnchor.constraint(
      equalTo: centerXAnchor)

// 2
let imageViewTop =
      imageView.topAnchor.constraint(equalTo: topAnchor)
let imageViewBottom =
      imageView.bottomAnchor.constraint(
        equalTo: titleLabel.topAnchor)
let imageViewCenterX =
      imageView.centerXAnchor.constraint(
        equalTo: centerXAnchor)

// 3
let socialMediaTrailing =
      socialMediaView.trailingAnchor.constraint(equalTo: trailingAnchor)
let socialMediaTop = socialMediaView.topAnchor.constraint(equalTo: topAnchor)

//一起激活约束
NSLayoutConstraint.activate([
            imageViewTop, imageViewBottom, imageViewCenterX,
            labelBottom, labelCenterX,
            socialMediaTrailing, socialMediaTop])

由于imageView和titleLabel都有intrinsic size，所以需要设置优先级：

imageView.setContentCompressionResistancePriority(
            UILayoutPriorityDefaultLow,
            for: .vertical)
imageView.setContentCompressionResistancePriority(
            UILayoutPriorityDefaultLow,
            for: .horizontal)

Constraint Activation and Deactivation

根据不同的size class来active约束，即根据size class应用不同的约束

在traitCollectionDidChange(_:)方法中，捕捉trait collection的变化

override func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
  super.traitCollectionDidChange(previousTraitCollection)

  // 1
  if traitCollection.horizontalSizeClass == .Regular {
    // 2 激活和取消激活约束
    NSLayoutConstraint.deactivateConstraints(compactConstraints)
    NSLayoutConstraint.activateConstraints(regularConstraints)
    // 3
    socialMediaView.axis = .Horizontal
  } else {
    // 4 激活和取消激活约束
    NSLayoutConstraint.deactivateConstraints(regularConstraints)
    NSLayoutConstraint.activateConstraints(compactConstraints)
    socialMediaView.axis = .Vertical
  }
}

traitCollectionDidChange(_:)方法会捕获trait collection的改变

效果如下：


效果

还有一个小问题是，由于image的intrinsic content size的影响，水平时image并没有左对齐，但其实imageview是左对齐的

更新Constraint

约束更新周期

这里写图片描述

上面的图展示了view是如何被绘制的，可覆写更新view或约束的三个方法：

  • 所有的约束在updateConstraints()中被计算。This is where all priorities, compression resistance, hugging and intrinsic content size all come together in one complex algorithm.可以重写此方法来改变约束。
  • view在 layoutSubviews()做布局。 If you need to access the correct view frame, you can override this.
  • 在draw(_:)方法中，view被绘制

当size class发生变更时，view的布局更新是自动的，但你也可以调用左侧列出的setNeeds...() 方法触发布局

如下：

override func updateConstraints() {
  super.updateConstraints()
  // 1 计算比率
  var aspectRatio: CGFloat = 1
  if let image = image {
    aspectRatio = image.size.width / image.size.height
  }
  // 2 添加比率约束
  aspectRatioConstraint?.active = false
  aspectRatioConstraint =
        imageView.widthAnchor.constraintEqualToAnchor(
            imageView.heightAnchor,
            multiplier: aspectRatio)
  aspectRatioConstraint?.active = true
}

而且还需要在image发生变更时，需要一种方式来调用 updateConstraints()方法，但此方法不可直接调用，需要调用setNeedsUpdateConstraints()方法，它会在下一个运行循环中调用updateConstraints()方法

var image: UIImage? {
  didSet {
    imageView.image = image
    setNeedsUpdateConstraints()
  }
}

手工布局view

如果想获取到view的frame，唯一安全的做法是在 layoutSubviews() 中来获取

override func layoutSubviews() {
  super.layoutSubviews()
  if bounds.height < socialMediaView.bounds.height {
    socialMediaView.alpha = 0
  } else {
    socialMediaView.alpha = 1
  }
  if imageView.bounds.height < 30 {
    imageView.alpha = 0
  } else {
    imageView.alpha = 1
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 你说
    夜莺2517阅读 127,810评论 1赞 9
  • 天气应用-我的天气app体验报告
    版本：ios 1.2.1 亮点： 1.app角标可以实时更新天气温度或选择空气质量，建议处女座就不要选了，不然老想...
    我就是沉沉阅读 11,844评论 1赞 6
  • 送你一个晚安故事
    我是黑夜里大雨纷飞的人啊 1 “又到一年六月，有人笑有人哭，有人欢乐有人忧愁，有人惊喜有人失落，有的觉得收获满满有...
    陌忘宇阅读 12,734评论 28赞 53
  • 2015.9.17-盐鸭蛋
    兔子虽然是枚小硕 但学校的硕士四人寝不够 就被分到了博士楼里 两人一间 在学校的最西边 靠山 兔子的室友身体不好 ...
    待业的兔子阅读 7,515评论 2赞 9