Group Group Group Group Group Group Group Group Group

Auto Layout Best Practices | Ray Wenderlich


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5160-auto-layout-best-practices

Amazing screencast course on Auto Layouts … thank you Gemma!

I love how you encapsulated so much styles of performing Auto Layouts in clear DEMOs

Please more advanced Auto Layouts constraints on rotation or gyro effects.

@albaqawi Thank you for your suggestion - much appreciated! I will forward it to the tutorial team. Thanks again! :]

thank you for the fast acknowledgment… I would love to follow an advanced course where an app has more than 1 layout design due to TypeClass orientation compact or regular on iPhone(s) and iPad sizes.

Many times you fall into traps of the layout not refreshing based on rotation due to advanced reasons. I know you guys will craft a marvelous best practices course on this level.

I have question:
Do we need to have the equal width /height constraint with a priority of 750? If so can you please explain why? Thanks in advance.

P.S : I understand if we have 1000 priority for max width/height and 1:1 background ratio with 1000 priority, we should be good. I must be wrong but just wanted to let you know my thought process.

@gemmakbarlow Can you please help with this when you get a chance? Thank you - much appreciated! :]

Sorry for the delayed reply here. I’d recommend testing this out by downloading the materials and running the ‘Snakes and Ladders - Demo 1 - Final’ project.

You’ll see that if you set the priority of both the width / height constraints to 1000 things look fine in Interface Builder, but when you build and run the project the board doesn’t layout correctly. A layout error is printed to the console.

My making the priority of these constraints 750, we’re saying 'Auto-Layout engine, please fulfill this constraint if you can, but the 1:1 ratio must be fulfilled.

On a rectangular iOS device screen, this will result in the engine -

  • Constraining the width and height of the board to a 1:1 ratio
  • Checking if the 1:1 ratio can be maintained if we make the width of the board the same as the width of the screen (this is possible in a Portrait orientation). If this can’t be achieved, the engine will ignore this constraint.
  • Checking if the 1:1 ratio can be maintained if we make the height of the board the height of the screen (this is possible in a Landscape orientation). If this can’t be achieved, the engine will ignore this constraint.

As a result, setting these constraints to 750 allows the board to be set to the largest possible square for the device screen, in any orientation.

Hope that helps !