iOS UIStackView .fill alignment inside UIScrollView not working - ios

Question

I have a stack view that is programmatically inserted inside a scroll view (which is working perfectly) but when I put the scroll view inside the view controller in a storyboard the alignment is .fill and the distribution of the component is not applicable through UI. Then I coded it as below but it still didn't work.
Below is the code of programmatic implementation:
class RegisterVC: UIViewController{
private let dataSource = ["Student","Academic Staff","Non academic Staff"]
#IBOutlet weak var userPicker: UIPickerView!
#IBOutlet weak var FirstName: UITextField!
#IBOutlet weak var LastName: UITextField!
#IBOutlet weak var EmailAddress: UITextField!
#IBOutlet weak var Password: UITextField!
//message popping validator labels
#IBOutlet weak var firstNameLabel: UILabel!
#IBOutlet weak var lastNameLabel: UILabel!
#IBOutlet weak var emailAddressLabel: UILabel!
#IBOutlet weak var passwordLabel: UILabel!
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet var formStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.translatesAutoresizingMaskIntoConstraints = false;
self.scrollView.addSubview(formStackView)
self.formStackView.translatesAutoresizingMaskIntoConstraints=false
self.formStackView.alignment = .fill
self.formStackView.distribution = .fillProportionally
self.formStackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor,constant: 20).isActive=true
self.formStackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor,constant: 20).isActive=true
self.formStackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor,constant: 50).isActive=true
self.formStackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive=true
//self.formStackView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive=true
userPicker.delegate=self
userPicker.dataSource=self
}
}
I'm a very basic beginner in iOS; I need your dire help, thank you.

Answer 1

That's an unusual way of designing in Storyboard... you can layout your stack view directly as a subview of your scroll view, and set up the constraints there (instead of via code).
But, I'll assume you have a reason for doing it that way, so...
You want to constrain the stack view's Top / Leading / Trailing / Bottom constraints to the scroll view's Content Layout Guide ... and then constrain its Width to the scroll view's Frame Layout Guide.
Try it like this:
class RegisterVC: UIViewController {
private let dataSource = ["Student","Academic Staff","Non academic Staff"]
#IBOutlet weak var userPicker: UIPickerView!
#IBOutlet weak var FirstName: UITextField!
#IBOutlet weak var LastName: UITextField!
#IBOutlet weak var EmailAddress: UITextField!
#IBOutlet weak var Password: UITextField!
//message popping validator labels
#IBOutlet weak var firstNameLabel: UILabel!
#IBOutlet weak var lastNameLabel: UILabel!
#IBOutlet weak var emailAddressLabel: UILabel!
#IBOutlet weak var passwordLabel: UILabel!
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet var formStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// not needed...
//scrollView.translatesAutoresizingMaskIntoConstraints = false;
// add form stack view to the scroll view
scrollView.addSubview(formStackView)
// because of the way this is designed in Storyboard,
// we need to set this to false
formStackView.translatesAutoresizingMaskIntoConstraints = false
// stack view alignment .fill
formStackView.alignment = .fill
// stack view distribution should be .fill
formStackView.distribution = .fill // .fillProportionally
// we want to constrain the stack view to the scroll view's Content Layout Guide
let svCLG = scrollView.contentLayoutGuide
NSLayoutConstraint.activate([
formStackView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 20),
formStackView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: 20),
formStackView.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 50),
formStackView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor),
// constrain stack view Width to scroll view's Frame Layout Guide
// minus 40-pts, because we have 20-pts on each side
formStackView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor, constant: -40),
])
}
}