ios - 带有自动布局的程序化 UIScrollview

Question

在阅读了 Apple 网站上的技术说明并阅读了 matt neuburg 关于使用 Autolayout 中的 UIScrollview 对 iOS 11 进行编程的书之后，我无法完全理解其工作原理的概念。

基本上我想要的是一个Scrollview，它有一个 subview ChildView，然后这个 subview 有一个Textview。

下面我附上了我试图以编程方式实现的模型，没有 Nib ，没有 Storyboard 。

至于代码，这是我通常想出的:

代码

let Scroller: UIScrollView = {
    let scroll = UIScrollView()
    scroll.translatesAutoresizingMaskIntoConstraints = false
    scroll.backgroundColor = UIColor.alizarinColor()
    return scroll
}()

// Content view

let ContentView : UIView = {

    let content = UIView()
    content.translatesAutoresizingMaskIntoConstraints = false
    content.backgroundColor = UIColor.blue
    return content
}()

override func viewDidLoad() {

    super.viewDidLoad()

    self.view.addSubview(Scroller)

    // Auto layout
    Scroller.leftAnchor.constraint(equalTo: view.leftAnchor, constant:0).isActive = true
    Scroller.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    Scroller.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
    Scroller.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true

    Scroller.addSubview(ContentView)
    // Undefined Content view 
}

请注意:对于 ContentView，我通常会定义约束以将边缘锚定在 ScrollView 内，但在这种情况下，使用自动布局并希望它能够当键盘变成FirstResponder时垂直向上滚动。我想出的另一种尝试工作的方法是创建一个 UIView ，它的跨度大于 ScrollView ，以允许 subview 成为这个以 ScrollView 作为其父 View 的较大 View 的 subview .

我的问题:我怎样才能从现在开始实现这个目标？有什么建议么？我一直在考虑这样的事情:(ContentView 将是允许它滚动的较大 View ， subview 将是层次结构中的第三个 subview )

Answer 1

1. 您不需要创建一个虚假的内容 View ，您可以直接将 subview 添加到 ScrollView (我更喜欢)。 Apple 不建议创建一个，他们只建议您可以。

2. ScrollView 的 subview 不应依赖 ScrollView 来确定它们的大小，而只能依赖它们的位置。

3. 您的约束必须定义最左侧、最右侧、最顶部和最底部的边缘，以便自动布局为您创建内容 View 。

当你创建一个 ScrollView 时，你可以给它的框架一个 Controller View 的边界:

scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true

然后您必须通过将其 subview 锚定到 ScrollView 的边缘来设置内容 View 的边界。要实现仅垂直滚动，您的最顶层 View 必须锚定到 ScrollView 的顶部，并且锚定到前缘和后缘的所有 subview 都不能超过 ScrollView 的宽度。

topMostView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(topMostView)
topMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
topMostView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
topMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
topMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true

请注意 topMostView 不依赖 ScrollView 来确定其大小，仅依赖其位置。 ScrollView 中的内容现在具有 1000 的高度，但它不会滚动，因为没有任何内容锚定到 ScrollView 的底部。因此，请在最底部的 View 中执行此操作。

bottomMostView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(bottomMostView)
bottomMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
bottomMostView.topAnchor.constraint(equalTo: topMostView.bottomAnchor).isActive = true
bottomMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
bottomMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true

bottomMostView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

最后一个 anchor 可能看起来很奇怪，因为您将一个 1,000 点高的 View 锚定到一个您刚刚锚定到绝对小于 1,000 点的 View 底部的 anchor 点高。但这就是 Apple 希望您这样做的方式。通过这样做，您不需要创建内容 View ，自动布局会为您完成。

定义“边缘约束”(最左侧、最右侧、最顶部、最底部)超出了 ScrollView 的范围。当您创建自定义 UITableViewCell 时，例如，使用自动布局，定义四个边缘约束(即最顶层 subview 锚定到单元格顶部的位置 topMostView.topAnchor.constraint (equalTo: self.topAnchor).isActive = true，单元格底部的最底部 subview bottomMostView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true等)是创建自调整单元格的方式。实际上，定义边缘约束是您创建任何自适应调整 View 的方式。