UIScrollViews和锚点迅速

Question

I am having trouble setting up a scroll view and actually scrolling down. I populated the scroll view with some textfields and used anchors (topanchor,leftanchor...) to position them inside the scroll view. Even if I set the scroll view height to 1000, it wont actually move, it continues to show the same items, the scroll indicator does go down but the content itself doesnt, I already set the scroll view to scrollenabled, and delegate to self.

I think the problem might be with the anchors but then how will I arrange my items inside the scroll view, any sugestion will be greatly appreaciated.

EDIT : The code below indicates the anchors applied to the scroll view ( inputContainer ), the img corresponds to an UIImageView and the mainContainer to the UIView containing the img and the inputContainer.

inputContainer.topAnchor.constraintEqualToAnchor( img.bottomAnchor ).active = true
inputContainer.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

inputContainer.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor ).active = true

inputContainerBottomConstraint = inputContainer.bottomAnchor.constraintEqualToAnchor( cancelButton.topAnchor )
inputContainerBottomConstraint?.active = true

EDIT: This is how the code looks like :

class SView : UIView, UITextFieldDelegate, UIScrollViewDelegate {

let mainContainer : UIView = {
    let v = UIView()
    v.backgroundColor = .whiteColor()
    v.layer.cornerRadius = 8
    v.layer.masksToBounds = true
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

let Img : UIImageView = {
    let img = UIImageView()
    img.image = UIImage(named: "noImage")
    img.backgroundColor = .blueColor()
    img.translatesAutoresizingMaskIntoConstraints = false
    img.contentMode = .ScaleAspectFill
    img.clipsToBounds = true
    return img
}()

let inputContainer : UIScrollView = {
    let ic = UIScrollView()
    ic.backgroundColor = .whiteColor()
    ic.translatesAutoresizingMaskIntoConstraints = false
    return ic
}()

let datePickerTextField : UITextField = {
    let tf = UITextField()
    tf.placeholder = "Fecha"
    tf.textAlignment = .Center
    tf.translatesAutoresizingMaskIntoConstraints = false
    return tf
}()

let tagsTextField : UITextField = {
    let tf = UITextField()
    tf.placeholder = "Tags"
    tf.textAlignment = .Center
    tf.clearButtonMode = .Always
    tf.translatesAutoresizingMaskIntoConstraints = false
    return tf
}()

lazy var cancelButton : UIButton = {
    let button = UIButton()
    button.backgroundColor = UIColor.rgb(255, green: 65, blue: 65, alpha: 1)
    button.setTitle("Cancelar", forState: .Normal)
    button.tintColor = .whiteColor()
    button.translatesAutoresizingMaskIntoConstraints = false

    button.addTarget( self , action: #selector(handleCancelButtonPressed), forControlEvents: .TouchUpInside)

    return button
}()

lazy var publicarButton : UIButton = {
    let button = UIButton()
    button.backgroundColor = UIColor.rgb(0 , green: 204, blue: 102, alpha: 1)
    button.setTitle("Publicar", forState: .Normal)
    button.tintColor = .whiteColor()
    button.translatesAutoresizingMaskIntoConstraints = false

    button.addTarget( self , action: #selector(handlePublicarButtonPressed), forControlEvents: .TouchUpInside)

    return button
}()


override init(frame: CGRect)
{
    super.init(frame: frame)

    inputContainer.delegate = self


    datePickerTextField.delegate = self

    tagsTextField.delegate = self

    setupMainContainer()
    setupImg()
    setupButtons()
    setupInputContainer()

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func setupMainContainer ()
{
    addSubview(mainContainer)

    mainContainer.centerXAnchor.constraintEqualToAnchor( centerXAnchor ).active = true
    mainContainer.centerYAnchor.constraintEqualToAnchor( centerYAnchor ).active = true

    mainContainer.widthAnchor.constraintEqualToAnchor( widthAnchor ).active = true
    mainContainer.heightAnchor.constraintEqualToAnchor( heightAnchor )
}

func setupImg ()
{
    mainContainer.addSubview(Img)

    Img.topAnchor.constraintEqualToAnchor( mainContainer.topAnchor ).active = true
    Img.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

    Img.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor ).active = true
    Img.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor , multiplier: 0.3).active = true
}

var inputContainerBottomConstraint : NSLayoutConstraint?

func setupInputContainer ()
{
    mainContainer.addSubview(inputContainer)

    inputContainer.topAnchor.constraintEqualToAnchor( Img.bottomAnchor ).active = true
    inputContainer.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true
    inputContainer.rightAnchor.constraintEqualToAnchor( mainContainer.rightAnchor ).active = true
    inputContainerBottomConstraint = inputContainer.bottomAnchor.constraintEqualToAnchor( cancelButton.topAnchor )
    inputContainerBottomConstraint?.active = true



    inputContainer.addSubview( datePickerTextField )
    inputContainer.addSubview( tagsTextField )




    datePickerTextField.topAnchor.constraintEqualToAnchor( inputContainer.topAnchor ).active = true
    datePickerTextField.centerXAnchor.constraintEqualToAnchor( inputContainer.centerXAnchor ).active = true

    datePickerTextField.widthAnchor.constraintEqualToAnchor( inputContainer.widthAnchor ).active = true
    datePickerTextField.heightAnchor.constraintEqualToAnchor( inputContainer.heightAnchor, multiplier: 0.2 ).active = true


    tagsTextField.bottomAnchor.constraintEqualToAnchor( inputContainer.bottomAnchor ).active = true
    tagsTextField.centerXAnchor.constraintEqualToAnchor( inputContainer.centerXAnchor ).active = true

    tagsTextField.widthAnchor.constraintEqualToAnchor( inputContainer.widthAnchor ).active = true
    tagsTextField.heightAnchor.constraintEqualToAnchor( inputContainer.heightAnchor, multiplier: 0.2 ).active = true

}

func setupButtons()
{
    mainContainer.addSubview( cancelButton )
    mainContainer.addSubview( publicarButton )


    cancelButton.bottomAnchor.constraintEqualToAnchor( mainContainer.bottomAnchor).active = true
    cancelButton.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

    cancelButton.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor, multiplier:  0.5 ).active = true
    cancelButton.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor, multiplier:  0.1).active = true



    publicarButton.bottomAnchor.constraintEqualToAnchor( mainContainer.bottomAnchor).active = true
    publicarButton.leftAnchor.constraintEqualToAnchor( cancelButton.rightAnchor ).active = true

    publicarButton.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor, multiplier:  0.5 ).active = true
    publicarButton.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor, multiplier:  0.1).active = true
} }

So when the keyboard appears the bottom anchor constant of the scroll view changes so that the keyboard "top anchor" is the new bottom anchor.

Answer 1

With the constraints you have described there's no way for the layout engine to determine the content height of the scroll view. You should pin your bottom text field to the bottom of the scroll view. This way the scroll view's content size will resize up to the max y of all of the text fields. Here is some code you can put in a playground to see:

import UIKit
import XCPlayground

let scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: 200, height: 150))
scrollView.backgroundColor = UIColor.whiteColor()

let textField = UITextField()
textField.translatesAutoresizingMaskIntoConstraints = false
textField.backgroundColor = UIColor.purpleColor()

let otherTextField = UITextField()
otherTextField.translatesAutoresizingMaskIntoConstraints = false
otherTextField.backgroundColor = UIColor.purpleColor()

let otherOtherTextField = UITextField()
otherOtherTextField.translatesAutoresizingMaskIntoConstraints = false
otherOtherTextField.backgroundColor = UIColor.purpleColor()

scrollView.addSubview(textField)

textField.topAnchor.constraintEqualToAnchor(scrollView.topAnchor).active = true
textField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
textField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true

scrollView.addSubview(otherTextField)

otherTextField.topAnchor.constraintEqualToAnchor(textField.bottomAnchor, constant: 60).active = true
otherTextField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
otherTextField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true

scrollView.addSubview(otherOtherTextField)
otherOtherTextField.topAnchor.constraintEqualToAnchor(otherTextField.bottomAnchor, constant: 60).active = true
otherOtherTextField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
otherOtherTextField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
otherOtherTextField.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true

scrollView.setNeedsLayout()

XCPlaygroundPage.currentPage.liveView = scrollView

This places three text fields in a scroll view with 60 points between the center and top and bottom. If you comment out:

otherOtherTextField.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true

The scroll view in the assistant editor will not scroll, but with it it does.