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

Question

我想在一个 Swift 项目中创建一个简单的视图层次结构，它有一个 UIScrollView，它应该充当子视图的可扩展容器：UILabel、UITextView 和一个按钮。

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

我想显示一个全屏大小的滚动视图，并且它的子视图水平填充屏幕，高度取决于我设置的大小。它们目前只有大约 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

这并不是一件很难实现的事情。如果您仔细研究，您可以在此处找到所有查询的答案。

无论如何，我都会为您提供您想要实现的目标的详细代码。希望对您有所帮助。

只需在您的 ViewController 类下方添加此代码。

let scrollView = UIScrollView()

override func viewDidLoad() {
    super.viewDidLoad()

    // Variables for setting the scrollView and Views inside scrollView
    let phoneHeight: CGFloat = self.view.frame.size.height
    let phoneWidth: CGFloat = self.view.frame.size.width
    var yPosition: CGFloat = 0
    var scrollViewHeight: CGFloat = 0


    // Setting scrollView attributes
    scrollView.frame.size.height = phoneHeight
    scrollView.frame.size.width = phoneWidth
    scrollView.frame.origin.x = 0
    scrollView.frame.origin.y = 0

    // Adding scrollView to the mainView
    self.view.addSubview(scrollView)

    // Creating subViews for the scrollView
    let view1 = UIView()
    let view2 = UIView()
    let view3 = UIView()
    let view4 = UIView()
    let view5 = UIView()

    // Adding the subVies in an array
    var subViewArray: [UIView] = []
    subViewArray.append(view1)
    subViewArray.append(view2)
    subViewArray.append(view3)
    subViewArray.append(view4)
    subViewArray.append(view5)

    // Adding the subViews to the scrollView
    for subView in subViewArray {

        // Setting the atributes for subViews
        // Fixed height of 200px and width adjusts according to the phoneSize
        subView.frame.size.height = 200
        subView.frame.size.width = phoneWidth
        subView.frame.origin.x = 0
        subView.frame.origin.y = yPosition

        // Adding the background color to the subViews
        subView.backgroundColor = UIColor.blue

        // Changing the yPosition and scrollViewHeight and adding a 20px margin for each subview in scrollView
        yPosition += 200 + 20
        scrollViewHeight += 200 + 20

        // Adding labels to the subviews
        let label1 = UILabel()
        label1.text = "Label Added"
        label1.textAlignment = .center
        label1.textColor = UIColor.white
        label1.frame.size.height = 30
        label1.frame.size.width = phoneWidth
        label1.frame.origin.x = 0
        label1.frame.origin.y = 10
        subView.addSubview(label1)

        self.scrollView.addSubview(subView)
        scrollView.contentSize = CGSize(width: phoneWidth, height: scrollViewHeight)
    }
}

Answer 2

这是一个（相当）简单的示例，将 3 个视图添加到 Scroll 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)
}