UIScrollView：如何在代码中使用AutoLayout

在阅读本文之前，但对UIScrollView ，我强烈建议您在UIScrollView上阅读此介绍文章。

PS：自从我在Brian YouTube网站上开设Brian Voong的Youtube课程以来，我已经将自己转换为程序编码员，这意味着我100％的UI员工使用的是代码而不是故事板。

首先第一件事：

最初，事情对我来说看起来很简单，只是：

• 将UIScrollView添加到主UIView 。
• 在UIScrollView上添加顶部，左侧，右侧，底部自动布局约束。
• 将UILabel （显示很多文本）作为子视图添加到刚刚添加的UIScrollView 。
• 在此新添加的UILabel上添加上，左，右，下AutoLayout约束。

然后，我认为事情应该正常进行。 虽然不是这样。

问题：UIScrollView无法滚动。

原因：尚未正确设置UIScrollView的contentSize。

如何以正确的方式做到这一点：

1. 在现有或新创建的项目中，创建一个新的Swift文件：ScrollViewController.swift

2.在ScrollViewController中，添加所有UI元素将很快使用。

  let text =“”“ Lorem ipsum dolor amet，除其他外为adhuc aperiri nam。按商品价格出售commodo melatore ea eam，按商品价格出售commodo meliore ea e。 persius pro，id cum falli accusam。在欧洲有良好的党派，多名成员，在nam。tempor poscent有意向书。 ad eam。per ce lalit vivendum。Ei sit null null aliquam，ferri epicuri quo。ex vim tibique accumsan erroribus。per libris verear adipiscing。Purto aliquid lobortis ea quo oa ea，ut utinam oportere qui。 

  fileprivate让scrollView：UIScrollView = { 
 让scrollView = UIScrollView（） 
  scrollView.translatesAutoresizingMaskIntoConstraints = false 
  scrollView.backgroundColor = .green 
 返回scrollView 
  }（）fileprivate让contentView：UIView = { 
 让view = UIView（） 
  view.translatesAutoresizingMaskIntoConstraints = false 
  view.backgroundColor = .purple 
 返回视图 
  }（）fileprivate让titleLabel：UILabel = { 
 让标签= UILabel（） 
  label.translatesAutoresizingMaskIntoConstraints = false 
  label.numberOfLines = 0 
  label.font = UIFont.preferredFont（forTextStyle：.headline） 
  label.textAlignment = .left 
  label.backgroundColor = .yellow 
  label.text =“ App” 
 返回标签}（）fileprivate let appDisplay：UILabel = { 
 让textView = UILabel（） 
  textView.translatesAutoresizingMaskIntoConstraints = false 
  textView.backgroundColor = .cyan 
  textView.numberOfLines = 0 
  textView.font = UIFont.preferredFont（forTextStyle：.body） 
 返回textView 
  }（） 

在上面的代码中，我们添加了一个UIScrollView，一个UIView的contentView和两个UILabel。 就像UITableViewCell中的contentView一样，此contentView将是所有显示视图的父视图。 在此示例中，我们使用两个UILabel。 其背后的原因是，管理所有显示视图的位置，过渡和其他与UI相关的人员将容易得多。 因此，我们专门为每个视图提供了可区分的背景色，因此最终的演示可以轻松识别视图。

3.将自动版式应用于视图。

 覆盖func viewDidLoad（）{ 
  super.viewDidLoad（） 
  // 1 
  self.setupViews（） 
  } 

  fileprivate func setupViews（）{ 
  // 2 
  self.view.addSubview（self.scrollView） 
  self.scrollView.topAnchor.constraint（等于：self.view.safeAreaLayoutGuide.topAnchor）.isActive = true 
  self.scrollView.bottomAnchor.constraint（equalTo：self.view.safeAreaLayoutGuide.bottomAnchor）.isActive = true 
  self.scrollView.leftAnchor.constraint（equalTo：self.view.safeAreaLayoutGuide.leftAnchor）.isActive = true 
  self.scrollView.rightAnchor.constraint（equalTo：self.view.safeAreaLayoutGuide.rightAnchor）.isActive = true // 3 
  self.scrollView.addSubview（self.contentView） 
  // 4 
  self.contentView.topAnchor.constraint（equalTo：self.scrollView.topAnchor）.isActive = true 
  self.contentView.bottomAnchor.constraint（equalTo：self.scrollView.bottomAnchor）.isActive = true 
  self.contentView.leftAnchor.constraint（equalTo：self.scrollView.safeAreaLayoutGuide.leftAnchor）.isActive = true 
  self.contentView.rightAnchor.constraint（equalTo：self.scrollView.safeAreaLayoutGuide.rightAnchor）.isActive = true 
  // 5 
  self.contentView.widthAnchor.constraint（equalTo：self.view.widthAnchor）.isActive = true // 6 
  self.contentView.addSubview（self.titleLabel） 
  self.titleLabel.topAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.topAnchor）.isActive = true 
  self.titleLabel.leftAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.leftAnchor）.isActive = true 
  self.titleLabel.rightAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.rightAnchor）.isActive = true 
  self.titleLabel.heightAnchor.constraint（equalToConstant：80）.isActive = true // 7 
  self.contentView.addSubview（self.appDisplay） 
  self.appDisplay.text = self.text + self.text + self.text + self.text + self.text + self.text + self.text + self.text + self.text + self.text + self.text +自文本+自文本 
  self.appDisplay.topAnchor.constraint（等于：self.titleLabel.safeAreaLayoutGuide.bottomAnchor，常数：16）.isActive = true 
  self.appDisplay.leftAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.leftAnchor）.isActive = true 
  self.appDisplay.rightAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.rightAnchor）.isActive = true 
  self.appDisplay.bottomAnchor.constraint（equalTo：self.contentView.safeAreaLayoutGuide.bottomAnchor）.isActive = true} 

在上面的代码中，我们可以看到：

1. 我们在viewDidLoad设置所有这些AutoLayout约束。
2. 添加UIScrollView属性作为此UIViewController主视图的子视图，并向其添加上/左/右/下约束。
3. 添加一个UIView ，称为此scrollView contentView ，作为scrollView的子视图及其顶部/左侧/右侧/底部约束。
4. 关键 ：由于UIScrollView已添加了safeAreaLayoutGuide ，因此并没有必要使用safeAreaLayoutGuide添加其子视图。 如果将safeAreaLayoutGuide添加到topAnchor或bottomAnchor ，则将无法使用。
5. 关键 ：将contentView的宽度设置为等于主视图，实际上可以帮助scrollView设置其contentSize ，因为如果contentSize设置不正确， UIScrollView将无法工作（滚动/缩放）。
6. 添加第一个UILabel作为具有顶部/左侧/右侧/底部约束的contentView子视图。
7. 添加第二个UILabel作为具有顶部/左侧/右侧/底部约束的contentView子视图。

您可能已经意识到，使UIScrollView与AutoLayout一起使用的关键步骤是一个必须做的步骤：5，一个必须做的步骤4。

对于第5步，您需要以某种方式设置UIScrollView的正确contentSize ，否则它将不起作用，因为如果没有设置此属性，它将不知道如何移动或缩放，这完全有意义。

对于步骤4，实际上我不太清楚为什么会这样。 我只是在经过数小时的调试过程后才能使它正常工作，并且已经在iPhone X上进行了测试。

感谢您的阅读，如果您对我的问题有任何疑问或答案，请发表评论。