UIStackView
UIStackViews were first introduced in iOS 9. These components allow us to stack up views vertically or horizontally. These can be implement via storyboard or programmatically. Of all the options above this one is the easiest to implement in the programmatic approach.
Here is an example of some code that does that.
var enclosingStack : UIStackView = UIStackView()Adding views into the stack view is very easy:
//Enclosing stack enclosingStack.axis = NSLayoutConstraint.Axis.vertical enclosingStack.distribution = UIStackView.Distribution.fill enclosingStack.alignment = UIStackView.Alignment.fill enclosingStack.spacing = stackSpacing enclosingStack.addArrangedSubview(titleStack) enclosingStack.addArrangedSubview(nameField) enclosingStack.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(enclosingStack)
Let us look at how we can implement UIStackViews in an actual project. I will be using the starter project as a reference. You can download it from here.
NOTE: I will be using UIStackViews in the remaining sections. So you will have to continue with this project for the next 2 sections.
- First let us declare all the UIStackView variables.
- Switch to the ViewController.swift file. We will do this under the variables section. Add it under line 46 after the feedbacks variable declaration.
//StackViews var titleStack : UIStackView = UIStackView() var ageStack : UIStackView = UIStackView() var serviceStack : UIStackView = UIStackView() var satisfactionStk : UIStackView = UIStackView() var buttonStk : UIStackView = UIStackView() var enclosingStack : UIStackView = UIStackView() var stackSpacing : CGFloat = 30.0
3. Next we will add a new extension for ViewController. The code for creating stack views will be implemented here.
func configureStacks() { //Title titleStack.axis = NSLayoutConstraint.Axis.horizontal titleStack.distribution = UIStackView.Distribution.fill titleStack.alignment = UIStackView.Alignment.fill titleStack.spacing = stackSpacing titleStack.translatesAutoresizingMaskIntoConstraints = false titleStack.addArrangedSubview(icon) titleStack.addArrangedSubview(appView) //Age ageStack.axis = NSLayoutConstraint.Axis.horizontal ageStack.distribution = UIStackView.Distribution.fill ageStack.alignment = UIStackView.Alignment.fill ageStack.spacing = stackSpacing ageStack.translatesAutoresizingMaskIntoConstraints = false ageStack.addArrangedSubview(age) ageStack.addArrangedSubview(ageSlider) ageStack.addArrangedSubview(ageValue) //Service serviceStack.axis = NSLayoutConstraint.Axis.horizontal serviceStack.distribution = UIStackView.Distribution.fillProportionally serviceStack.alignment = UIStackView.Alignment.fill serviceStack.spacing = stackSpacing serviceStack.translatesAutoresizingMaskIntoConstraints = false serviceStack.addArrangedSubview(serviceLbl) serviceStack.addArrangedSubview(serviceRating) //Satisfaction satisfactionStk.axis = NSLayoutConstraint.Axis.horizontal satisfactionStk.distribution = UIStackView.Distribution.fillProportionally satisfactionStk.alignment = UIStackView.Alignment.fill satisfactionStk.spacing = stackSpacing satisfactionStk.translatesAutoresizingMaskIntoConstraints = false satisfactionStk.addArrangedSubview(satisfactionLbl) satisfactionStk.addArrangedSubview(satisfaction) //Buttons buttonStk.axis = NSLayoutConstraint.Axis.horizontal buttonStk.distribution = UIStackView.Distribution.fillEqually buttonStk.alignment = UIStackView.Alignment.fill buttonStk.spacing = stackSpacing buttonStk.translatesAutoresizingMaskIntoConstraints = false buttonStk.addArrangedSubview(saveBtn) buttonStk.addArrangedSubview(fetchBtn) //Enclosing stack enclosingStack.axis = NSLayoutConstraint.Axis.vertical enclosingStack.distribution = UIStackView.Distribution.fill enclosingStack.alignment = UIStackView.Alignment.fill enclosingStack.spacing = stackSpacing enclosingStack.addArrangedSubview(titleStack) enclosingStack.addArrangedSubview(nameField) enclosingStack.addArrangedSubview(emailField) enclosingStack.addArrangedSubview(ageStack) enclosingStack.addArrangedSubview(agePicker) enclosingStack.addArrangedSubview(serviceStack) enclosingStack.addArrangedSubview(satisfactionStk) enclosingStack.addArrangedSubview(buttonStk) enclosingStack.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(enclosingStack) }
4. Add the following line to the viewDidLoad function.
self.configureStacks()
The function should now look like:
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. self.navigationItem.title = "Feedback" self.configureUIElements() self.configureStacks() }
That’s it. You have successfully added stack views. You should not see much yet because there are some constraints that we need to apply. We will apply those In the layout anchors section on the next page.
Fixed the issue with the links to the sample projects. They should be working fine now.