ximber

I've created a simple tool called ximber that hopefully helps with making xibs just a little bit nicer to work with.


The why

A painful problem when working with layout constraints in xibs and storyboards is that they are almost impossible to revisit at a later date and make quick changes on. The problem stems from the fact that the constraints you make have terrible names and there can be a large amount of them even for relatively simple interfaces. It is often easier to remove all constraints and start again if it's been a long time since you set an interface up. This is because clicking between the constraints and then building up a mental stack of what each does is just plain exhausting.


The first step (manual)

Some people know that you can help yourself out by adding labels* to each constraint to give yourself a prompt about what the constraint does. This could be as simple as using VFL to state that a constraint is for setting a view called myView's height to 100 (V:[myView(==100)]). This is exactly what I started doing and I found that it was a great help, constraints were much easier to find and work with in interface builder, especially in a team environment where you may not have set the constraint up. A pretty major flaw in this approach is that you are essentially adding a comment to the xib and as we all know comments will try their hardest to stay out of sync with actual code.


The next step (automate)

The aim of ximber is to automate this process. The idea is simple

  • Parse the xib's XML
  • Grab any constraints
  • Try to generate a meaningful label for each constraint (this is slightly awkward)
  • Write the xib back out

More problems

Believe it or not generating a label like this: H:[view]-[view][view]-[view] is not very useful. This will happen if you have poorly named views:

poor naming

What would be really good is if each view had a decent name as well. A simple idea would be to just manually add a label to each view, which you could argue is just good house keeping. ximber aims to help with some of the leg work by giving views in your xibs a reasonable name. Obviously it's not just going to guess what to call things - so what it does is examine the IBOutlet connections that are connected to your outlets. If a view is connected up then it will add a user label with the name of the property. ximber will only add a user label if there isn't one already so it won't clobber any manually added labels.

With nicely named view outlets and constraints you end up with the following:

Before

Image Alt

After

Image Alt


Before

Image Alt

After

Image Alt


This is a personal tool and as such I've not considered any decent way of making it easy to install :/ If you grab the project from the repo you can build and put the product somewhere in your path.

This was a weekend project and as such may not be the fully finished article - any feedback, pull requests or bugs would be greatly appreciated.


* Adding labels is as simple as

  • Select an outlet
  • Hit return

OR

  • Select an outlet
  • Wait a short delay
  • Select the outlet again

OR

  • Select an outlet
  • Go to the identify inspector
  • Edit the label in the Document section