ScrollView不滚动与子视图

Question

I couldn't get my UIScrollView to scroll. Here is my code:

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {

    var scrollView = UIScrollView()


    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView = UIScrollView(frame : CGRect ( x:0,y:0,width:UIScreen.main.bounds.width,height:UIScreen.main.bounds.height))
        scrollview.delegate = self
        view.addSubview(scrollView)

        for i in 0...14 {
            let numLabel = UILabel(frame : CGRect( x : 0 , y : 10+(i*40) , width : UIScreen.main.bounds.width - 20 : height : 40))
            numlabel.text = "\(i)"
            scrollView.addSubview(numLabel)
        }

    }

}

This is making the views appear but not scrolling.

Answer 1

Scroll view scrolls to its content size. Whenever you add a subview to scroll view you should make sure that your scroll view's content size is enough to fit the new view. In your case you are not taking care of that. Ideally whenever you add a subview you should correspondingly adjust the hight of the scroll view content size. In your case after you have added all of the labels to scroll view ie after for loop add following line

self.scrollView.contentSize = CGSize(width:self.scrollView.bounds.size.width,height:10+(15‌​*40))

or in the for loop after adding label you can do the following

self.scrollView.contentSize = CGSize(width:self.scrollView.bounds.size.width,height:10+((i+1)*40))

The second approach is better. Because if you add more labels to scroll view it will take care of that. Again, make it a rule of thumb, whenever adding a view to scroll view make sure that its content size is updated to fit all the subviews.

Answer 2

While you can manually set the contentSize , I would not advise doing that.

Instead, I'd use constraints for the subviews of the scroll view. The auto-layout engine will calculate the contentSize for you automatically. It will also take care of adjusting everything if the device rotates.

I'd also suggest using a stack view, you don't have to mess around with either manual frames for the labels nor with constraints between them.

So, you can do something like:

var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)

    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(stackView)

    for i in 0 ... 140 {
        let numLabel = UILabel()
        numLabel.translatesAutoresizingMaskIntoConstraints = false
        numLabel.text = "\(i)"
        numLabel.font = .preferredFont(forTextStyle: .body)
        stackView.addArrangedSubview(numLabel)
    }

    NSLayoutConstraint.activate([
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),

        stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
        stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
        stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
        stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
    ])
}

Note the use of UIFont.preferredFont(forTextStyle: .body) to enjoy Dynamic Text. This means that if the user has a larger font specified in their settings, this will automatically show the larger font in this app. But more importantly, we didn't have to calculate the size of the label for that font. Constraints and the stack view took care of both the frames of the labels as well as the scroll view's contentSize .

---

For the sake of completeness, it's worth noting that the alternative is to use a UITableView or UICollectionView . This is a scalable, memory efficient way of viewing data within a scroll view. It's beyond the scope of this question, but it's worth remembering as you consider creating large scroll views.