EPISODE II
From Storyboards to Code in iOS

SWIFT has replaced STORYBOARDS in JORDAN OSTERBERG'S iOS career. Swift has dominated all of the new projects, and all of the old projects have had their storyboards stripped out and replaced with code.

But there is a complication. AUTO-LAYOUT code is difficult to write, and takes too much time.

What will Jordan do to continue fighting storyboards and improving his workflow?

If you haven't picked up on that reference by now, it's from Star Wars.

Let's recap what we learned in Episode I, "From Storyboards to Code in iOS" (https://dev.to/osterbergjordan/from-storyboards-to-code-in-ios).

Recap

1. Storyboards are great for learning how to make iOS apps.

2. Storyboards lose their greatness as soon as you deal with the auto-layout system, as it is completed to use.

3. Storyboards don't thrive in large projects, requiring either many storyboards or other solutions

4. Using code can solve these problems!

Great.

Let's transition into problems with using code to create your layouts.

Problems with the Solution

1. The code can be bulky and span long horizontally. This is never good. We want our code to be nice and readable, not huuuuuuuuuuuuuuuuuuuuuuuuuge strings of text. (See what I did there?)

2. The code can be difficult to understand. This can be difficult wether you're a new programmer or a senior programmer who's worked with auto-layout from day one.

3. There are many pieces that are essential, and forgetting them will break your layout. (e.g. translatesAutoresizingMaskIntoConstraints or isActive)

Solutions for the Problems with the Solution

Complicated title, I know. But the great news is the solutions I've created aren't so complicated. I've begun writing a library called EasyConstraints that's a simple UIView extension in a single swift file.

Let's create a view called redView.

let redView : UIView = {
    let view = UIView()
    view.backgroundColor = UIColor.red
    return view
}()

Here's some auto-layout code to center redView in our root view, and make it 100x100.

self.view.addSubview(self.redView)

self.redView.translatesAutoresizingMaskIntoConstraints = false
self.redView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
self.redView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
self.redView.widthAnchor.constraint(equalToConstant: 100).isActive = true
self.redView.heightAnchor.constraint(equalToConstant: 100).isActive = true

Great. Now let's use EasyConstraints to do the same thing.

self.view.addSubview(self.redView)

self.redView.centerHorizontally(in: self.view)
self.redView.centerVertically(in: self.view)
self.redView.setWidth(equalTo: 100)
self.redView.setHeight(equalTo: 100)

And we're done. Much easier to remember and understand. This method also returns an NSLayoutConstraint which can be seen in the example project.

I want to mention that this is a WIP, or work in-progress library. Not all of the auto layout constraints have nice and easy to use methods, and all of the features I want to add are not present in this version. Here's a list of all of the current methods, and some I plan on adding as soon as I get a chance:

Current Methods:

• centerHorizontally | in: UIView
• centerVertically | in: UIView
• equalWidth | to: UIView
• equalHeight | to: UIView
• setHeight | equalTo: CGFloat
• setWidth | equalTo: CGFloat
• placeBelow | view: UIView, distance: CGFloat
• placeAbove | view: UIView, distance: CGFloat
• placeRightOf | view: UIView, distance: CGFloat
• placeLeftOf | view: UIView, distance: CGFloat

Planned Methods/Features:

• Add constant (CGFloat) argument to equalWidth and equalHeight
• Add modifier (CGFloat) option to all applicable methods
• Bundle methods together to make life even easier
• More "place" like methods such as placeAbove or placeBelow

I'm sure I have more ideas of what to add, and I'll update this list as they come to me. You can check out the library and it's evolution at https://github.com/JordanOsterberg/EasyConstraints. If you have any suggestions or features that would make EasyConstraints easier or "cooler" please let me know.