ios - 如何以编程方式创建、添加和定位 UIScrollView 以使其填满屏幕？

Question

我想在一个 Swift 项目中创建一个简单的 View 层次结构，它有一个 UIScrollView，它应该充当 subview 的可扩展容器，这些 subview 是:UILabel、UITextView 和一个按钮。

这里的问题是，我使用可视化格式语言以编程方式完成这一切，而不能在 Interface Builder 中完成。我下面的代码显示了一个 ScrollView ，但是它无法向下滚动以显示其下方的 View ，并且 View 本身的大小不正确。它是静态的。此外， subview 不会扩展以填满屏幕。

我想显示一个全屏大小的 ScrollView ，并且它的 subview 水平填充屏幕，高度取决于我设置的大小。它们目前只有大约 200pt 宽，这很不寻常。

viewDidLoad() {
  view.addSubview(scrollView)

  //This function is a convenience function which applies constraints 
  view.addConstraints(withFormat: "H:|[v0]|", toViews: scrollView)
  view.addConstraints(withFormat: "V:|[v0]|", toViews: scrollView)

  //Here I add the 3 subviews mentioned above
  scrollView.addSubview(nativeText)
  scrollView.addSubview(mnemonicDescription)
  scrollView.addSubview(addButton)

  //Here I apply constraints using format language
   scrollView.addConstraints(withFormat: "H:|[v0]|", toViews: foreignText)

// Note that this should make foreignText expand the full width. It doesn't, its very small

//I continue to add subviews with horizontal and vertical constraints however they do not fill the container view as expected.
}

Answer 1

这是一个(相当)简单的示例，向 ScrollView 添加 3 个 View 并使用 VFL 设置约束。

override func viewDidLoad() {
    super.viewDidLoad()

    // create a scroll view with gray background (so we can see it)
    let theScrollView = UIScrollView()
    theScrollView.backgroundColor = .gray

    // add it to the view
    view.addSubview(theScrollView)

    // add constraints so the scroll view fills the view
    view.addConstraintsWithFormat("H:|[v0]|", views: theScrollView)
    view.addConstraintsWithFormat("V:|[v0]|", views: theScrollView)

    // create three UIViews - nativeText (red), mnemonicDescription (green), addButton (blue)

    let nativeText = UIView()
    nativeText.translatesAutoresizingMaskIntoConstraints = false
    nativeText.backgroundColor = .red

    let mnemonicDescription = UIView()
    mnemonicDescription.translatesAutoresizingMaskIntoConstraints = false
    mnemonicDescription.backgroundColor = .green

    let addButton = UIView()
    addButton.translatesAutoresizingMaskIntoConstraints = false
    addButton.backgroundColor = .blue

    // add those three views to the scroll view
    theScrollView.addSubview(nativeText)
    theScrollView.addSubview(mnemonicDescription)
    theScrollView.addSubview(addButton)

    // set horizontal / width constraints for the three views so they fill the scroll view
    // "H:|[v0(==v1)]|" means "make the width of v0 equal to the width of v1, and pin to leading and trailing"
    theScrollView.addConstraintsWithFormat("H:|[v0(==v1)]|", views: nativeText, theScrollView)
    theScrollView.addConstraintsWithFormat("H:|[v0(==v1)]|", views: mnemonicDescription, theScrollView)
    theScrollView.addConstraintsWithFormat("H:|[v0(==v1)]|", views: addButton, theScrollView)

    // set the vertical / height constraints of the three views
    // (==200) means "set the height to 200"
    // "|" means "pin to edge"
    // "-40-" means 40 points of space

    // so the following 3 lines will put:

    //      nativeText (Red view) pinned to the top of scrollview, height of 200
    theScrollView.addConstraintsWithFormat("V:|[v0(==200)]", views: nativeText)

    //      mnemonicDescription (Green view) pinned 40 space to Red view, height of 300
    theScrollView.addConstraintsWithFormat("V:[v0]-40-[v1(==300)]", views: nativeText, mnemonicDescription)

    //      addButton (Blue view) pinned 40 space to Green view, height of 250, *and* pinned to bottom of scrollview
    theScrollView.addConstraintsWithFormat("V:[v0]-40-[v1(==250)]|", views: mnemonicDescription, addButton)

    // it could also be expressed in a single statement
    // comment out the above three lines of code, and
    // un-comment this line to see the same result
    //theScrollView.addConstraintsWithFormat("V:|[v0(==200)]-40-[v1(==300)]-40-[v2(==250)]|", views: nativeText, mnemonicDescription, addButton)

    // using those example heights and spacing comes to a total of 830, 
    // so it will scroll vertically a little bit on a iPhone 7+ (736 pts tall)
}