Moving and Resizing Objects An object, or a group of selected objects, can be repositioned in a view window simply by dragging it to another location, as shown in Figure 13 - 17.. This
Trang 1250 ❘CHAPTER 13 INTERFACE BUILDER
CONFIGURING OBJECTS
Objects in Interface Builder wouldn ’ t be much use if you couldn ’ t bend and shape them to your
needs Most of your time in Interface Builder will be spent editing objects, and you have many
different ways to do that The overt aspects (visible text, placement, and size) of view objects can
be manipulated directly: drag an object around to reposition it; double - click the text of an object
to change it
Less obvious attributes, such as formatting options and bindings, are manipulated in the
inspector palette A few specialized commands also exist for aligning objects and grouping
objects in containers
Moving and Resizing Objects
An object, or a group of selected objects, can be
repositioned in a view window simply by dragging
it to another location, as shown in Figure 13 - 17
Depending on the layout, some objects may not be
repositioned For instance, an object in one half of a
split view always occupies that entire space It cannot
be repositioned, because its location and size are
determined by the split view Altering the position of
the split view or its divider is the only way to change
that object ’ s position in the window
Interface Builder displays guidelines as an object is
dragged When the object is released, it “ snaps ” to
nearest guideline See the “ Guides ” section to fi nd out how to control these automatic guidelines or
create your own
The arrow keys nudge the selected objects one pixel in any direction Hold down the Shift key to
nudge them 10 pixels at a time
Dragging the handles on the edge of an object resizes it Some objects cannot be resized, or
can only be resized in certain directions For example, the height of a button is fi xed in Cocoa
You can only change its width Using the resize handles, you can only resize one object at a time
TIP TO REMEMBER
Holding down the Command and Options keys while resizing a container view, such as a window or box view, resizes its subviews too The subviews are resized according to their resize behavior This is the same effect that you get when resizing
a container view using the Size inspector Both the Size inspector and resize behavior are described later in the “Size” section
FIGURE 13-17
Trang 2Sizing Objects to Fit
Choose Layout ➪ Size to Fit (Command+=) to shrink (or expand) objects to their minimum/optimal size The Size to Fit command determines the minimum dimensions required to display the object ’ s content — typically its title A button or text fi eld shrinks down so that the object is exactly the size needed to display the title or text A box shrinks so that it is just larger than all of the objects it contains Some objects don ’ t respond to the Size to Fit request
Clipped objects are objects that are too small to display their content, and appear with a grey + symbol, indicating that there ’ s more to the view than will be visible, as shown in Figure 13 - 18
The usual culprits are buttons and pop - up menu objects that are too narrow to display their title
or selection
The two commands Tools ➪ Select Next Object With Clipped Content (Command+K) and Tools ➪ Select Previous Object With Clipped Content (Shift+Command+K) will help you fi nd clipped objects These two commands fi nd, and select, an object that is sized too small to display its content A quick Command+K, Command+=
will remedy that
Making Objects the Same Size
Use the Layout ➪ Same Size command to set multiple objects to the same size Start by selecting the object that is already the desired size Shift+click to select the additional objects to be resized Choose the Same Size command All of the additional objects are set to the size of the
fi rst object selected
Aligning Objects
In addition to the automatic guides that appear when you drag or resize an object, the alignment commands provide a number of methods for aligning objects in a view All of the alignment commands are found in the Layout ➪ Alignment submenu:
Layout ➪ Alignment ➪ Align Left Edges Layout ➪ Alignment ➪ Align Right Edges Layout ➪ Alignment ➪ Align Top Edges Layout ➪ Alignment ➪ Align Bottom Edges Layout ➪ Alignment ➪ Align Vertical Centers Layout ➪ Alignment ➪ Align Horizontal Centers Layout ➪ Alignment ➪ Align Baselines
Layout ➪ Alignment ➪ Align Vertical Centers in Container Layout ➪ Alignment ➪ Align Horizontal Centers in Container
➤
➤
➤
➤
➤
➤
➤
➤
➤
FIGURE 13-18
Trang 3252 ❘ CHAPTER 13 INTERFACE BUILDER
The fi rst seven commands all reposition two or more selected objects so that the desired edge or
center of every object is at the same coordinate
The last two commands can be applied to a single object or a group of objects contained within
another view These commands position the object, or objects, so that it is centered in its superview
When used with a group of objects, the group is treated as a whole; the relative position of the
objects in the group remains the same and all objects are moved equally so the group is centered in
the superview
View Bounds Indicators
The two aids for visualizing the actual location of view objects in an interface are as follows:
Layout ➪ Show Bounds Rectangles Layout ➪ Show Layout Rectangles (Command+L) These two commands draw a thin blue (bounds) or red
(layout) line to indicate the exact coordinates occupied
by the objects in a view, as shown in Figure 13 - 19
The layout rectangle will also include a line showing
where the text baseline of the object lies, for those
objects that display text
The distinction between the layout and bounds
rectangles is primarily of interest to Cocoa developers
The bounds of a Cocoa Touch view is invariably the
same as its layout rectangle, so turning on the layout
rectangle indicator is suffi cient
Relative Position Indicators
Holding down the Option key while one or
more objects are selected reveals the spatial
relationship between objects With the Option
key held down, let the mouse pointer hover
over some other object, the unoccupied area
in a container, or the window itself Interface
Builder illustrates the relationship between
the two In Figure 13 - 20, the check box
button is selected and the cursor is hovering
over the push button while the Option key is
held down
Subviews
A number of view objects types are containers for other view objects The container is the superview
and the view objects it contains are its subviews Every view has its own size and position within its
superview and can itself contain any number of subviews This nesting of objects is refl ected in both
the nib document window and in how the objects are displayed at run time
➤
➤
FIGURE 13-20
FIGURE 13-19
Trang 4You have two ways of moving an object into, or out of, a container view:
In the nib document window, drag the object out of one container into another
Use one of the Embed commands
The embed commands are found in the Layout ➪ Embed Objects In submenu These commands are:
Layout ➪ Embed Objects In ➪ Box Layout ➪ Embed Objects In ➪ Custom View Layout ➪ Embed Objects In ➪ Scroll View Layout ➪ Embed Objects In ➪ Split View Layout ➪ Embed Objects In ➪ Tab View Layout ➪ Embed Objects In ➪ Matrix Layout ➪ Embed Objects In ➪ Submenu Each command creates a new container view object in the same superview as the selected objects, and then moves those objects from their current container into the newly created subview
Figure 13 - 21 shows the effect of selecting four radio buttons and using the Layout ➪ Embed Objects In ➪ Box to wrap them up in a new NSBox object
➤
➤
➤
➤
➤
➤
➤
➤
➤
FIGURE 13-21
All of these commands are essentially a shortcut for these steps:
1. Use the library palette to create a new container view
2. Select the sibling views you want the new view to contain
3. Drag the sibling views into the container view (Edit ➪ Cut, Edit ➪ Paste would also work)
The inverse of all of these commands is the single Layout ➪ Unembed Objects command This command deletes a container view and replaces it with the subviews it formally contained
Guides
Laying out a window or dialog box so that it is functional and aesthetically pleasing is no small feat To help you space and align items in your layout, Interface Builder provides two kinds of guides A guide is a vertical or horizontal line at some coordinate that aids you in aligning objects
Trang 5254 ❘CHAPTER 13 INTERFACE BUILDER
Whenever you position an object by dragging, the boundary of the object “ snaps ” to that coordinate
whenever it is near a guide
Aqua guides are relative to the edges of other objects, which include containers, in the layout
These distances are based on the Aqua interface design
standard For example, the suggested distance between a
button and the edge of a window is 20 pixels Dragging
the button, or resizing the window as shown in Figure
13 - 22, automatically places Aqua guides 20 pixels from
the edges of the window and nearby objects
Aqua guides are very intelligent, but they don ’ t know
everything You should still refer to the Human Interface
Guidelines in making layout decisions For example, the
Human Interface Guidelines suggest that buttons that
destroy data should be farther away from buttons that
save data or cancel an operation Interface Builder has no
way of knowing what the buttons in your layout do, and are therefore limited in what suggestions
they can offer
Apple’s Human Interface Guidelines are so important that Interface Builder has
a built-in shortcut to them Choosing the Help ➪ Human Interface Guidelines command opens the Apple Human Interface Guidelines document in Xcode You can also fi nd this document in Apple’s Reference Library or view it online at
http://developer.apple.com/documentation/UserExperience/
Conceptual/OSXHIGuidelines/.
User guides are the other kind of guides User guides are
fi xed guides that you can position anywhere in a layout
Objects dragged near a user guide snap to it just as they
would snap to an Aqua guide The Layout ➪ Add Horizontal
Guide (Command+_) and Layout ➪ Add Vertical Guide
(Command+|) commands create a new vertical or horizontal
guide in the current window Position the cursor over the
guide and drag it to the desired location, as shown in Figure
13 - 23 While you drag the guide, the distances to the opposite
edges of the window are displayed on the guide
You can disable guide snapping temporarily or permanently:
Hold down the Command key while dragging an object to temporarily disable guide snapping
Choose Layout ➪ Snap to Guides to turn all guide snapping off Select the command again to turn it back on
To delete a user guide, drag it outside the window bounds
➤
➤
FIGURE 13-22
FIGURE 13-23
Trang 6Which inspectors appear depends on the type of nib document you are editing A Cocoa document presents all of these inspectors, whereas a Cocoa Touch document shows only the Attributes, Size, Connections, and Identity panels
In the case of the bindings panel, the difference is signifi cant Cocoa Touch does not support bindings, so there ’ s no binding panel at all On the other hand, the effects panel is also missing; but that ’ s because in the Cocoa framework Core Animation layers are an optional element of NSView objects In Cocoa Touch, all view objects are animation layers, so many of the attributes you ’ d set in the effects inspector in Cocoa are set in the Attributes inspector in Cocoa Touch
You ’ ll fi nd yourself switching between the various inspector panels often I suggest learning to use the keyboard shortcuts Command+1 through Command+6 The numbers correspond to the tab positions at the top of the inspector palette window, so in Cocoa the connections inspector is Command+5, whereas in Cocoa Touch the same inspector is Command+3
The following sections briefl y describe the various inspector panels, however a complete description requires an understanding of the framework classes and their behaviors, which is far beyond the scope of this book
Attributes
This panel is common to all nib document types and edits the class - specifi c attributes of an object
The attributes that are available, and what those attributes mean, vary wildly from one object to another Figured 10 - 24 shows the attributes panel for three different objects
Attributes Edits the class-specifi c properties
Eff ects Sets Core Animation eff ects for a Cocoa object
Size Establishes the size, position, orientation, resizing behavior, minimum/
maximum size, and other visual layout attributes
Bindings Binds selected properties of a view object to properties of other objects
Connections Creates and inspects the connections between the object and
other objects
Identity Defi nes the class, name, and identity of the object
Inspector Palette
The inspector palette is where the nitty - gritty details of your objects are manipulated The inspector palette (see Figure 13 - 1) is a fl oating window that constantly shows the attributes for the currently selected object or objects The palette is organized into different panels, selectable using the tabs
at the top of the palette or any of the “ Inspector ” commands in the Tools menu Each inspector confi gures some aspect of the object The possible inspector panels are:
Trang 7256 ❘CHAPTER 13 INTERFACE BUILDER
The best place to look for descriptions of object attributes is in the API documentation for that class
or structure The title bar of the inspector changes to indicate the kind of object being inspected
In the left two inspectors in Figure 13 - 24, the documentation for the image view (UIImage) and
menu item (NSMenuItem) classes explain every detail of the attributes for those objects If you ’ re
unsure about the specifi c class of an object, see the “ Identity ” inspector section
The attributes in the inspector panel are organized into groups based on the object ’ s class
inheritance For example, a UIButton object inherits from UIControl, which inherits from UIView,
UIResponder, and NSObject When editing a UIButton, the inspector shows three groups of
attributes: Button, Control, and View Each group contains the attributes defi ned by the respective
class (UIButton, UIControl, UIView) The UIResponder and NSObjects don ’ t defi ne any Interface
Builder editable properties, so there is no group for those classes
The organization of groups makes it clear to which domain each attribute belongs You can
collapse one or more groups of attributes to save screen real estate, or if perhaps you ’ re just not
interested in them
A few non-object attributes have begun to sneak into Interface Builder’s inspector panel of late Specifi cally, the attributes for Cocoa Touch (iPhone) views include a new “Simulated User Interface Elements” group These are not attributes of a UIView object; they are used solely to present the view
in a simulation of its superview environment at run time Interface Builder remembers these attributes, but they aren’t properties of any object at run time.
The pane on the right in Figure 13 - 24 is for a Carbon Button object Carbon objects are
more obtuse because the Carbon interface is C, not Objective - C, so each object type doesn ’ t
have a simple one - to - one relationship with a class The best place to start is the User Experience
FIGURE 13-24
Trang 8documentation collection in the Carbon group of the Reference Library The HIView Programming Guide should give you an overview of the Carbon view model The “ Handling Carbon Windows
and Controls ” document explains how control events are handled in Carbon applications In brief, the C interface that lets you control something about a window structure (like passing the
kWindowIgnoreClicksAttribute constant to CreateNewWindow ) corresponds to an attribute in the panel (the Ignore Clicks option)
Connections
The connections inspectors let you review, establish, and destroy connections between objects, as shown in Figure 13 - 25
Connections are the third “ C ” of Interface Builder, and are described in detail in the “ Connecting Objects ” section, a little later in this chapter
Briefl y, the connections inspector shows the connection outlets defi ned for the object, and to what each of those is connected (if anything) If you click a connected connection, Interface Builder highlights the object to which it ’ s connected
Size
The size inspector lets you set the position, size, and related attributes for most view objects All view objects have a rectangular region defi ned by its location in its superview and its size The controls in the size inspector, as shown in Figure 13 - 26, allow you edit any of those values numerically Setting an object ’ s position numerically is sometimes easier that attempting to position or resize the object using the mouse, but has the same effect The dimensions of some view objects are fi xed, in which case those values will not be editable
FIGURE 13-25
FIGURE 13-26
Trang 9258 ❘CHAPTER 13 INTERFACE BUILDER
Two common controls let you defi ne the position and size of the object in various ways The little
square graph to the left of the size and position fi elds lets you choose the origin to use, and the
pop - up menu above lets you specify either the layout bounds or the frame bounds of the object
These alternative coordinate schemes are just conveniences provided by Interface Builder; however
you enter the coordinates, they will be translated into frame bounds in the superview ’ s coordinate
system That ’ s what gets used to initialize the object at run time
Some objects, such as labels, have a size attribute that determines the size of its text, whereas other objects set their text size in the attributes inspector If you can’t fi nd a size-related property in the attributes inspector, check the size inspector, and vice versa.
Resizing a container view — any view that contains other view objects — using the Size inspector
also resizes its subviews according to their resize behavior, which is explained next To resize a
container view without resizing its subviews, resize the view using your mouse as described in the
“ Moving and Resizing Objects ” section
Many view objects have a resize behavior You ’ ll need to consult the documentation for the class
of objects you ’ re editing, but in general the edges of an object can be optionally fi xed ( “ anchored ” )
relative to the corresponding edge of its superview, and its vertical and horizontal dimension can be
either fi xed or variable ( “ springy ” )
Interface Builder thoughtfully provides a resize preview animation The animation is active
whenever your cursor is over the inspector palette window It shows a simulation of the effects of
resizing the object ’ s superview This lets you quickly visualize how your settings will affect how
your object is resized Note that this is only accurate when using Cocoa or Carbon ’ s built - in resizing
behavior, which could be overridden in your code
The remaining attributes (window type, initial position,
background color, minimum/maximum size, and so on) will be
specifi c to the type of object you ’ re editing
Eff ects
The effects inspector lets you assign predefi ned fi lters and
animation effects to Cocoa view objects Many of these same
effects (like transparency) are available for Cocoa Touch objects
too; but in Cocoa Touch, all view objects are inherently drawn
using Core Animation layers, so many of these capabilities are
permanent features of the Cocoa Touch view object and can be
found in the attributes inspector
In Cocoa, using a Core Animation layer to render a view object is
optional and must be enabled separately You do that in the effects
inspector, as shown in Figure 13 - 27 FIGURE 13-27
Trang 10Enabling Core Animation effects is simple:
1. Select the view, or views, that should use a CALayer to perform rendering Checking the box next to an object sends it a - setWantsLayer:YES message when the object is created
This creates a CALayer object and attaches it to the NSView object
2. The remainder of the inspector allows you to set common properties of the CALayer (transparency, drop shadow), attach system - supplied image fi lters (sharpen, blur, color adjustment), and assign default transitions for its subviews (page curl, ripple, swipe)
Bindings
Bindings are actually a third kind of connection (see the “ Connecting Objects ” section later in this chapter) Unlike traditional connections, bindings are set symbolically This is for practical reasons;
bindings can be very complex and don ’ t lend themselves to the point - to - point specifi city of regular Interface Builder connections
A lot of programming in the Model - View - Controller paradigm is rote: create a property, write a getter method, write a setter method, have the setter method notify its view object when it changes, write
an action method to let the view object change the property, wash, rinse, repeat Bindings attempt to alleviate much of that tedium (and bugs) by providing standard tools to connect model objects with their visual representations These concepts are described in the documentation for Cocoa Bindings at
http://developer.apple.com/mac/library/documentation/Cocoa/Conceptual/CocoaBindings/
As of this writing, the Cocoa Touch (iPhone) framework does not support bindings — sadly There will be no bindings panel when editing a Cocoa Touch
or Carbon nib document.
The Bindings panel, shown in Figure 13 - 28, contains the properties
of an object that can be bound to a controller, data model, or any object with an observable property (technically, the property must be Key Value Observing – compliant) You bind properties
of view objects to properties of other controller objects in the nib document See the sections “ Custom Classes ” and “ Placeholder Objects ” about connecting nib document objects to your custom controller classes
What makes bindings so brilliant is that creating the binding is often all you have to do If your object ’ s property is KVO - compliant (and most should be), you simply create a binding and you ’ re fi nished The binding framework takes care of all of the necessary Model View -Controller communications needed to update your property whenever the view is changed, and automatically update the view whenever the property is changed (programmatically or otherwise) If you do have to write supporting code, it ’ s usually just to make your property KVO - compliant
FIGURE 13-28