Place a UIButton at bottom of UIScrollView with constraints

Question

I have a view with three textfield/textview fields in it, and in order to make the view scrollable when the keyboard appears, I have put all the elements inside a scrollview. The elements where not outside the frame before, so the contentSize should be the same size as the full screen size and then when the keyboard appears, so when the keyboard appears i update the bottom constraints for the scrollview to be -keyboardHeight from the view bottom and then it is scrollable above the keyboard..

This all works fine, the problem is adding a button to the bottom of the scrollview that leading/trailing to the sides and bottom of the view.

See pictures:

Current view, with button hidden behind navigation bar

Where i would like the button to be. Approx 20 margin to right.left.bottom

I am using SnapKit to set my constraints, and for the button I would like to do something like this:

    sharebutton.snp.makeConstraints { (make) in
        make.width.left.right.equalToSuperview()
        make.bottom.equalToSuperview().offset(-20)
    }

(The Superview/the scrollview is already set as 20 margin from sides)

//EDIT: Code added ->

override func viewDidLayoutSubviews() {
    scrollview.contentSize = CGSize(width: centerView.frame.width,      height: view.frame.height)
}

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "title"
    view.backgroundColor = .white

    view.addSubview(scrollview)

    scrollview.addSubview(sharebutton)
    scrollview.addSubview(subjectField)
    scrollview.addSubview(messageField)
    scrollview.addSubview(datepicker)
    scrollview.addSubview(addressTable)
    addressTable.dataSource = self
    addressTable.delegate = self
    addressTable.separatorStyle = .none
    addressTable.keyboardDismissMode = .onDrag
    addressTable.separatorStyle = .singleLineEtched

    subjectField.placeholder = "content"
    datepicker.setTitle("topbutton", for: .normal)
    datepicker.setTitleColor(.black, for: .normal)
    datepicker.setTitleColor(UIColor.ME.border, for: .highlighted)
    datepicker.titleLabel?.font = UIFont.ME.button
    datepicker.layer.borderWidth = 1
    datepicker.layer.cornerRadius = 3
    datepicker.layer.borderColor = UIColor.ME.border.cgColor
    datepicker.addTarget(self, action: #selector(showDates), for: .touchUpInside)

    sharebutton.setTitle("Share", for: .normal)
    sharebutton.backgroundColor = UIColor.ME.buttonMainBlue
    sharebutton.addTarget(self, action: #selector(shareClicked), for: .touchUpInside)

    scrollview.backgroundColor = .red
    scrollview.snp.makeConstraints { (make) in
        make.top.bottom.equalToSuperview()
        make.left.width.right.equalTo(centerView)
    }

    datepicker.snp.makeConstraints { (make) in
        make.top.equalToSuperview().offset(paddingGlobal)
        make.left.width.right.equalToSuperview()
        make.height.equalTo(50)
    }

    addressTable.snp.makeConstraints { (make) in
        make.top.equalTo(datepicker.snp.bottom)
        make.left.right.equalTo(datepicker)
        make.height.equalTo(200)
    }

    subjectField.snp.makeConstraints { (make) in
        make.top.equalTo(datepicker.snp.bottom).offset(20)
        make.left.right.equalToSuperview()
    }

    messageField.snp.makeConstraints { (make) in
        make.top.equalTo(subjectField.snp.bottom).offset(20)
        make.height.equalTo(200)
        make.left.right.equalToSuperview()
    }

    sharebutton.snp.makeConstraints { (make) in
        make.width.left.right.equalToSuperview()
        make.bottom.equalToSuperview().offset(-20)
    }
}

Any thoughts ?

Answer 1

You need to add a UIView (for ex name it containerView) inside a scrollView subview first then add all your uielement(eg. textfield/textview, UIButton) to the subView of that containerView.