Join Scott Gardner for an in-depth discussion in this video Design UI with stack views, part of iOS UI Development with Visual Tools.
- [Voiceover] I'm starting off in the project…with a single stack view that embeds a label…and a text field.…I can now take the same approach to layout…an entire user interface using stack views.…I'll repeat the steps I took with the first name label…and text field pair on the remaining label text field pairs…minus setting the width, and you'll see why shortly.…I'll select each label and text field pair,…embed them in a stack view,…and then set the stack view's spacing to eight.…Now I'll select all four stack views,…and click the stack tool to embed them in a stack view.…
Depending on how you had positioned these stack views…before embedding them in a stack view,…the alignment setting of the enclosing stack view…maybe leading or center.…What I want is trailing,…so that the text fields will align nicely to the right,…so I'll change the alignment for the stack view…in the attributes inspector to trailing.…I'll also give the spacing a value of eight.…Now I'll select the stack view that I just created…and the image view, and select the stack tool button again…
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
Learn 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.