Maintainable code layout in UIKit

tags: iOS@Taipei iOS concise-swift UIStackView

This post is for those who use code layout and feel unhappy about so many constraints and offsets/insets should define and set.

It's really the time to reduce code layout process time and take more time on learning SwiftUI.

Warning
In this post we use UIStackView and layoutMargins for building concise custom view, that may not suitable for complex animation.

📐 Autolayout is not very easy to maintain

let's not talk about frame-layout maintainability.

When building custom view, we have to make sure the subviews of the custom view share the size and spaces correctly, also we might want some padding on custom view or on those subviews.

If we use pure Autolayout, it will be hard to deal with specific design requirement. Says we have to make sure 5 UI element horizontal spaces always equal to 5, we have to anchor each of them horizontal space 4 times to make it happen.

Also when we want to set four direction padding for different value, you have to do four times anchor to make it.

cancelButton.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 8.0).active = true
cancelButton.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor, constant: -8.0).active = true
cancelButton.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8.0).active = true
cancelButton.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -8.0).active = true

Even if we using SnapKit, if the padding value is not the same, we still have to write code like:

cardView.snp.makeConstraints { (make) in
    make.top.equalToSuperview().inset(16)
    make.bottom.equalToSuperview()
    make.leading.trailing.equalToSuperview().inset(20)
}

First, let's talk about how to make adpative custom view layout easier.

🥞 UIStackView

In WWDC15 session Mysteries of Auto Layout, Part 1 says UIStackView is maintainable layout. There's many handy properties to set in UIStackView and it can really help you to arrange subviews in autolayout.
The session also says that since UIStackView doesn't need to render background, so it is optimized to render fast than normal view.

The Session Conclusion
Start with Stack View, use constraints as needed.

Before using UIStackView, you may write code like:

let cardView = UIView()

addSubview(cardView)
cardView.snp.makeConstraints { (make) in
    make.top.leading.trailing.equalToSuperview().inset(16)
    make.bottom.equalToSuperview()
}

cardView.addSubview(imageView)
imageView.snp.makeConstraints { (make) in
    make.top.bottom.equalToSuperview().inset(16)
    make.trailing.equalToSuperview()
}

cardView.addSubview(titleLabel)
titleLabel.snp.makeConstraints { (make) in
    make.top.leading.equalToSuperview().inset(16)
    make.trailing.equalTo(imageView.snp.leading).offset(8)
}

cardView.addSubview(confirmButton)
confirmButton.snp.makeConstraints { (make) in
    make.top.equalTo(titleLabel.snp.bottom).offset(12)
    make.leading.bottom.equalToSuperview().inset(16)
}

cardView.addSubview(skipButton)
skipButton.snp.makeConstraints { (make) in
    make.centerY.equalTo(confirmButton)
    make.leading.equalTo(confirmButton.snp.trailing).offset(16)
}

With UIStackView, you can make concise and component-style code layout:

let cardView = UIView()

addSubview(cardView)
cardView.snp.makeConstraints { (make) in
    make.top.leading.trailing.equalToSuperview().inset(16)
    make.bottom.equalToSuperview()
}

let buttonStackView = UIStackView(arrangedSubviews: [confirmButton, skipButton])
buttonStackView.axis = .horizontal
buttonStackView.spacing = 16
buttonStackView.alignment = .center
buttonStackView.distribution = .fill

let titleAndButtonStackView = UIStackView(arrangedSubviews: [titleLabel,
buttonStackView])
titleAndButtonStackView.axis = .vertical
titleAndButtonStackView.spacing = 12
titleAndButtonStackView.alignment = .leading
titleAndButtonStackView.distribution = .fill

let stackView = UIStackView(arrangedSubviews: [titleAndButtonStackView, imageView])
stackView.axis = .horizontal
stackView.spacing = 8
stackView.alignment = .fill
stackView.distribution = .fill

cardView.addSubview(stackView)
stackView.snp.makeConstraints { (make) in
    make.top.leading.bottom.equalToSuperview().inset(16)
    make.trailing.equalToSuperview()
}

Plus, you can use factory method like makeButtonStackView() to make your layout logic more readable.

layoutMargins and layoutMarginsGuide

In WWDC18 session UIKit: Apps for Every Size and Shape introduce layoutMargins and layoutMarginsGuide.

layoutMargins are padding and the layoutMarginsGuide is the square that define space inside the padding.

We use layoutMarginsGuide to hook autolayout anchor inside the layoutMargins just like using safeAreaLayoutGuide to make sure the our view is in the safeAreaInsets.

Let me show you how to use layoutMarginsGuide to take your layout code readibility to the next level.

/// Before: Using pure autolayout concept
cardView.snp.makeConstraints { (make) in
    make.top.leading.trailing.equalToSuperview().inset(16)
    make.bottom.equalToSuperview()
}

imageView.snp.makeConstraints { (make) in
    make.top.bottom.equalToSuperview().inset(16) // top and bottom padding
    make.trailing.equalToSuperview() // trailing padding
}

titleLabel.snp.makeConstraints { (make) in
    make.top.leading.equalToSuperview().inset(16) // leading padding
    ...
}

confirmButton.snp.makeConstraints { (make) in
    ...
    make.leading.bottom.equalToSuperview().inset(16) // leading and bottom padding
}

/// After: Using layoutMarginsGuide
directionalLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 20, bottom: 8, trailing: 20)
cardView.snp.makeConstraints { (make) in
    make.edges.equalTo(self.layoutMarginsGuide)
}
    
cardView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 0)
stackView.snp.makeConstraints { (make) in
    make.edges.equalTo(cardView.layoutMarginsGuide)
}

Combine all concepts

If we use UIStackView, layoutMarginsGuide, factory method and meaningful enum, we can make code really concise and easy to change any layout.

directionalLayoutMargins = Constant.Margins.FeatureTips

let cardView = makeCardView()
addSubview(cardView)
cardView.snp.makeConstraints { (make) in
    make.edges.equalTo(self.layoutMarginsGuide)
}

let buttonStackView = makeActionButtonsStackView()
let titleAndButtonStackView = UIStackView(arrangedSubviews: [titleLabel, buttonStackView])
titleAndButtonStackView.axis = .vertical
titleAndButtonStackView.spacing = Constant.Spacing.TitleAndButtons
titleAndButtonStackView.alignment = .leading
titleAndButtonStackView.distribution = .fill

let stackView = UIStackView(arrangedSubviews: [titleAndButtonStackView, imageView])
stackView.axis = .horizontal
stackView.spacing = Constant.Spacing.TitleAndImageView
stackView.alignment = .fill
stackView.distribution = .fill

cardView.addSubview(stackView)
stackView.snp.makeConstraints { (make) in
    make.edges.equalTo(cardView.layoutMarginsGuide)
}

preservesSuperviewLayoutMargins

Set .preservesSuperviewLayoutMargins to true can make superview's layoutMargins affect subview, so the entire view can set layoutMargins just once. If you subview has animation any may go outside to superview's layoutMargins, you should set it to false.

Conclusion