Angela Yu Course Part 11 (up to lesson 120)
Back on a train for around an hour and ready to code! So last time it was really rewarding to crack the use of the if/else statements with the interactive 'Destini' story app. That could be easily extended and amended for lots of things! Now we're focusing on Auto Layout - something I've looked at before on Pasan's courses. I'm sure Angela will make it very accessible and shed some light on misconceptions from before!
Auto Layout
The point here is changing from portrait to landscape OR change the device type ruins the layout of the different text, buttons etc. The answer to this I know - constraints and auto layout!
Resizing the background/canvas is a terrible idea! It would be fine for a different device, but then people have different phones/devices....again the answer is AL!
Programmatic auto layout - this I looked at before with Pasan but it was very laborious. It makes more sense to set in constraints.
Positioning UI Elements Programatically
CG stands for 'Core Graphics'.
X position - how far left/right
Y position - how far up/down
Width/height - as you'd expect
By default, UIViews are transparent. So you'll have to change the UI colour!
This was required to be added. You can change the size/position on the code easily.
It is the TOP LEFT CORNER of the element (in this case square) that moves.
All of this is fine to be honest.
\
The Theory Behind Auto Layout
There are two ways to have constraints -
Pinning - distance from a certain part of the screen e.g. edges
Alignment -
So width and height are determined dynamically - based on screen size/device type/orientation.
The pinning method would change a square to a rectangle when going to landscape - scaling.
These calculations for width and height are to work out the size of the square/object!
So next we will be looking at the use of Auto Layout with the Dicee app....
Setting Constraints
So using the auto layout constraints and aligning centrally vertically and horizontally is ideal for the first bit.
Not much to write here - just editing as going along.
Lots of useful things here. Amanda's way is to create a top, middle and bottom view controller - for this app at least. Then the constraints match up to this view container, as the item list has them nested accordingly. That does make sense, honest!
Challenge!
Well the challenge should have been straight forward but something has got a little messed up. Can't completely identify what it was!
To be honest, I'm fine with auto layout. I don't think I need to use the top/middle/bottom view container idea - I'll leave that for now and come back to it if necessary.
This is a good lesson - not everything is for everyone! What I had done before with auto layout was using the click with ctrl to lock in relative positions of objects. That was fine! I will come back to this as and when I need it - a lot of it is experience but an important point here is to check all constraints as you go - rather than do this another time. Next time it will be Auto Layout using 'Stack Views'.
Auto Layout
The point here is changing from portrait to landscape OR change the device type ruins the layout of the different text, buttons etc. The answer to this I know - constraints and auto layout!
Resizing the background/canvas is a terrible idea! It would be fine for a different device, but then people have different phones/devices....again the answer is AL!
Programmatic auto layout - this I looked at before with Pasan but it was very laborious. It makes more sense to set in constraints.
Positioning UI Elements Programatically
CG stands for 'Core Graphics'.
X position - how far left/right
Y position - how far up/down
Width/height - as you'd expect
By default, UIViews are transparent. So you'll have to change the UI colour!
This was required to be added. You can change the size/position on the code easily.
It is the TOP LEFT CORNER of the element (in this case square) that moves.
All of this is fine to be honest.
The Theory Behind Auto Layout
There are two ways to have constraints -
Pinning - distance from a certain part of the screen e.g. edges
Alignment -
So width and height are determined dynamically - based on screen size/device type/orientation.
The pinning method would change a square to a rectangle when going to landscape - scaling.
These calculations for width and height are to work out the size of the square/object!
So next we will be looking at the use of Auto Layout with the Dicee app....
Setting Constraints
So using the auto layout constraints and aligning centrally vertically and horizontally is ideal for the first bit.
Not much to write here - just editing as going along.
Lots of useful things here. Amanda's way is to create a top, middle and bottom view controller - for this app at least. Then the constraints match up to this view container, as the item list has them nested accordingly. That does make sense, honest!
Challenge!
Well the challenge should have been straight forward but something has got a little messed up. Can't completely identify what it was!
To be honest, I'm fine with auto layout. I don't think I need to use the top/middle/bottom view container idea - I'll leave that for now and come back to it if necessary.
This is a good lesson - not everything is for everyone! What I had done before with auto layout was using the click with ctrl to lock in relative positions of objects. That was fine! I will come back to this as and when I need it - a lot of it is experience but an important point here is to check all constraints as you go - rather than do this another time. Next time it will be Auto Layout using 'Stack Views'.
Comments
Post a Comment