Join Scott Gardner for an in-depth discussion in this video Lay out a user interface, part of iOS App Development: UI with Visual Tools.
- [Voiceover] Before I can customize…the design of a user interface…using the Inspectable and Designable Views I created,…I should lay out the basic user interface…that I want to then customize.…I'll return to the Storyboard.…This time I'll use Xcode's Open Quickly dialogue…by pressing the keyboard shortcut…Command + Shift + O and type story.…That should return the Storyboard…as the first search result.…Now I'll create some Views that I can then design.…By dragging some Views from the Object Library…onto the canvas, including an Image View, and a Text Field.…
I'll hold the option key down while I drag…on the Text Field to duplicate it.…And I'll drag a Button onto the canvas.…Let's say I'm creating a login screen.…I'm going to get into the details…about Auto Layout and using Stack Views later.…For now, if you're unfamiliar with these topics,…just follow along step by step.…Select the Image View and click the third button…from the left in the bottom right hand corner…of the Storyboard Editor, the Pin tool.…Set the Width and Height to 200 and click Add 2 Constraints.…
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.