Join Scott Gardner for an in-depth discussion in this video Images in size classes, part of iOS App Development: UI with Visual Tools.
- [Voiceover] Working in the project that uses size classes…to create adaptive layouts, I'll now take a look at…using size classes to conditionally display…images based on size class.…I'll use a couple of images that are available…within the exercise files.…First, I'll show the Project Navigator.…I'll select the assets.xe assets folder…and I'll click the plus button on the bottom.…And this time, I'll choose New Image Set.…With the resulting image selected…in the Attributes Inspector,…I'll change the scale factors to Single Vector.…And next, I'll set the height to Any and Compact.…
Unlike with other size class-based attribute changes,…specifying which images to use based on…various size class combinations…is done in the Asset Catalog.…On top, notice that the square brackets…enclosing the two asterisks.…This is to indicate that the image placed here…will be used for any width and any height.…Because I changed the height value…in the Attributes Inspector to Any and Compact,…there's also an image placeholder…with an asterisk and hyphen.…
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.