Interface Builder is a great tool for creating the UI for iOS apps. Most iOS developers already know the basics of how to use it. So in this post, I’ll share a few of the more obscure techniques for getting the most out of IB.
All Views Under the Cursor
Having a view obstruct other views is a common issue in Interface Builder. It can be hard to visualize the ‘depth’ of your views without picking through the view hierarchy in the dock.
Fortunately, Interface Builder has a menu that will show all the views that are underneath your cursor. To see this menu do a Shift + Right Click, or Shift + Control + Click if you’re a one-button-per-mouse type of person.Apple mentions this feature every year at WWDC because it’s so useful and easily overlooked.
Referring by Object ID
Let’s say Developer A and Developer B are working on a project with a storyboard. Developer A has an issue with a view, so they’d like to point it out to Developer B. What’s the most concise and unambiguous way to refer to that view?
Interface Builder assigns every object in a storyboard a unique Object ID. For any given object, you can find its ID in the Identity Inspector. You might recognize these ID’s if you’ve ever looked through the XML in a .storyboard file.Once Developer B receives the Object ID, they can easily find the view using Xcode’s Find feature (Command + F). Xcode will highlight the view with the matching Object ID, as shown in the image above.
Add @IBInspectable to Everything
Let’s look at the tag property on UIView. It’s an integer that is not actually used by UIKit, but instead allows developers to associate some metadata with the view. The idea is that one can ‘tag’ a view with some specific ID. After the tag was set, it’s easy to retrieve the view from the hierarchy with a call to the viewWithTag: function.
The problem with this approach is that integers are not inherently meaningful to people, so developers will just randomly pick a value. This could cause collisions between the tags assigned by different developers. Even for a solo developer, it’s hard to remember what all these integers stand for.
We can easily remedy this issue by adding our own tag to UIView. Our new tag will be a string, which allows for more descriptive tags:
In our UIViewController subclass, we can retrieve the view with the following code:
Having said all that, I actually don’t recommend using the viewWithTag: approach. It’s still better to use @IBOutlet connections to make your views accessible to your view controllers. However, I felt this was a good example of how flexible and powerful the @IBInspectable feature is.
That’s everything for this post. I hope you’ve found that these tricks are useful additions to your understanding of Interface Builder.