Search code examples
swiftuiscrollviewautolayout

UIScrollView does not scroll even though content pushed off screen


I am learning to use UIScrollView programmatically.

I have created a scroll view, anchored to full screen and then added 2 elements.

One is anchored to the top and the other anchored with a position that should push it way off screen.

I'd expect the view to scroll to it however it does not. It just stays fixed.

I have been reading a number of answers but cannot find a way that applies to my view below

class ViewController: UIViewController {

    lazy var scrollView = UIScrollView(frame: .zero)
    lazy var usernameTF = createTextField(nil, placeholder: "username", type: .emailAddress)
    lazy var passwordTF = createTextField(nil, placeholder: "password", type: .default, isSecureEntry: true)

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        view.backgroundColor = .white

        [scrollView, usernameTF, passwordTF].forEach { $0.translatesAutoresizingMaskIntoConstraints = false }

        view.addSubview(scrollView)

        [usernameTF, passwordTF].forEach { scrollView.addSubview($0) }

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

            usernameTF.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 32),
            usernameTF.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -32),
            usernameTF.heightAnchor.constraint(equalToConstant: 40),
            usernameTF.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),

            passwordTF.topAnchor.constraint(equalTo: usernameTF.bottomAnchor, constant: 1600),
            passwordTF.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -32),
            passwordTF.heightAnchor.constraint(equalToConstant: 40),
            passwordTF.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor)
        ])
    }

    func createTextField(_ delegate: UITextFieldDelegate?, placeholder: String, type: UIKeyboardType, isSecureEntry: Bool = false) -> UITextField {
        let tf = UITextField(frame: .zero)

        tf.placeholder = placeholder
        tf.backgroundColor = .init(white: 0, alpha: 0.03)
        tf.borderStyle = .roundedRect
        tf.font = .systemFont(ofSize: 14)
        tf.keyboardType = type
        tf.autocapitalizationType = .none
        tf.autocorrectionType = .no
        tf.isSecureTextEntry = isSecureEntry

        if let delegate = delegate {
            tf.delegate = delegate
        }

        return tf
    }
}

Solution

  • You need to add bottom anchor that connects passwordTF bottom to scroll view bottom. So that scroll view can figure out it's content height.

    passwordTF.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)