Xcode interface builder Tips and tricks

Xcode 8.2, Interface builder, Storyboard, Swift

Hey, I wanted to share view tips and tricks you may use if you like laying your design in interface builder.

Media Library

In the Utilities section (the one on the right), there is libraries section where there is the Object Library we use all the time, on the right of it you can see the Media library where you can find images way faster and drag-drop them into your views. Your images are not supposed to be in an Assets Catalog, but I noted 1x images are not recognized.

Localization Lock

Allows you to look some or all of a view properties. Comes in handy to avoid accidental modification e.g. on layout or strings. You can lock the whole storyboard from Edit menu -> Localization Lock or specific views from Identity Inspector under Document.

Embed In /Unembed And Arrange

You may have a couple of views you want to bundle together under a UIView/ScrollView/stackView, Instead of dragging new view and then drag them into it , you can select them and from edit->Embed in you may select one of the options UIView/ScrollView/stackView, and you can embed your scene into a UINavigationController/UITabbarController unless its a Tab Bar Controller, in case it’s a navigation controller it can be embedded into a Tab Bar Controller only . The other way you can select the containing View and choose Unembed from editor. Note that Autolayout constraints will be cleared.

Arrange (send to front,back,backward, and forward): select a view and from edit->arrange you may change its order among its siblings view (same level).

Refactor to storyboard

You may select a scene or more than one and the edit->refactor to storyboard then you will be asked to name the storyboard and you will have a new storyboard file with the selected scene(s).

First Responder

It’s a set of functions that can be applied to the first respondere.g. TextField. There are some of functions already defined such as undo,selectAll,copy,… . plus you can create your own functions. all you need is to connect UIControls actions in the storyboard as usual but now with the First Responder.

Color Palette

This is very useful feature , since you will use certain set of colors redundantly in the project, it’d be helpful to create a color palette for ease of access. You may check how from here.

Designables And Inspectable

Marking a UIView subclass as @IBDesignable will tell the interface builder to refresh the view whenever a change occurs to its attributes. Although in more complex scenes and bigger storyboards this feature could be a pain to the compiler and you may ending up turning it off 😀 .

Marking a property as Inspectable will make it shows in the Attributes Inspector and allows you to edit your custom properties from the interface builder.
Using Both features Can be great for prototyping. To avoid slowness you need to turn off “Automatically refresh views” form edit menu. plus make your storyboards smaller.

That’s it for now, will keep adding whenever I find more interesting IB stuff. Hopefully they come in handy.

Xcode : Create color Palette in Interface builder

Every project has its own set of colors, and if you use Interface builder like me, then you probably would like to create a color set for each project so you don’t get mad when you want to set a color for some text and not finding it in the “Recently used Colors” Section !.

You can simply create your own color palette in IB by clicking on the color picker -> Color palettes -> Click on the settings icon and click on new. 🙂

After that you can click on the settings icon again and rename the palette. And then you can add the colors related to the project you want.

And here you can see how it’s done in pictures . Have fun.


screen-shot-2016-12-15-at-10-31-49-am screen-shot-2016-12-15-at-10-32-08-am screen-shot-2016-12-15-at-10-32-15-am screen-shot-2016-12-15-at-10-32-31-am screen-shot-2016-12-15-at-10-32-42-am screen-shot-2016-12-15-at-10-33-34-am