Join Scott Gardner for an in-depth discussion in this video Work with Auto Layout constraints, part of iOS App Development: UI with Visual Tools.
- [Voiceover] I'll add some more constraints…to the project I started…and created a single Auto Layout constraint in.…This time I'll create a height constraint…on the blue view relative to its superview.…To do this, I'll control drag…from the blue view to its superview.…In the pop-up that appears, I'll click Equal Heights.…In complex layouts, it's often easier…to use the document outline when control dragging…between two views to create constraints.…I can do so by opening the document outline…and control dragging between views as we see here.…
Now I'll click the height constraint I just created…to display its attributes in the Attributes inspector.…Notice that the equal heights constraint…has both a first item and a second item and a multiplier.…Let's make the blue view's height equal…to half its superview's height…by entering 0.5 for the multiplier.…Also notice that the blue view…does not automatically update its layout on the canvas.…This is because I still have an ambiguous layout.…I've set its width and height but not its position.…
Here iOS app architect Scott Gardner explains how to create designable views and dynamic and adaptive user interfaces for any screen size or orientation. He shows how to work with stack views, images, custom fonts, and Interface Builder's Auto Layout tools, which speed up your design process and help adhere to Apple's interface guidelines. Along the way, he provides best practices for designing interfaces that are clean, efficient, and enjoyable for users.
- Creating and customizing views
- Laying out a user interface
- Working with dynamic Auto Layout designs
- Stacking views
- Creating an adaptive layout
- Handling orientation changes
- Working with images
- Customizing fonts
Skill Level Intermediate
Sketch: Mobile Design Workflowswith Diane Cronenwett1h 30m Intermediate
1. Designable User Interfaces
2. Dynamic User Interfaces
3. Adaptive User Interfaces
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.