Join Scott Gardner for an in-depth discussion in this video Custom live-rendering views, part of iOS App Development: UI with Visual Tools.
- [Voiceover] With the custom designable view in place,…I'll further customize it as I work towards…designing a complete user interface.…In the Customview.swift file,…I'll set the layer's borderColor property.…Layers work with CGColor not UIColor…so I'm creating a UIColor instance…and setting its red, green, blue…and alpha values and then calling UIColor's…CGColor method to return a CGColor instance.…The view in Interface Builder…should update to show the border is now dark blue.…
How about rounding corners?…Set the layer's cornerRaidus to 20.0…above the first line of code that I wrote…I'll set the layer's maskstoBounds property to true.…You shouldn't see any changes to the view.…All I've done is explicitly told the layer…to clip the content outside of the bounds.…This is automatic in some cases…but not in others so it's just good…to be explicit about it.…Option click on the maskstoBounds property…and in the quick help pop over…I'll show that the default value for this property is false.…
Now I'll give the view a nice gradient background.…
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.