Interface Builder Tricks

Software

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.

IB_underCursor

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.

IB_searchObjID

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:

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

IB_Inspectable

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 All

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

Advertisements

One thought on “Interface Builder Tricks

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s