Scroll a UIView in UIScrollView

问题

A lot of questions are available with this but I'm very bad with constraints. So I've added a UIScrollView and the UIView I want to show has height of 700 and this is fixed 700 no dynamic height. The constraints I've for UIScrollView are:

And for UIView the constraints are:

But it's not scrolling.

回答1:

What I do when I need a scrollable view is what follows - just go over your constraints in storyboards and do the same there (especially pay attention to second step):

I add a scrollView to the hierarchy and use autolayout to properly layout it, e.g., if it is supposed to cover the whole view of the viewController:

scrollView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
    scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
    scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
])

Then you need to add a contentView to the scrollView and provide a proper layout constraints for it, so if you want vertically scrollable scrollView in the example I started above, you need following autolayout constraints:

contentView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    // horizontal anchors of contentView are constrained to scrollView superview
    // to prevent it from scrolling horizontally
    contentView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
    contentView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
    // but vertical anchors of contentView are constrained to
    // scrollView to allow scrolling
    contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
])

Notice here that I constrained the leftAnchor and rightAnchor of the contentView to the self.view rather than to scrollView to make it of fixed width. However, top and bottom anchors are constrained to the scrollView, so they are expanded and scrollable when contentView needs more space.

Now you add to the contentView all the content that you want, and you lay it out using autolayout as if the contentView was a view with infinite height. Or you can just explicitly set its height to 700 as you want.

回答2:

When you are giving AutoLayout to a scrollView, follow the below methods.

Treat ScrollView like any other view object and apply the constraints like you normally do:

Get a view inside the scrollView which would later contain all the views you would want inside the ScrollView. Apply the constraints like you would apply to a subview, like below:

Apart from the leading, trailing,top and bottom constraints, the width and height are additionally specified. The width and height would define how much the ScrollView can scroll in the horizontal or vertical direction.

Instead of directly specifying the width and height, you might want to specify the height and width in relation with the other contents you might add inside this subview.

Tip : If you can draw a straight line from top to bottom, connecting the constraints of the Y axis constraints of the subviews, you will not get the ambiguos content error. Same is the case for width.

Programatically, you can follow the same approach:

    let scrollView = UIScrollView()
    self.view.addSubview(scrollView)
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    let safeArea = view.safeAreaLayoutGuide
    scrollView.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 0).isActive = true
    scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
    scrollView.backgroundColor = .gray

    let scrollContentView = UIView()
    scrollView.addSubview(scrollContentView)
    scrollContentView.translatesAutoresizingMaskIntoConstraints = false
    scrollContentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    scrollContentView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true
    scrollContentView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
    scrollContentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    scrollContentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
    scrollContentView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
    scrollContentView.backgroundColor = .green

You can increase the heightAnchor or widthAnchor of the scrollContentView according to your requirement.