Join Scott Gardner for an in-depth discussion in this video Create an Auto Layout constraint, part of iOS UI Development with Visual Tools.
- [Voiceover] I'll begin by creating…a new single view application IOS project,…following the same steps…and setting the same options…as I did previously,…this time naming it…"Creating Dynamic User Interfaces"…Click Next and save your project…some place convenient, such as your Desktop.…I'll select the "Main.Storyboard" file…and I'll hide the Navigator and Document Outline…to give us some more room.…Then I'll drag in a View from the Object Library…on to the canvas.…I'll set the View's background color to Aqua…in the Attributes Inspector,…and I'll refer to this as the "Blue" View going forward.…
Now I'll re position this View…so that it snaps to the horizontal…and vertical center of the canvas.…We can use the Preview Assistant…to see how this will look on a particular device.…I'll click the Assistant Editor button in the tool bar,…and then click Automatic in the Jump Bar…and select Preview.…Notice that the Blue View is displayed on screen…at what appears to be the same distance…in and down from the top left corner of the screen,…
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?
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.