Lập trình Wrox Professional Xcode 3 cho Mac OS part 33 doc

250 ❘ 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 c13.indd 250c13.indd 250 1/21/10 3:36:58 PM1/21/10 3:36:58 PM Download at getcoolebook.com Sizing 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 ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ Confi guring Objects ❘ 251 FIGURE 13-18 c13.indd 251c13.indd 251 1/21/10 3:36:59 PM1/21/10 3:36:59 PM Download at getcoolebook.com 252 ❘ 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 c13.indd 252c13.indd 252 1/21/10 3:37:00 PM1/21/10 3:37:00 PM Download at getcoolebook.com You 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 Confi guring Objects ❘ 253 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. c13.indd 253c13.indd 253 1/21/10 3:37:01 PM1/21/10 3:37:01 PM Download at getcoolebook.com 254 ❘ 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 c13.indd 254c13.indd 254 1/21/10 3:37:02 PM1/21/10 3:37:02 PM Download at getcoolebook.com Which 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. Confi guring Objects ❘ 255 INSPECTOR USE Attributes Edits the class-specifi c properties. E ects Sets Core Animation e 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: c13.indd 255c13.indd 255 1/21/10 3:37:08 PM1/21/10 3:37:08 PM Download at getcoolebook.com 256 ❘ 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 c13.indd 256c13.indd 256 1/21/10 3:37:08 PM1/21/10 3:37:08 PM Download at getcoolebook.com documentation 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 Confi guring Objects ❘ 257 c13.indd 257c13.indd 257 1/21/10 3:37:15 PM1/21/10 3:37:15 PM Download at getcoolebook.com 258 ❘ 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. E 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 c13.indd 258c13.indd 258 1/21/10 3:37:16 PM1/21/10 3:37:16 PM Download at getcoolebook.com Enabling 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 Confi guring Objects ❘ 259 c13.indd 259c13.indd 259 1/21/10 3:37:21 PM1/21/10 3:37:21 PM Download at getcoolebook.com [...]... locked some aspect of your object that is preventing that action Download at getcoolebook.com c 13. indd 261 1/21/10 3: 37 :33 PM 262 ❘ CHAPTER 13 INTERFACE BUILDER The identity inspector has also become a dumping ground for obscure attributes that don’t fit neatly into any of the other inspectors Depending on the nib document architecture and object type, you might fi nd an accessibility attributes group, a... miscellaneous properties that, in earlier versions of Interface Builder, were in separate inspector panels The two most important things you can change in the identity inspector are the class of the object and how it identifies itself in Interface Builder Download at getcoolebook.com c 13. indd 260 1/21/10 3: 37:27 PM Configuring Objects ❘ 261 Changing the class of an object is how you create instances of custom classes... yours In Figure 13 -29, a UIImageView object was added to the nib document In the Xcode project, a subclass of UIImageView called ZombiePortraitView was created Interface Builder will now allow you to change the class of the object to from UIImageView to ZombiePortraitView At run time, an instance of ZombiePortraitView is constructed, initialized, and inserted into the view FIGURE 13- 29 The other really... to assign custom descriptions and labels to objects in your document In Figure 13 -29, the UIImageView is given a custom name and a color label, which makes it much easier to identify in the document window The Object ID is assigned by Interface Builder and cannot be changed TIP TO REMEMBER There’s a shortcut to renaming objects in the nib document window: click the name of the object and edit it directly... objects, along with many choices for how the binding is configured, and what placeholder values are used You can learn more about bindings by reading the Introduction to Cocoa Bindings at http://developer.apple.com /mac/ library/documentation/Cocoa/Conceptual/CocoaBindings/ Identity The identity inspector edits the identity of the object: what it is and how it appears in the nib document window It also... the sections that follow, the term “this object” means “the currently selected Interface Builder object, which is the subject of the active inspector palette.” Download at getcoolebook.com c 13. indd 262 1/21/10 3: 37 :38 PM ... localizable attributes, or non-localizable attributes This is particularly handy when you’re performing localizations Localizing a nib document often entails duplicating one locale and then editing the localizable attributes Locking non-localizable attributes keeps you from accidentally changing any attributes that shouldn’t be altered Also see the “Document Locking” section later in this chapter If you try...260 ❘ CHAPTER 13 INTERFACE BUILDER In this context, the terms attribute and property are equivalent Interface Builder uses the term “attribute,” whereas Objective-C and Key Value Coding use the term “property,” but the two are interchangeable here Creating a binding might seem daunting at fi rst, but it is a fairly straightforward procedure: 1 Start by choosing the attribute you want to... arbitrary object in your application, unless that object happens to be the File’s Owner object See the section “Placeholder Objects” for more about the File’s Owner object 3 If the object you selected in step 2 is a subclass of NSController, choose the Controller Key to bind to This is essentially the fi rst element in the Model Key Path (see step 4), but it’s convenient because Interface Builder knows the... Key Value Coding path that’s relative to either the object selected in step 2 or (in the case of an NSController) the object specified by the value of the controller key in step 3 Leave the field blank if the controller key (step 3) is the value you want to bind to Either way, it’s a fully functional KVC path It’s normally a simple property name, but it can contain complex paths (for example, “mother.birthday.reminderDate”) . that action. Confi guring Objects ❘ 261 c 13. indd 261c 13. indd 261 1/21/10 3: 37 :33 PM1/21/10 3: 37 :33 PM Download at getcoolebook.com 262 ❘ CHAPTER 13 INTERFACE BUILDER The identity inspector. 13- 22 FIGURE 13- 23 c 13. indd 254c 13. indd 254 1/21/10 3: 37:02 PM1/21/10 3: 37:02 PM Download at getcoolebook.com Which inspectors appear depends on the type of nib document you are editing. A Cocoa document presents. you in aligning objects. c 13. indd 253c 13. indd 2 53 1/21/10 3: 37:01 PM1/21/10 3: 37:01 PM Download at getcoolebook.com 254 ❘ CHAPTER 13 INTERFACE BUILDER Whenever you position an object by dragging,