Join Scott Gardner for an in-depth discussion in this video Customize fonts based on size classes, part of iOS App Development: UI with Visual Tools.
- [Voiceover] Within the project I created to demonstate…creating adaptive layouts and conditional images,…I'll wrap things up by looking at how even fonts…can be changed based on size classes.…I'll switch back to any width, any height…and then I'll drag a label on to the canvas…from the Object library,…above the triangle image view.…In the Attributes Inspector, I'll click the T button…to change the font from System to Custom…and then within the font family popup…where you can use type head searching…to jump ahead to the font you're looking for,…I'll type Z to jump down to the bottom of the list…and then choose Zapfino for the font family.…
I'll also change the font size to 24…and then click Done…and I'll change the label text.…Now I'll use the pin tool to pin the label's bottom…to the image view with a distance of eight points…and add that constraint.…Then I'll use the align tool to center it horizontally,…this time updating frames.…I'll run this in the iPad simulator.…It looks fine in both landscape…and portrait, however, if I active split view…
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.