Mar 13, 2014

8 Tips for working effectively with Interface Builder

Introduction
While working at JoyTunes on the latest versions of our top-notch piano app, we've done a great deal of UI redesign and therefore had to spend long hours with the notorious Interface Builder, resizing images and views, which can be a lot of frustrating work.
During this work, we actually discovered a great deal of neat IB tricks, and I decided I must share them with the world.
So I conducted this little post of my 8 greatest tips for working effectively with IB.

A little disclaimer:
In JoyTunes, we work with .xib files (not storyboards), and without Auto Layout. This is mostly for historical reasons. As a result, some of the tips I'm mentioning might react a little differently for you if you're using storyboards or Auto Layout, but most should apply just the same.

1. Size to Fit Content
I'm so ashamed I only took the effort to look this up only recently. A HUGE time saver.
Select any view and then go to Editor->Size to Fit Content or simply press ⌘=
Will resize the selected view to fit its content in the following manner:

  • An ImageView/Button will be resized to the image's original size (most common usage):



  • A Label/Button will be resized to fit the text it's currently containing:


  • A parent container view to fit the frames of its subviews.


2. Holding option key to view distance from another view's edges
Holding option key after selecting a view, and then hovering over some other view, will show you cool distance indicators from that view's edges:







3. Editor -> Embed In View, Unembed:
Do you know that annoying feeling when you have some subviews all located and then you decide they need to have a different parent view, or even a different .xib, and then they are all automatically get located in the center of the new view?
Well - here's the solution:




4. Adding padding to freeform sized view without affecting subview's positions
When trying to add padding to a view, the x's and y's of the subview is retained, which isn't always what you want.
The best way I found to get past this, is to drag the edges while holding ⌘:




5. Move a view that isn't in the front:
One thing that bugs me when working with IB, is the inability to move views that aren't in front easily.
One way to do so will be to temporary bring it to front and then bring it back, but this is annoying.
Another way will be to use the size inspector on the right panel, which is fine but could take some guessing and adjustments until you get it right.

A way I found of moving a view with the arrow keys without bringing it to front is this:
1. Choose the view on the document outline.
2. Click on the frame of the root view in order to gain focus.
3. Move with arrow keys.
EDIT:
Some other (better) way of gaining focus, taken from the comments to this post:

  • If you double-click a view in the outline, it will switch focus to the layout pane with that view selected.
  • Shift+Right(Ctrl) Click over the view in IB and you'll see a menu of all the views that exist where you've clicked.

6. IBOutletCollection ordering
Often, the order of IBOutletColletions is important to us, and we want to iterate on them in code in that order.
One way of doing it is sorting them in code by their x/y/tag, and then iterate.
This is unnecessary. The order of connection is determined by the order in which we dragged the connection, and we can see the current order if by ⌃+Clicking the File's Owner:


7. Use custom properties 
I think a relatively underused feature of IB is the ability to set custom properties on views, using the "User Defined Runtime Attributes" of the Identity inspector:

As you can probably guess, we defined a JTLabel class that you can set stroke color and width to, and this is our way of immediately setting this without having to write any code.
Another common hack that can be applied this way is setting "layer.cornerRadius" of any view, to make it have rounded corners.

A relevant tool that uses this mechanism is Canvas, which will let you define animations for views without writing code.

Important warning regarding this that saved my life on one occasion:
In your implementation class you cannot use initWithCoder: otherwise your key-value path setting will not be picked up. You will have to do all your implementation within awakeFromNib.

8. MoarFonts - custom fonts WYSIWYG
Custom fonts have always been a big issue when working with Interface Builder.
There's no built-in support for those, and the best solutions I have seen were either using custom properties solutions like Canvas, or using font replacing techniques like IBCustomFonts. These are valid solutions, but they have a great downside - they don't give you a full WYSIWYG experience, which is exactly why you are using Interface Builder in the first place.
It can be very annoying to place a label with a placeholder font and then having to run the app in order to discover that the width you gave it doesn't fit well with your replacing custom font.

Lately I stumbled upon this solution called MoarFonts. It costs 10$, and there's no demo or trial - but trust me, it's totally worth it!
It's a pretty simple setup: you'll have to build your app with MoarFonts as a script build phase, restart Xcode, and voila! You can see custom fonts in InterfaceBuilder:



That's it!
I hope at least some of the tips were something you didn't know.
If you have any other tips you think I should add to the list, or if you have a better way to achieve some of the stuff I was trying to solve, please send me a tweet (@theyonibomber).


Also, you should listen to my podcast about mobile development & beer (in Hebrew).

20 comments:

  1. Very cool post, other than one tip, i don't know anything until now. Thank you very much!

    ReplyDelete
  2. Good tips. Another tip useful for #5: If you double-click a view in the outline, it will switch focus to the layout pane with that view selected.

    ReplyDelete
  3. Fantastic tips!
    There is a better way to achieve #5 though - Shift+Right(Ctrl) Click over the view in IB and you'll see a menu of all the views that exist where you've clicked. Select the one you want from the list, and you can then use the arrow keys to move it.

    ReplyDelete
    Replies
    1. Thanks! It does seem like a better way. Edited the tip.

      Delete
  4. Thank you! I don't know IBOutletColletions before reading this post.

    ReplyDelete
  5. Thank you for the great tips...!!!

    ReplyDelete
  6. Thank's - love #1 :-)

    ReplyDelete
  7. I wish I stumbled on to your #3 point "Embed in View > Unembed" a while back. It was a pain to get all those elements back in their position across 5 different views. Most of these are fantastic tips and shown with a nicer gif than a simple screenshot. Kudos!

    ReplyDelete
  8. Thank you for the great post, it's very useful!!

    ReplyDelete
  9. Have noticed an anoying thing. When draging out a new image from bottom right collection of assets, the size of the UIImageView gets doubled. I have to manually resize every image I drag in.

    ReplyDelete
  10. my mind is good now

    ReplyDelete
  11. Good tips. We need more posts like this to know about the "tricks" there is from Xcode IB.

    ReplyDelete
  12. VIRUS REMOVAL

    Is Your Computer Sluggish or Plagued With a Virus? – If So you Need Online Tech Repairs
    As a leader in online computer repair, Online Tech Repairs Inc has the experience to deliver professional system optimization and virus removal.Headquartered in Great Neck, New York our certified technicians have been providing online computer repair and virus removal for customers around the world since 2004.
    Our three step system is easy to use; and provides you a safe, unobtrusive, and cost effective alternative to your computer service needs. By using state-of-the-art technology our computer experts can diagnose, and repair your computer system through the internet, no matter where you are.
    Our technician will guide you through the installation of Online Tech Repair Inc secure software. This software allows your dedicated computer expert to see and operate your computer just as if he was in the room with you. That means you don't have to unplug everything and bring it to our shop, or have a stranger tramping through your home.
    From our remote location the Online Tech Repairs.com expert can handle any computer issue you want addressed, like:
    • - System Optimization
    • - How it works Software Installations or Upgrades
    • - How it works Virus Removal
    • - How it works Home Network Set-ups
    Just to name a few.
    If you are unsure of what the problem may be, that is okay. We can run a complete diagnostic on your system and fix the problems we encounter. When we are done our software is removed; leaving you with a safe, secure and properly functioning system. The whole process usually takes less than an hour. You probably couldn't even get your computer to your local repair shop that fast!
    Call us now for a FREE COMPUTER DIAGONISTIC using DISCOUNT CODE (otr214427@gmail.com) on +1-914-613-3786 or chat with us on www.onlinetechrepairs.com.

    ReplyDelete
  13. 1 Problem: HP Printer not connecting to my laptop.

    I had an issue while connecting my 2 year old HP printer to my brother's laptop that I had borrowed for starting my own business. I used a quick google search to fix the problem but that did not help me.
    I then decided to get professional help to solve my problem. After having received many quotations from various companies, i decided to go ahead with Online Tech Repair (www.onlinetechrepairs.com).
    Reasons I chose them over the others:
    1) They were extremely friendly and patient with me during my initial discussions and responded promptly to my request.
    2) Their prices were extremely reasonable.
    3) They were ready and willing to walk me through the entire process step by step and were on call with me till i got it fixed.
    How did they do it
    1) They first asked me to state my problem clearly and asked me a few questions. This was done to detect any physical connectivity issues with the printer.
    2) After having answered this, they confirmed that the printer and the laptop were functioning correctly.
    3) They then, asked me if they could access my laptop remotely to troubleshoot the problem and fix it. I agreed.
    4) One of the tech support executives accessed my laptop and started troubleshooting.
    5) I sat back and watched as the tech support executive was navigating my laptop to spot the issue. The issue was fixed.
    6) I was told that it was due to an older version of the driver that had been installed.

    My Experience
    I loved the entire friendly conversation that took place with them. They understood my needs clearly and acted upon the solution immediately. Being a technical noob, i sometimes find it difficult to communicate with tech support teams. It was a very different experience with the guys at Online Tech Repairs. You can check out their website www.onlinetechrepairs.com or call them on 1-914-613-3786.
    Would definitely recommend this service to anyone who needs help fixing their computers.
    Thanks a ton guys. Great Job....!!


    ReplyDelete
  14. These are some helpful home improvement & computer tips. Thanks for the share!

    ReplyDelete
  15. Laptop & Desktop repair services are now available @1-855-837-9965. No-Fix No-Fee, Cost effective Repairs and upgrades on all brands of PC's and Laptops.

    ReplyDelete