Xcode - Visually identify custom views in interface builder / storyboard

Question

If you build a custom UIView, and integrate it inside of a parent view/view controller in interface builder, the graphical element representing your custom view is invisible, if you don't specify a background color (I don't).

Is there any way, solely during development, to identify different custom views? Any hacks/tricks to distinguish them?

The closest I could come up with is setting the background color in IB, then removing the background in the implementation of the custom view.

Answer 1

Bounds Rectangles

You might find bounds rectangles useful. You can turn them on by going to the menu bar and choosing Editor > Canvas > Show Bounds Rectangles.

Here's an example. I have a view (a UICollectionViewCell subclass) laid out in a nib. It has a single-line label, a two-line label, and a custom subview. The custom subview itself contains a smaller custom subview. Here's the nib with bounds rectangles off:

Here's the same nib with bounds rectangles on:

Background Color Override

Here's another technique that builds on the idea of setting the background color. This technique requires your deployment target to be iOS 5.0 or later.

As you described, set the background color to make the view visible in the nib:

Then switch to the Identity Inspector and add backgroundColor in the User Defined Runtime Attributes section. Set it to the background color you want the view to have at runtime. For example, if you want it to be white at runtime:

If you want the background color to be clear, you can set backgroundColor to a color with opacity 0, or you can set it to “Nil” instead of any color: