Practical Auto Layout

Practical Autolayout For Xcode 8

practical-autolayout-x8-newsletterIn Practical Auto Layout for Xcode 8, using simple, practical, easy to follow examples, you will learn how to master auto layout and size classes on the Xcode 8 storyboard. You will learn how to make universal apps quickly easily and in far less time than ever before. You’ll learn how to use constraints the right way, how to avoid and resolve errors such as misplacements and conflicting constraints. You be able to customize your layout for both launch screens and your application, using buttons, labels, images, text fields and more.

You’ll learn more than just simple layout. You’ll earn how to use tack views and iPad multitasking. You’ll size images the right way without distortion. Practical Auto Layout for Xcode 8 covers what you need to know about multitasking on the iPad for the best user experience and how little you have to do to make this a  powerful addition to your app.
Practical Auto Layout for Xcode 8 shows you how to use all these tools effectively to make layouts that work on all devices in minutes.
get_it_on_ibooks_badge_us_1114

Downloads

This book has a series of downloadable projects that allow you to start each chapter with a fresh project.

The full downloads file: downloads

The images for Chapter 11 only:assets

Errata

A tech author’s work is never done. As soon as he or she completes manuscript and gets it published, the manuscript almost immediately becomes obsolete. In my case, Practical Autolayout for Xcode 8 went obsolete  a day before I published, but I had no idea about a major change in Xcode 8.1.

Until Xcode 8.1, if you wanted to update a frame with new constraints, you had two possibilities. The first was in the pinpinMenuButton and align alignment iconmenu to update as you were setting the constraints.

2016-11-29_06-05-32

The second was a selection in the resolver resolver button 2016-10-01_13-27-48

It seems everyone, including me was not ready for a change Apple made in Xcode 8.1. If you go to look for Update Frames in the resolver resolver button, it is missing:

2016-11-29_06-11-52

So where did it go?

Apple moved this to an icon on the auto layout toolbar and deleted it from the menus.

2016-11-28_07-29-22

If it were me, I wouldn’t have deleted it from the menus in such an abrupt way. Apple did. This Update Frame button  has some different behaviors  from its predecessor on the menu, and I’d like to explain that using some examples from Chapter 3 of Practical Autolayout for Xcode 8

Set up a storyboard that looks something like this with a label Hello Pizza, a text view, and  three  buttons, Pepperoni, Cheese, and Done:

2016-11-29_05-54-14

Select the Hello Pizza label.  Click the pin buttonpinMenuButton in the auto layout toolbar. In the popup, set the top to 0 points, the left to 0 points and the left to 0 points.  Leave Update Frames as None

2016-11-29_05-56-06

Add the 3 constraints. The Hello Pizza Label will show misplacement constraints.

2016-11-29_05-56-32

Press the Update Frames button update frames  and the frame updates.

2016-11-29_06-37-41

This is not always the result. You must have all constraints satisfied before the button will update frames. For example, select the text view. Press the align button alignment iconand center the text view by checking on Horizontally in Container and Vertically in Container.

2016-11-29_05-54-38

Again don’t update frames, but click  Add 2 constraints. You’ll see an ambiguous constraint in red.

2016-11-29_05-55-13

If you click the update frames button nothing happens. Until a frame has no ambiguity(i.e. no red constraint errors), you cannot update it. Most often that is setting a size. For the text box, set an absolute size in the pin menu pinMenuButton  of 175 points in both directions.

2016-11-29_05-57-41

Add the constraints. The errors all turn to misplacements.

 2016-11-29_05-58-39

Once all misplacements, you can update the frame with update frames.

2016-11-29_07-15-35

Priorities are not assumed with the new update frames button. When there is an ambiguity in size between two frames that depend on each other for size, you must specify the a priority for them or set a size.  Take for example these two buttons.

2016-11-29_05-45-35

Pepperoni is pinned to the left margin, the label above it and the text view below it. Cheese is pinned 10 points from Pepperoni, aligned to the top of Pepperoni, and pinned 10 points from the right margin. We’d like to have two buttons that fill the available space.

The option used in Practical Auto Layout for these buttons is to make them the same size. Control drag from Pepperoni to Cheese. A menu appears.

2016-11-29_06-56-57

Shift select Equal Width and Equal Heights, then hit the Add Constraints selection. The ambiguity changes to misplacements.

2016-11-29_06-57-14

Select both the Pepperoni and Cheese buttons. Hit the Update Frame button update frames and two equally sized buttons appear

2016-11-29_06-58-00

The other, more advanced option is to change priority of one of the buttons so they are not equal. Both are by default 250.  Going back to the original ambiguous layout,

2016-11-29_05-45-35

changing the content hugging priority of Pepperoni from 250 to 251 tells auto layout for Pepperoni to keep its size and Cheese to stretch to make up the difference.

2016-11-29_06-56-19

Priorities are covered in detail in Chapter 12 of Practical Autolayout for Xcode 8.

I’ll be updating the book shortly. Until then or if you cannot update your book,  consider this an errata to the versions now available.

practical-autolayout-x8-newsletterPurchase the book for  Kindle and iTunes  here:

get_it_on_ibooks_badge_us_1114

Practical Autolayout For Xcode 7

Screenshot 2015-04-01 07.53.14Do you really want to write 20 storyboards to cover three sizes of iPhones, the iPad, iPad mini and iPad Pro, and iPad multitasking windows? You don’t have to. Auto layout, size classes and stack views in Xcode 7 make this task easy. You can make one storyboard for all 20 layouts, and sell many apps as universal apps that you couldn’t before.

In iOS8, Apple made it impossible to code popovers, modal views, Alerts and Split views without size classes. In iOS9, multitasking requires it. But most developers do not know the difference between a regular width and compact width. Doing so, they risk their code becoming obsolete and useless. You need to know size classes, or your code can break in iOS9.

In Practical Auto Layout for Xcode 7, using simple, practical, easy to follow examples, you will learn how to master auto layout and size classes on the Xcode 7 storyboard. Using easy to follow examples, you will learn how to make universal apps quickly easily and in far less time than ever before. You’ll learn how to use constraints the right way, how to avoid and resolve errors such as misplacements and conflicting constraints. You be able to customize your layout for both launch screens and your application, using buttons, labels, images, text fields and more.

Xcode 7 and iOS 9 introduces two new wrinkles in the layout of your app: stack views and iPad multitasking. Practical Auto Layout for Xcode 7 covers what you need to know about multitasking on the iPad for the best user experience and how little you have to do to make this a powerful addition to your app. Stack view make the most complex auto layout storyboards and simplifies them.

Practical Auto Layout for Xcode 7 shows you how to use stack views effectively to make layouts that work on all devices in minutes.

Download_on_iBooks_Badge_US-UK_110x40_090513     

Downloads

Images for the book project.

Here are the two images used in the book’s Chapter 13 image section. You can download them by right clicking on the image and saving the image.

Skyline@2x Skyline

You might want to use your own image in Chapter 13. If you are not clear on how to do this, here are some directions using the standard camera app in iOS:

Take a photo with your iPhone.

Photo Jun 25, 7 07 11 AM

View the photo in the image display. Tap edit.

Photo Jun 25, 7 07 23 AM

Tap the crop icon then Tap the aspect ratio icon

Photo Jun 25, 7 07 33 AM

Select 2:3, since Chapter 12 assumes 2:3

Photo Jun 25, 7 07 45 AM

Tap Done

Photo Jun 25, 7 08 33 AM

Transfer the photo to your Mac using your preferred method. If you have a photo editing software on your mac or iOS device, you might want to make a second copy half the size of the first. Name the smaller photo myPhoto.png and the original larger photo myPhoto@2x.png.

More Resources for Auto Layout

If you’ve read the book, you know enough to work with auto layout in Interface Builder. You’ll be able to use auto layout and size classes for most applications you may develop. Some of you may want to go further. Some of you might not have read the book, but are curious about topics in Auto Layout. I’m curating resources about auto layout here to keep you up to date.

Apple’s Documentation

The original documentation for Auto Layout is the Auto Layout Guide from Apple. As I’ve said, I think they screwed up, and made a simple topic very complicated by going into linear equations to explain Auto Layout. If you like math or what’s under the hood in Auto layout this is your document. The code is in Objective C, so Swift only developers might have some trouble with it. Apple also discusses some of the adaptive layout design issues in the Human Interface Guidelines and the View Controller Programming Guide. You might want to read about trait collections first.

Size Classes and View Controllers

This is in my opinion the most important topic to cover next. I’ll admit I’m biased, since I wrote a book on the subject Swift Swift View Controllers available now for iBooks and Coming fall 2015 for Kindle, which you find information on the downloads page. You could also read the Apple documentation on Modal View Controllers, Popovers, Alerts, Split View Controllers, and Multitasking to learn more. In rough summary, compact width presentations act like a phone and present modal views. Regular width presentations act like a tablet, and give you more options.

Coding Auto Layout

If you need to make controls programmatically, you need to use auto layout programmatically. I wrote an introduction to this topic which you can find on the makeapppie.com website. Apple discusses this a bit and has a reference to the visual format language for coding auto layout in their Auto Layout Guide if you don’t mind code in Objective C. Swift-only people, if you read my intro first then go to Apple’s documentation, it will make a lot more sense.  You may want to look at these classes:

Coding Size Classes

Coding for size classes is a lot more involved than the automatic version we get in Interface Builder. Critical to class sizes is Trait Collections, which describes size classes programmatically. Here is the Class and protocol you need for Trait collections:

Practice What You Learned

The best thing you can do is practice. To save you from having to think out a layout, go to graphic design gallery sites like Behance or Pinterest and try to layout out someone else’s design for all devices. If you have trouble finding examples, I curate on Pinterest  for devices that I find interesting. You can find that at https://www.pinterest.com/stevenlipton/cool-ui/

Video Examples

This book is based on a series of YouTube Videos I did in Fall of 2014. If you want to see a live action version of what I did back then, you can go to the playlist to watch the videos I did for the first few chapters. They don’t completely match the book, but they are close. More tutorials will be coming in the future.

19 thoughts on “Practical Auto Layout”

  1. Hi Steve,
    Last week I bought your book from Amazon. Thanks for the great “to-the-point” instructions. It helped me a lot.

    Seems like you need to revisit the chapter # 11 which I could not complete since XCode 7.1 has got some changes that, I believe, is not in sync with chapter # 11 instructions.

    It will be great help you can please revisit chapter # 11. Thank you.

  2. Hi Steve, I downloaded your book on Amazon Kindle and I have noticed quite a number of errata that need to be brought to your attention for update/future revisions. The book has helped me to a degree to get my head round the use of the new sizing classes, however I feel that the book can be improved upon by being able to report errata, spelling mistakes, and where sections are unclear. How can I report these to you?

    Kind Regards,
    Jason

  3. Piggybacking on Muckypaws comment, does errata then result in a corrected Kindle version pretty quickly or is there a page listing errata until the is done?

    Thanks!

    1. You’ve hit one of my (and Ercia Saudun’s too) biggest sore spots about Amazon and Kindle. I can do almost nothing about correcting errata you already have. Amazon considers e-books like printed books. If you buy a e-book with errors you are stuck with it. There is nothing an author can do but, at the discretion of Amazon, correct the error for people buying it in the future. Usually for Amazon I make it a new edition with all updates for the language. This is why Swift Swift View Controllers will never have a Kindle edition. Even without my typos and errors, Apple would update Swift or Xcode in a month or so and make the book erroneous and I would have to publish a new edition and everyone would have to buy it all over again.

      I believe Apple has it right here with iBooks. If an author makes changes, the book should update as fast as the author can update it plus about day for review by Apple.

      Practical AutoLayoout for Xcode 8 will be out in Mid to late October if all goes well with all the changes I can muster. getting this out is mostly the laborious reshoot of almost every screen shot in the book since Apple changes the UI for Xcode every year. The text changes are easy in comparison.

      1. Thanks for your reply! That sucks how Amazon handles things like errata. Would it be possible to at least have an errata page on this site for the book? Thanks again!

  4. Steven, this would be super helpful if you were also able to publish the book in paperback — and preferably sell it on Amazon. Everybody learns differently. I personally tend to absorb and retain knowledge much better when studying from actual paper books. Seems old fashioned, I know.

    1. Yes everyone learns differently. And yes, many learn best from paper. A printed edition would be nice, and I have thought of it. But I’d lose money doing so. It would take me about two months to take the current text into paperback, I’d have to sell it at the current price, which gets me a very slim margin, and have to sacrifice some more lucrative projects to do so.

      1. Perhaps a helpful suggestion. You should sell the hardcopy at a significant premium over the electronic version. Clearly it costs more to produce. And the students’ price elasticity might surprise you (in a good way). I would certainly (Swiftly!) buy your paperback at a higher price :) … But either way, thank you for all your outstanding iOS / Swift tutorials.

      2. Good thought. I did have that one too. Ah, the joys of self publishing. I am contractually forbidden in my distribution contracts from doing exactly that.

        You are welcome. But sorry I don’t have a good answer for you. I’m still looking for a good answer myself.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Adventures in Swift and iOS App Development