Join Scott Gardner for an in-depth discussion in this video Change size class constraints, part of iOS App Development: UI with Visual Tools.
- [Voiceover] I'll create a single view…application iOS project by selecting…File, New, Project from the xCode menu.…Naming it workingwithsizeClasses, and click Next.…I'll select the main storyboard file to…open it in the editor, and then I'll…hide the navigator to give us some more room.…From the object library, I'll drag a view onto the canvas.…I'll change its background color to aqua in…the attributes inspector, and I'll refer to this…as the blue view.…
I'll set it's width to 100, and it's height to 200…using the pen tool.…And I'll center it horizontally and vertically…using the align tool, updating frames for…items of new constraints.…You may have been wondering why all…this time the shape of the scene is square,…that is, it's not the shape of an iPhone or iPad.…This generic shape is meant to convey that…you can design a user interface that can…be displayed on any device, as I've shown.…From the attributes inspector, you could change…the simulated metric size to a particular device…if you wanted to, like so.…
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.