Auto Layout by Tutorials (First Edition): Build Dynamic User Interfaces on iOS

381 Pages·2020·46.175 MB·English

by  raywenderlich Tutorial Team, Jayven Nhan, Libranner Santos

Auto Layout
Auto Layout by Tutorials
By Jayven Nhan & Libranner Santos
Copyright ©2020 Razeware LLC.
Notice of Rights
All rights reserved. No part of this book or corresponding materials (such as text,
images, or source code) may be reproduced or distributed by any means without prior
written permission of the copyright owner.
Notice of Liability
This book and all corresponding materials (such as source code) are provided on an
“as is” basis, without warranty of any kind, express of implied, including but not
limited to the warranties of merchantability, fitness for a particular purpose, and
noninfringement. In no event shall the authors or copyright holders be liable for any
claim, damages or other liability, whether in action of contract, tort or otherwise,
arising from, out of or in connection with the software or the use of other dealing in
the software.
Trademarks
All trademarks and registered trademarks appearing in this book are the property of
their own respective owners.
raywenderlich.com 2
Auto Layout
Table of Contents: Overview
About the Cover...................................................................................... 10
What You Need........................................................................................ 14
Book License............................................................................................. 15
Book Source Code & Forums............................................................. 16
Section I: Beginning Auto Layout.................................. 17
Chapter 1: Introducing Auto Layout................................... 18
Chapter 2: Construct Auto Layout with the Interface
Builder............................................................................................. 28
Chapter 3: Stack View.............................................................. 64
Section II: Intermediate Auto Layout.......................... 81
Chapter 4: Construct Auto Layout with Code................ 83
Chapter 5: Scroll View........................................................... 112
Chapter 6: Self-Sizing Views............................................... 125
Chapter 7: Layout Guides..................................................... 154
Chapter 8: Content-Hugging & Compression-
Resistance Priorities............................................................... 163
Chapter 9: Animating Auto Layout Constraints.......... 172
Chapter 10: Adaptive Layout.............................................. 183
Chapter 11: Dynamic Type................................................... 221
Chapter 12: Internationalization & Localization......... 247
Chapter 13: Common Auto Layout Issues..................... 257
Section III: Advanced Auto Layout............................. 281
raywenderlich.com 3
Auto Layout
Chapter 14: Under the Hood of Auto Layout............... 282
Chapter 15: Optimizing Auto Layout Performance... 306
Chapter 16: Layout Prototyping with Playgrounds... 321
Chapter 17: Auto Layout for External Displays........... 342
Chapter 18: Designing Custom Controls....................... 356
Conclusion.............................................................................................. 381
raywenderlich.com 4
Auto Layout
Table of Contents: Extended
About the Cover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
About the Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
About the Editors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
What You Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Book License. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Book Source Code & Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Section I: Beginning Auto Layout. . . . . . . . . . . . . . . . . . . 17
Chapter 1: Introducing Auto Layout. . . . . . . . . . . . . . . . . . . . . . . . . 18
What is Auto Layout?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Beginning Auto Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
UIView and the View Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Thinking in Auto Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Constraints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Intrinsic content size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Priorities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Chapter 2: Construct Auto Layout with the Interface
Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Setting up the launch screen layout using a storyboard. . . . . . . . . . . . . . 29
Using Xibs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Key points. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Chapter 3: Stack View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Implementing a vertical stack view. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Adding constraints to a stack view. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Embedding views into a horizontal stack view . . . . . . . . . . . . . . . . . . . . . . . 67
Alignment and distribution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
raywenderlich.com 5
Auto Layout
Nesting stack views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
When not to use stack views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Key points. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Section II: Intermediate Auto Layout . . . . . . . . . . . . . . 81
Chapter 4: Construct Auto Layout with Code . . . . . . . . . . . . . . . 83
Launching a view controller from the storyboard in code. . . . . . . . . . . . 84
Launching a view controller without initializing storyboard . . . . . . . . . 86
Building out a view controller’s user interface in code . . . . . . . . . . . . . . . 88
Auto Layout with visual format language . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Benefits and drawbacks from choosing the code approach. . . . . . . . . 109
Challenges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Chapter 5: Scroll View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Working with scroll view and Auto Layout. . . . . . . . . . . . . . . . . . . . . . . . . . 113
Adding the Options Menu to the Profile Screen . . . . . . . . . . . . . . . . . . . . 114
Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Chapter 6: Self-Sizing Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Accomplishing self-sizing views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Table views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Collection View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Chapter 7: Layout Guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Available Layout Guides. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Creating layout guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Creating custom layout guides. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
raywenderlich.com 6
Auto Layout
Chapter 8: Content-Hugging & Compression-Resistance
Priorities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Intrinsic Size and Priorities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Practical use case. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Chapter 9: Animating Auto Layout Constraints. . . . . . . . . . . . 172
Animate Auto Layout using Core Animations. . . . . . . . . . . . . . . . . . . . . . . 173
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Chapter 10: Adaptive Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
One storyboard to run them all . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Size classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Adaptive presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
UIKit and adaptive interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Adaptive images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Challenge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Chapter 11: Dynamic Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Why Dynamic Type?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Setting the preferred font size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Making labels support Dynamic Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Making custom fonts support Dynamic Type . . . . . . . . . . . . . . . . . . . . . . . 232
Managing layouts based on the text size. . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Supporting Dynamic Type with UITableView. . . . . . . . . . . . . . . . . . . . . . . . 236
Supporting Dynamic Type with UICollectionView. . . . . . . . . . . . . . . . . . 237
Challenges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Chapter 12: Internationalization & Localization . . . . . . . . . . . 247
What’s internationalization and localization?. . . . . . . . . . . . . . . . . . . . . . . 247
Auto Layout and internationalization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
raywenderlich.com 7
Auto Layout
Previewing languages in Interface Builder. . . . . . . . . . . . . . . . . . . . . . . . . . 252
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Chapter 13: Common Auto Layout Issues. . . . . . . . . . . . . . . . . . 257
Understanding and solving Auto Layout issues . . . . . . . . . . . . . . . . . . . . . 257
Common performance issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Section III: Advanced Auto Layout. . . . . . . . . . . . . . . . 281
Chapter 14: Under the Hood of Auto Layout. . . . . . . . . . . . . . . 282
Alignment rectangles versus frame rectangles. . . . . . . . . . . . . . . . . . . . . . 283
Fitting Auto Layout in the big picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Solving constraints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Solving equality constraints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Solving linear programming problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Cassowary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Chapter 15: Optimizing Auto Layout Performance . . . . . . . . 306
Betting safe on performance with Interface Builder. . . . . . . . . . . . . . . . 307
Factoring in the render loop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Why update constraints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Constraints churn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Unsatisfiable constraints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Constraints dependencies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Advanced Auto Layout features and cost . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Apple optimizing UIKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Chapter 16: Layout Prototyping with Playgrounds . . . . . . . . 321
Getting started with playgrounds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating a custom button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Moving code to the Sources folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
raywenderlich.com 8
Auto Layout
Working with more complex custom views . . . . . . . . . . . . . . . . . . . . . . . . . 334
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Chapter 17: Auto Layout for External Displays . . . . . . . . . . . . 342
Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Building a layout for an external display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Configuring an external display window . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Handling an existing external display connection. . . . . . . . . . . . . . . . . . . 348
Connecting a new external display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Disconnecting an external display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Accommodating external display resolutions. . . . . . . . . . . . . . . . . . . . . . . 351
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Chapter 18: Designing Custom Controls. . . . . . . . . . . . . . . . . . . 356
Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Applying adaptive layout to a custom view. . . . . . . . . . . . . . . . . . . . . . . . . . 358
Integrating a custom view from NIB to storyboard . . . . . . . . . . . . . . . . . 363
Visualizing XIB/NIB files in storyboards . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Preparing custom views for Interface Builder . . . . . . . . . . . . . . . . . . . . . . 366
Making a custom UIButton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Making a custom UIControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Implementing accessibility features.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Key points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
raywenderlich.com 9
A
About the Cover
While the Marrus orthocanna looks as though it belongs to some other alien world,
the jellyfish is found in the deep waters of the Arctic and other cold oceans. Though
delicate, it is large — 1–2 meters — and translucent, blushing hints of color across
the body.
Beyond its science-fiction appearance, the most amazing thing about this jellyfish is
that it is many jellyfish. The Marrus orthocanna is a colonial animal. Like bees or
some flocks of birds, it is comprised of multiple animals who live together for some
evolutionary benefit. In the case of this jellyfish, the separate zooids are linked
together by one long stem, working in unison to live.
Like this creature, Auto Layout boasts impressive interdependence and coordination,
while the separate components are related by constraints and attached to a parent
view. Both Auto Layout and the Marrus orthocanna show us the elegance and
efficiency that can be achieved when independent pieces work together to thrive.
raywenderlich.com 10