ximber
23 Nov 2014I’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:
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
##After
##Before
##After
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