Join Scott Gardner for an in-depth discussion in this video Designable views with inspectable properties, part of iOS App Development: UI with Visual Tools.
- [Voiceover] I'm starting out in a project that has…a custom view that fully renders in Interface Builder.…I'll go beyond that now to create views that not only…render in Interface Builder, but are also designable…in Interface Builder.…Swift extensions allow us to add new functionality…to existing types.…I'm going to take advantage of this to extend the…base UIView class and make it designable.…From the Menu, select File, New File.…Select Swift File from the iOS Source section…and click Next.…Enter UIView+Designable for the file name…in the Save As: and click Create.…
Let's close the Assistant Editor by clicking…the Show Standard Editor button in the Toolbar.…The Swift File template starts us out…with an import of foundation.…We want to extend the class from the UIKit framework,…so I'll change the import foundation to import UIKit.…Now, I'll create an extension on UIView.…I'm going to create a series of properties with the…@IBInspectable attribute.…Adding this attribute will make the properties…inspectable attributes in Interface Builder.…
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.