Join Scott Gardner for an in-depth discussion in this video Custom stack-view-based UI, part of iOS App Development: UI with Visual Tools.
- Within the project I started…and laid out a user interface using stack views,…I'll now start to customize this user interface.…First I'll position the enclosing stack views.…Note that you don't need to add constraints…to size the stack view.…Its intrinsic size is based on its contents.…So with the outer most stack view selected,…I'll use the align tool and center…the stack view horizontally.…I'll click add one constraint,…but I won't update frames yet.…Now using the pin tool, I'll set the leading,…top, and trailing constraints to zero…and this time leave constraints to margins checked.…
This will pin these edges to the standard margins,…and this time I will select for update frames…for items of new constraints before clicking…the add three constraints button.…What I actually want is the leading and trailing edges…to be the standard margin distance or greater.…That way the view will be centered…and naturally spaced out horizontally…but in more compact screens I'll be able…to dynamically adjust the width to fit.…
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.