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


##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

OR

OR