Join Scott Gardner for an in-depth discussion in this video Customize a designable user interface, part of iOS App Development: UI with Visual Tools.
- [Voiceover] I've laid out a user interface.…Now it's time to use the inspectable…and designable views I created to customize its design…and see those changes rendered right in Interface Builder.…I'll select the image view…and then in the Identity Inspector, set its Class…to the DesignableImageView class.…Next, in the Attributes inspector,…where I now have the inspectable properties…I created in the UIView extension,…I'll set the Border Width to 2,…Border Color to White Color,…and Corner Radius to 100.…
Because I marked the designable image view…with the @IBDesignable attribute,…the design view renders directly in Interface Builder…saving us a build and run…or even a trip to the Preview Assistant Editor…to visualize the changes to the design.…I'll keep going with this.…I'll select the Email address…and Password text fields,…and then in the Identity inspector,…set their Class to DesignableTextField.…Now in the Attributes inspector…I'll change the place holder text color to white color.…I see that change take effect immediately…
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.