A Better Interface Builder Experience
- 1. A Better Interface Builder Experience Justin Munger NSCoder October 27, 2015
- 2. Introduction • Professional software developer for 17 years • Independent contractor for 10 years • Mobile development for 6 years • Started in iOS in 2009, Android in 2010 • Full-time Android in 2012 • Back to both iOS and Android in 2015
- 3. Interface Builder • One of the things I’ve enjoyed working with in iOS • Ability to see UI and interactions in one place • Accurate visual representation of static UI components
- 4. BUT…
- 5. Annoyances of IB • Not all properties of UI I want to change are available in the Attributes Inspector • Mix of configuration in IB and code • Difficult to consolidate UI initialization into a storyboard
- 6. User Defined Runtime Attributes • Introduced in Xcode 4 • Uses KVC to set values defined in Storyboard at runtime • Found in Identity Inspector for current view • Limited to the following data types: • Boolean • Number • String • Localized String • Point • Size • Rect • Color
- 7. Demo
- 8. This is GREAT! • I can now consolidate my UI initialization into the view in the storyboard scene • Fewer surprises and gotchas with code initialization that I forgot about
- 9. BUT…
- 10. Still not ideal • The User Defined Runtime Attributes are not really user-friendly • Key needs to be typed correctly and doesn’t work if you have a typo • My initialization for the UI is still split up between the User Defined Runtime Attributes in the Identity Inspector and the regular view attributes in the Attribute Inspector
- 11. Wouldn’t it be nice if… • …we could have User Defined Runtime Attributes be part of the Attributes Inspector instead? • …attributes were modifiable in a name-safe, type-safe, easy-to-read format? • …attributes were organized in a user-friendly manner, even grouped together?
- 12. Introducing IBInspectable! • Attribute added to a property in your application • Allows it to be added to the Attributes Inspector along with all of the other view attributes • Interface Builder automatically generates the appropriate UI for the attribute based on its type • IBInspectable uses User Defined Runtime Attributes underneath the covers to store/set value
- 13. How to use IBInspectable • Add IBInspectable/@IBInspectable (Obj-C/Swift) preceding the property definition • That’s it! Super simple! • Can be applied to properties of UIView subclasses • Also can be applied using categories/extensions on existing UIViews and its subclasses
- 14. Naming/Grouping Properties for IBInspectable • Requires proper ordering/naming of properties in source file • Property name is converted from camel case to title case (with spaces) for all words in name 2 characters or longer • Interface Builder appears to create groupings if either the first or last part of the property name is the same • Adds a divider line between these grouping
- 15. Demo
- 16. This is REALLY GREAT! • Now my view configuration is all consolidated into the Attributes Inspector for the view • I can easily see and change the values as needed
- 17. BUT…
- 18. I Can’t SEE My Changes • None of the changes I make to the attributes are reflected in the actual view at design-time • I still need to run the app to see how the attributes change the view at run-time • Wouldn’t it be nice if there was a way to be able to see changes in these attributes reflected in the view at design-time?
- 19. Introducing IBDesignable! • Attribute added to a UIView subclass • Allows changes made to custom attributes to be drawn in the view and instantly visible at design- time • Helps give a more accurate look at what the UI will appear like when it is first initialized
- 20. How to use IBDesignable • Add IB_DESIGNABLE/@IBDesignable (Obj-C/ Swift) preceding the class definition • Again, that’s it! Super-simple! • Can be applied to any UIView-derived subclass • Since it is applied at a class level, it cannot be used with category/extension like IBInspectable can
- 21. Demo
- 22. Any Questions?
- 23. Thanks! • Slides and code are at: https://github.com/justinkmunger/ BetterIBExperience • Email: justinkmunger@gmail.com • Twitter: @justinmunger