Interface Builder Tricks


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.


This is a .storyboard document from my Chess Clock Plus app

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.


The Object ID is available in the Identity Inspector on the right.

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:

private var stringTagHandle: UInt8 = 0
extension UIView {
//use Objective C Associated Object API to add this property to UIView
@IBInspectable public var stringTag:String? {
get {
if let object = objc_getAssociatedObject(self, &stringTagHandle) as? String {
return object
return nil
set {
objc_setAssociatedObject(self, &stringTagHandle, newValue, objc_AssociationPolicy(OBJC_ASSOCIATION_RETAIN_NONATOMIC))
//this should work in a similar way to viewWithTag:
public func viewWithStringTag(strTag:String) -> UIView? {
if stringTag == strTag {
return self
for view in subviews as! [UIView] {
if let matchingSubview = view.viewWithStringTag(strTag) {
return matchingSubview
return nil

Because our tag is @IBInspectable, we can select any view in Interface Builder, and we’ll see a nice form in the Attributes Inspector:


In our UIViewController subclass, we can retrieve the view with the following code:

let testView = view.viewWithStringTag("testView")
println("TEST VIEW: \(testView)")

view raw
hosted with ❤ by GitHub

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 All

That’s everything for this post. I hope you’ve found that these tricks are useful additions to your understanding of Interface Builder.

One thought on “Interface Builder Tricks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s