Why you should use Storyboards or Nibs

When it comes user interface development in iOS apps today, the best practice is to use Storyboards or Nibs. Some people may argue or prefer to write views in code, but unless you have specific needs, the former is always better. A problem I came across yesterday is a great example to showcase this.

This is a simplified design for the problem: a UILabel in a UIScrollView with a top margin 100 and a right margin 20. Below is the views written in code, it looks OK, but build and run, the label is missing. What's the prolem? You can have a try and see how long it takes to fix.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scrollView = UIScrollView(frame: view.frame)
        view.addSubview(scrollView)
        
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        
        scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
        
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "label"
        
        scrollView.addSubview(label)

        label.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 100).isActive = true
        label.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -20).isActive = true
    }
}

But if you implement the same UI using a Storyboard or Nib, you'll get a warings saying "Ambiguous Layout: Scrollable content size is ambiguous for 'Scroll View'", and a quick Goolge search will lead you to this SO answer. And after you have done what's said in the answer, the warnings are gone 🎉. But with the views in code, you only get this debug info in console:

[LayoutConstraints] Window has a view with an ambiguous layout. See "Auto Layout Guide: Ambiguous Layouts" for help debugging. Displaying synopsis from invoking -[UIView _autolayoutTrace] to provide additional detail.

*UILabel:0x7ff10760b3d0'label'- AMBIGUOUS LAYOUT for UILabel:0x7ff10760b3d0'label'.minX{id: 195}

Legend:
  * - is laid out with auto layout
  + - is laid out manually, but is represented in the layout engine because translatesAutoresizingMaskIntoConstraints = YES
  • - layout engine host
2019-03-07 19:40:21.342110+0800 Demo[2025:6525051] [LayoutConstraints] View has an ambiguous layout. See "Auto Layout Guide: Ambiguous Layouts" for help debugging. Displaying synopsis from invoking -[UIView _autolayoutTrace] to provide additional detail.

*UILabel:0x7ff10760b3d0'label'- AMBIGUOUS LAYOUT for UILabel:0x7ff10760b3d0'label'.minX{id: 195}

Legend:
  * - is laid out with auto layout
  + - is laid out manually, but is represented in the layout engine because translatesAutoresizingMaskIntoConstraints = YES
  • - layout engine host

I bet you'll have a hard time fixing it!

So here is the benefits that comes with Storyboards or Nibs:

• A visual editor.
• Intelligent warnings in development time.
• Continuous improvement from Apple.

You'll be a more efficient developer without writing views in code.