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).

39 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's - love #1 :-)

    ReplyDelete
  6. 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
  7. Thank you for the great post, it's very useful!!

    ReplyDelete
  8. 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
  9. my mind is good now

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

    ReplyDelete
  11. 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
  12. These are some helpful home improvement & computer tips. Thanks for the share!

    ReplyDelete
  13. 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
  14. This post is very informative for everybody. I would like to appreciate your work for good accuracy and got informative knowledge from here. Nice effort, very informative, this will help me to complete my task. Thanks for sharing
    Oracle Fusion HCM Technical Training

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. This blog explains the details of most popular technological details. This helps to learn about what are all the different method is there. And the working methods all of that are explained here. Informative blog.For more info visit our website.
    Fusion Cloud SCM Course Structure

    ReplyDelete
  20. Thank you for providing useful information and this is the best article blog for the students.learn Oracle Fusion Technical Online Training.

    Oracle Fusion Technical Online Training

    ReplyDelete
  21. Thank you for sharing such a valuable article with good information containing in this blog.learn Oracle Fusion SCM Online Training.

    Oracle Fusion SCM Online Training

    ReplyDelete
  22. Such a nice blog, I really like what you write in this blog, I also have some relevant Information about if you want more information.
    Oracle Fusion HCM Online Training

    ReplyDelete
  23. Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information.

    Digital Marketing Training In Hyderabad
    sem training in hyderabad
    seo training in hyderabad
    SMM Training In Hyderabad

    ReplyDelete
  24. Nice Blog with Good Information
    Soft Online gives best training for Oracle Fusion and EBS Courses
    Oracle Fusion SCM Training
    Oracle Fusion HCM Training
    Oracle Fusion Financials Training
    For more info Visit us: www.softonlinetraining.com

    ReplyDelete
  25. Really thanks for sharing this useful blog !! This post is very informative about tips for working with interface builders . keep sharing !!

    ReplyDelete
  26. Living in the tech era, every computer repair business needs to systemize its business operations to provide a better solution to the clients by using Computer Repair Shop Software , It enables management to deal with routine business operations swiftly and keep working on increasing business productivity.

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. wordpress design agency in united states Need professional WordPress Web Design Services? We're experts in developing attractive mobile-friendly WordPress websites for businesses. Contact us today!

    ReplyDelete