TweetFollow Us on Twitter

Interface Builder Tips and Tricks

Volume Number: 19 (2003)
Issue Number: 10
Column Tag: Programming

Mac OS X Programming Secrets

Interface Builder Tips and Tricks

by Scott Knaster

When you're programming with Cocoa, you spend plenty of time in Interface Builder, instantiating objects, positioning things just right in windows, and making connections. In this month's column, we're going to shine the light of day on a few valuable tips and shortcuts for making yourself more productive when using Interface Builder.

Designing for Success

Most of the intricate work in Interface Builder is in the design window, which is where you add objects from palettes, lay them out, resize them, and so on. In this section, we'll discuss some tips for use in design windows.

The first trick is useful for figuring out precise distances between objects while looking at them in the design window. If you select an object, then hold down the Option key, you'll see the exact distances from the borders of the object to the edges of the window (see Figure 1).

Figure 1. Hold down Option to see distances.

But wait, that's not all. By moving the mouse pointer while holding down Option, you can have Interface Builder show you the distance between objects, rather than just the distance to the window edges. In Figure 2, the pointer is on the static text object, and the window shows the distances from the selection to each edge of that object.

Figure 2. Hold down Option to see distances.

You can use another Interface Builder feature to make objects automatically resize or reposition themselves when you change the size of their enclosing window. For example, let's say you want to preserve the proportional distance between the three buttons in the window above: if you widen the window, you want the distance between the buttons to increase. To make this happen, you can create springs between the objects. To do this, select each object in turn, open the size inspector, and click that line that you want to become a spring (a proportional relationship that changes automatically when you resize the window). Figure 3 shows what this looks like for the "Stop" button in the window above: we've clicked on its connection lines to make them into springs. We'll do the same for all 3 buttons.

Now, when we resize the window, if we hold down the Control key, the springs will cause the distances between objects to change proportionally. If we want the springs to be ignored, we can just resize without holding down Control.

Figure 3. Stop button has springs on its left and right.

Speaking of the size inspector, it's even smarter than you might have realized. You can type math expressions into the coordinate fields and let Interface Builder evaluate them for you. For example, if you want to add 32 pixels to an object's width, you can just click in the w field, select after the current value, then type "+32" and press return. Neato! Apple even provides code to help you implement this trick in your own fields. Take a look at /Developer/Examples/InterfaceBuilder/BusyPalette for details.

Another fun trick you can use with design windows is to see all the rectangles that Interface Builder uses to determine distances between objects. By using the Layout --> Show Layout Rectangles menu item, or just pressing command-L, you can see all the layout rectangles at once, as shown in Figure 4.

Figure 4. Design window with all layout rectangles shown.

Interface Builder tips aren't all about layout. For example, there's a quick way to set the tab order for objects in the window. You'll want to do this to allow users to tab from one text field to the next. The tab order starts with the initial first responder, and continues from there by following each object's nextKeyView field.

To start setting the order, select the object you want to be the initial first responder and choose Layout --> Keyboard Navigation --> Make Initial First Responder. Then, to set the tab order, choose Layout --> Keyboard Navigation --> Show Keyboard Check, Control-drag from one object to the next, then click Connect in the connection inspector. That will set the tab connection between the objects. Note that when you have keyboard check turned on, the word tab appears at the bottom left of the window. That reminds you that you can press tab to test the tab order.

Cool Stuff in Other Windows, Too

Not all the neat tricks are in the design window - here are a couple you can use in the document window. If you click the tiny control on the right side of the window, the object instances are displayed in an outline view, with the number of connections, both into and out of the object. If you click on one of these numbers, the connections appear in the window, as you can see in Figure 5.

Figure 5. Outline view shows connections to an object.

You can use this view to delete connections between objects. If you hold down Control and point at a line that connects two objects, the pointer changes to a tiny pair of scissors, and clicking (you guessed it) cuts the connection.

If you just want to learn more about the connected objects, click on the name of the connected field, such as menu or _panel in Figure 5. The connected objects will appear on the screen with a line between them.

There's More (Always)

You can find more fun and timesaving tips like these by reading the informative FAQ that comes with Interface Builder. Get to the FAQ by choosing FAQ in Interface Builder's Help menu. There's even a sense of humor in the FAQ: in the section on modifier keys, right after the descriptions of what happens if you press Command, Option, and Control, the FAQ tells you that you can use the Left Pedal to disengage the clutch. Cool.

Scott Knaster has been writing about Macs for as long as there have been Macs. Scott's books How To Write Macintosh Software and Macintosh Programming Secrets were required reading for Mac programmers for more than a decade. Scott wrote developer books for General Magic and worked on Mac software for Microsoft. Scott's books have been translated into Japanese and Pascal. Scott has every issue of Mad magazine, which explains a lot.


Community Search:
MacTech Search:

Software Updates via MacUpdate

Tweetbot 2.1 - Popular Twitter client. (...
Tweetbot is a full-featured OS X Twitter client with a lot of personality. Whether it's the meticulously-crafted interface, sounds and animation, or features like multiple timelines and column views... Read more
MacPilot 8.0 - Enable over 1,200 hidden...
MacPilot gives you the power of UNIX and the simplicity of Macintosh, which means a phenomenal amount of untapped power in your hands! Use MacPilot to unlock over 1,200 features, and access them all... Read more
Typinator 6.7 - Speedy and reliable text...
Typinator turbo-charges your typing productivity. Type a little. Typinator does the rest. We've all faced projects that require repetitive typing tasks. With Typinator, you can store commonly used... Read more
Adobe Lightroom 6.2 - Import, develop, a...
Adobe Lightroom is available as part of Adobe Creative Cloud for as little as $9.99/month bundled with Photoshop CC as part of the photography package. Lightroom 6 is also available for purchase as a... Read more
ForeverSave 2.1.4 - Universal auto-save...
ForeverSave auto-saves all documents you're working on while simultaneously doing backup versioning in the background. Lost data can be quickly restored at any time. Losing data, caused by... Read more
VueScan 9.5.27 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
AirPort Utility 6.3.6 - Set up and manag...
Note: Most recent release available only within OS X 10.11 El Capitan update. Use AirPort Utility to set up and manage your Wi-Fi network and AirPort base stations, including AirPort Express, AirPort... Read more
Quicksilver 1.3.1 - Application launcher...
Quicksilver is a light, fast and free Mac application that gives you the power to control your Mac with keystrokes alone. Quicksilver allows you to find what you need quickly and easily, then act... Read more
Tidy Up (Five Users) 4.1.5 - Find duplic...
Tidy Up is a complete duplicate finder and disk-tidiness utility. With Tidy Up you can search for duplicate files and packages by the owner application, content, type, creator, extension, time... Read more
Mellel 3.4.3 - The word processor of cho...
Mellel is the leading word processor for OS X and has been widely considered the industry standard since its inception. Mellel focuses on writers and scholars for technical writing and multilingual... Read more

Swords & Crossbones: An Epic Pirate...
Swords & Crossbones: An Epic Pirate Story 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: | Read more »
Camel Up (Games)
Camel Up 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: | Read more »
The Martian: Bring Him Home (Games)
The Martian: Bring Him Home 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: Based on the best selling novel and critically acclaimed film, THE MARTIAN tells the story of Astronaut Mark... | Read more »
This Week at 148Apps: September 21-30, 2...
Leap Into Fall With 148Apps How do you know what apps are worth your time and money? Just look to the review team at 148Apps. We sort through the chaos and find the apps you're looking for. The ones we love become Editor’s Choice, standing out above... | Read more »
Tweetbot 4 for Twitter (Social Networki...
Tweetbot 4 for Twitter 4.0 Device: iOS Universal Category: Social Networking Price: $4.99, Version: 4.0 (iTunes) Description: *** 50% off for a limited time. *** | Read more »
Mori (Games)
Mori 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: Stop, rewind and unwind with Mori. Time is always running, take a moment to take control. Mori is an action puzzle game about infinitely... | Read more »
100 Years' War (Games)
100 Years' War 1.0 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0 (iTunes) Description: | Read more »
Tower in the Sky (Games)
Tower in the Sky 0.0.60 Device: iOS Universal Category: Games Price: $1.99, Version: 0.0.60 (iTunes) Description: | Read more »
hocus. (Games)
hocus. 1.0.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0.0 (iTunes) Description: New, polished, mind-bending, minimal puzzle game with dozens of levels and extra-ordinary design Features:- Beautifully crafted... | Read more »
Mos Speedrun 2 (Games)
Mos Speedrun 2 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Mos is back, in her biggest and most exciting adventure ever! Wall-jump to victory through 30 mysterious, action packed levels... | Read more »

Price Scanner via

13-inch 2.5GHz MacBook Pro (refurbished) avai...
Apple has Certified Refurbished 13″ 2.5GHz MacBook Pros available for $829, or $270 off the cost of new models. Apple’s one-year warranty is standard, and shipping is free: - 13″ 2.5GHz MacBook Pros... Read more
27-inch 3.2GHz iMac on sale for $1689, save $...
Adorama has the 27″ 3.2GHz iMac on sale for $1689 including free shipping plus NY & NJ sales tax only. Their price is $110 off MSRP. Read more
12-inch Retina MacBooks on sale for up to $12...
B&H Photo has 12″ Retina MacBooks in stock today and on sale for up to $120 off MSRP. B&H will include free shipping, and there is NY sales tax only: - 12″ 1.1GHz Gray Retina MacBook: $1224 $... Read more
Tablets Shaping Up for Growth in 2016 – Strat...
Observing that Apple, Samsung, and Microsoft have refocused what tablet computers can do, market analysis firm Strategy Analytics believes there is immense opportunity for new and replacement sales... Read more
Apple Interbrand’s Number One Most Valuable G...
Apple and Google hold aced #1 and #2 spots respectively in Interbrand’s 2015 Best Global Brands Report, leading all tech brands that now comprise more than a third of the entire rankings value.... Read more
Apple offering refurbished 2015 13-inch Retin...
Apple is offering Certified Refurbished 2015 13″ Retina MacBook Pros for up to $270 (15%) off the cost of new models. An Apple one-year warranty is included with each model, and shipping is free: -... Read more
Apple refurbished 2015 MacBook Airs available...
Apple has Certified Refurbished 2015 11″ and 13″ MacBook Airs (the latest models), available for up to $180 off the cost of new models. An Apple one-year warranty is included with each MacBook, and... Read more
Adobe Photoshop Elements 14 Gets Haze Removal...
The latest iteration of Adobe’s powerful consumer image editing appliction Photoshop Elements 14 analyzes your photo and removes background haze, so your shot looks sharp all the way to the horizon... Read more
Apple refurbished 15-inch Retina MacBook Pros...
Apple has Certified Refurbished 2015 15″ Retina MacBook Pros available for up to $380 off the cost of new models. An Apple one-year warranty is included with each model, and shipping is free: - 15″ 2... Read more
21-inch iMacs on sale for up to $120 off MSRP
B&H Photo has 21″ iMacs on sale for up to $100 off MSRP including free shipping plus NY sales tax only: - 21″ 1.4GHz iMac: $1029.99 $70 off - 21″ 2.7GHz iMac: $1229 $70 off - 21″ 2.9GHz iMac: $... Read more

Jobs Board

Touch Validation Design (EE) - *Apple* Watc...
**Job Summary** Help launch next-generation Touch Technologies in Apple products. The Touch Technology team develops cutting-edge Touch solutions and technologies that Read more
WW Sales Strategy & Program Manager, *Ap...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
*Apple* TV Product Design Internship (Spring...
…the mechanical design effort associated with creating world-class products with the Apple TV PD Group. Responsibilities will include working closely with manufacturing, Read more
Product Design Engineer - *Apple* Watch - A...
**Job Summary** Product Design Engineer - WATCH ( Apple Watch) Be an integral part of a small and visible team of world-class Mechanical Engineers making Apple 's Read more
Senior Software System App Engineer, *Apple*...
**Job Summary** The Apple Watch system application team is looking for great software engineers who are comfortable working across all levels of the software stack. From Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.