Auto Layout Basics - Part 1

So the last two Treehouse courses are actually 'workshops'. What that actually means remains to be seen! There seem to be no coding challenges or quizzes, which is a shame, but could be what makes them workshops. Anyway, once these are complete then it's on to the Udemy courses I've purchased!

Frame Based Layouts

Auto Layout is the primary positioning tool for all OS (iOS, Mac OS, watch OS etc.). AL has come a long way - it is now more robust with better Xcode usability. Initially it wasn't so great so there are still many skeptics. The 'old' way is not going to cut it anymore so AL is the way forward....

In the new Xcode project, I've selected View Controller Scene and disabled Auto Layout.

The first part of this is creating views, then using the x, y coordinates and the size for length and width to ensure to make this accurate. Then the same for three more labels. So far, easy enough. So auto resizing etc. means that it counters for rotation when the screen messes up.

Springs and Struts -

Springs - flexible width allowance

Struts - components that keep view a fixed offset away

So the auto resizing masks - you can tell them where and how to react but not by how much!

   override func viewWillLayoutSubviews() {

        super.viewWillLayoutSubviews()

    }

This has gone over 'didReceiveMemoryWarning' func. Not sure what it means yet!

override func viewWillLayoutSubviews() {

        super.viewWillLayoutSubviews()

        

        let orientation = UIDevice.current.orientation

        if orientation == .landscapeLeft || orientation == .landscapeRight {

            redView.frame = CGRect(x: 20, y: 20, width: 307, height: 161.5)

            purpleView.frame = CGRect(x: 340, y: 20, width: 307, height: 161.5)

            greenView.frame = CGRect(x: 20, y: 193, width: 307, height: 161.5)

            yellowView.frame = CGRect(x: 340, y: 193, width: 307, height: 161.5)

        } else {

            

            redView.frame = CGRect(x: 25, y: 44, width: 160, height: 300)

            purpleView.frame = CGRect(x: 191, y: 44, width: 160, height: 300)

            greenView.frame = CGRect(x: 25, y: 348, width: 160, height: 300)

            yellowView.frame = CGRect(x: 191, y: 348, width: 160, height: 300)

            

        }

    }

}

It has to do with the colour labels automatically changing to the right size when the iPhone goes to landscape. Neat!

OK, something else interesting - on different iPhones, the size does not match up! This is what I found with F1FunFacts. Hopefully it means that there is a way of making it work on all different apple devices....

So the point of all of that was to show you how complex it would be to do auto layout instead by code!

So for doing it the 'old way' you need a lot of if statements - like what we have for above! We'd have to do that for EVERY different device type! It's not a viable option. The new way of course is to use AL...

Cassowary Constraint Equation

Layout is not simple to solve. This was based on research in 2001 - Cassowary is an incremental constraint toolkit that solves equations...Relationships between views are linear equations. All about super view/neighbouring views

A1 = (M * A2) + C

Constraints are relationships between attributes on a view or on two different views. 

A - attributes

M - modifier

C - constant value

Anatomy of a Constraint

OK - something I've finally figured out on a mac is the best way to do screenshot! I have a program called xnip - it does the job!

So an attribute is a position on a view's alignment rectangle. Like the one above - AL uses the al rect to position the view on the screen. 

What does this show? These are the EDGES - the first set of attributes.

These are for leading and trailing. For English it makes sense - left to right but for Arabic it would be right to left! How appropriate being a resident in Dubai! ;)

The leading edge needs a relationship with the superview leading edge. Works for all languages. 

This will give the height and width a constant. 

Aligning two views on the horizontal and vertical axes. 

OK, so I may have overdone the screen-shotting here! But useful to see all of these examples visually. 

The baseline is an imaginary line that text rests on. First and baseline are for multiple lines. There are more attributes....

Left, top, right and bottom margins - the margins represent an imaginary margin to align things together. 

The last one is: NotAnAttribute

We'll find out more apparently!

Interface builder as AL and modal selections to make this all easy enough for us. 

So after identifying the attributes you want to use is to choose the relationships you want to build!

1. Equal - e.g. view b height equal to view a

2.  Less than or equal 

3.  Greater than or equal

Then, choose the multiplier...if you wanted it three quarters of the other's e.g. height, you would use 0.75. You can use any floating point number. Interesting! You can't change the multiplier once you've done this equation though. 

Last bit - constant. It offsets a view from a desired attribute. 

Layout Basics

Position and Size - 

Position - needs X and Y

Size - needs height and width

So in the horizontal in container option, putting in a value will offset it - this is the CONSTANT. Makes sense!

This is the equation for putting in the horizontal constraint:

So centerX is horizontal....However this constraint will not work so we will remove it!

Really useful for seeing how you get rid of this. Good to know! Another way of adding the constraint - clicking with ctrl on the edge of the screen. A red constraint means there is not enough information yet! A straight line - no 'end caps'. 

Changing the width constraint - now makes it change...

So in the example above, the two red lines mean there is an issue. The blue means OK. The little end cap lines (T shapes) means a fixed width has been put in (the width constraint of 200 I added). 

Implementing Constraints

So adding in the constraint to the bottom - this has now got ridden of the red lines! Bottom space to safe area - ctrl and dragging means you can be more specific with which view it has the distance between. So essentially, using constraints is the way to go - it eliminates the fact that devices are different sizes. It will work the same on all of them!

Layout Guides and Safe Areas

Safe areas - helps you place views within the portion of the user's screen and not obscured by system elements. 

Safe area - is layout guide

Layout guide - rectangular area that can interact with auto layout.

Pasan admits that this is all quite vague!

\

There's a visual reminder! So the safe area is an invisible rectangle where it is 'safe' to put content in that area. Safe area is in iOS 11 and up. 

When setting all constraints to 0, there is still some space at the top. OK so, the main storyboard in the settings for the project has this as the main one - so would fill up the space to the top. This is simpler than it sounds!

Lots of useful stuff here - all ready step-by-step and logical. Really useful to find out more about constraints and how to use them. I'm leaving this 'workshop' for now but will revise the rest of it later today!