iOS Auto Layout Programmatically

May 4, 2017
Reading Time: 2 minutes

For some reason getting a grasp on ios auto layout programmatically seemed to be a bit of a challenge and most of the resources I found on it were scattered or not very good.

The official Apple docs on ios auto layout programmatically seemed over the top on theory and then how it describes what you should do isn’t very clear, at least for me anyways.

I found the following to be pretty helpful in understanding it clearly and a good approach:

Resource Guide

  1. Watch this video. The guy explains in the first seven minutes what exactly Auto Layout is looking for in order to work: https://www.youtube.com/watch?v=R0PrgE_PKSg
  2. Learn about anchors:
    1. https://cocoacasts.com/working-with-auto-layout-and-layout-anchors/ 
    2. https://stackoverflow.com/questions/36507043/programmatically-creating-constraints-bound-to-view-controller-margins
  3. Bookmark these resources from Apple:
    1. https://developer.apple.com/reference/uikit/nslayoutconstraint
    2. https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853
  4. You may not need it right away but understand what the compression resistance and hugging priorities are.
  5. The default content compression resistance priority is 750.
  6. The default content hugging priority is 250.
  7. Don’t forget to set

    translatesAutoresizingMaskIntoConstraints = false.

  8. The constraints won’t always show until you call <myView>.layoutIfNeeded().
  9. Activate and Deactivate constraints. Don’t use add/remove.
  10. Keep a reference to the constraints that you will change later.
  11. Wrap a UIView.animate around the constraint changes and layoutIfNeeded() call.
  12. Create some basic layouts with Xcode and see how things do and don’t work – keep it simple and then build on that. Some suggestions of things to make:
    1. A background image/color expanding the entire width and height of the screen.
    2. An image centered in the middle of the screen, offset from the top.
    3. A dropdown accordion. Example: https://codepen.io/fainder/pen/AydHJ
    4. Two buttons, side by side equal spaced and equal size. Hint: https://stackoverflow.com/questions/28148843/ios-autolayout-two-buttons-of-equal-width-side-by-side
    5. A scroll view with a content view inside of it with components in the content view to make the content view be a dynamic height.
    6. Add items that change location on the screen from tapping, and animate with UIView.animate. Take it a step further and do with Keyframe Animation.
  13. Go watch the 2015 WWDC Videos on Mysteries of Auto Layout. Note: Must use Safari to view.
    1. https://developer.apple.com/videos/play/wwdc2015/218/
    2. https://developer.apple.com/videos/play/wwdc2015/219/

Conclusion

Follow all of the items under the resource guide and you will be a lot more confident with doing ios auto layout programmatically.

Finally completed an iOS Sprite Kit game

April 28, 2014
Reading Time: 1 minute

Things have been quiet around here for the past few weeks, well I guess only on the site. I however have been busier than can be between work and doing some of my own side projects. One of those happens to be an iOS Sprite Kit game that I created. I find that when doing an inital use for a given framework, it’s best to do simple individual iterations of different concepts that you’d like to try out, see how those work together, before moving forward with a much larger idea. So that’s exactly what I did.

This first app is a timed version of tic tac toe. It introduced some initial game making concepts that I got to understand, and then create a solution for (nothing earth shattering, but going just from concept to production is a learning experience in itself). It introduced setting, saving and re-initializing timers among other things as well.

I pushed it out to the app store, where v1.0 currently sits. You can check it out here.

I’ve already started brain storming the next app idea, which I’m torn between doing another one in iOS Sprite Kit or Cocos2D-X. I’ll probably at least do a longer, more adventure based game in iOS Sprite Kit at least one more time, before pursuing a different iOS framework. Eventually I’ll make it into porting at least the Timed Tic-Tac-Toe game to Android as an exercise.

Happy Coding!