• Choose a category
• All
• Classic-Fiction

The View Hierarchy

Views are arranged in a hierarchy (Figure 17.1). The window has a content view that completely fills its interior. The content view usually has several subviews. Each subview may have subviews of its own. Every view knows its superview, its subviews, and the window it lives on.

Figure 17.1. Views Hierarchy

Here are the relevant methods from NSView:

- (NSView *)superview;

- (NSArray *)subviews;

- (NSWindow *)window;

Any view can have subviews, but most don’t. The following five views commonly have subviews:

1. The content view of a window.

2. NSBox. The contents of a box are its subviews.

3. NSScrollView. A view that appears in a scroll view is a subview of the scroll view. The scroll bars are also subviews of the scroll view.

4. NSSplitView. Each view in a split view is a subview (Figure 17.2).

Figure 17.2. A Scroll View in a Split View

5. NSTabView. As the user chooses different tabs, different subviews are swapped in and out (Figure 17.3).

Figure 17.3. A Tab View

Get a View to Draw Itself

In this section, you will create a very simple view that will appear and paint itself green. It will look like Figure 17.4, except greener.

Figure 17.4. Completed Application

Create a new project of type Cocoa Application. Name it DrawingFun, and set the Class Prefix to DrawingFun. Turn off Create Document-Based Application, Use Core Data, and Include Unit Tests.

Using the File->New->New File... menu item, create a new Objective-C class that is an NSView subclass, and name it StretchView.

Create an Instance of a View Subclass

Open MainMenu.xib and click the window in the editor dock to show it. Create an instance of your class by dragging out a Custom View from the Library (under Cocoa -> Layout Views) and dropping it onto the window (Figure 17.5).

Figure 17.5. Drop a View onto the Window

Resize the view to fill most of the window. Open the Identity Inspector and set the class of the view to be StretchView (Figure 17.6).

Figure 17.6. Set the Class of the View to StretchView

Size Inspector

Your StretchView object is a subview of the window’s content view. This point raises an interesting question: What happens to the view when the superview resizes? The Size Inspector allows you to specify that behavior. Open the Size Inspector, and make all the lines inside the Autosizing view red, as shown in Figure 17.7. Now the view will grow and shrink as necessary to keep the distance from its edges to the edges of its superview constant.

Figure 17.7. Make the View Resize with the Window

If you wanted the view to stay the same height, you could let the distance between the bottom of the view and the bottom of the superview grow and shrink. You could also let the distance between the right edge of the view and the right edge of the window grow and shrink. In this exercise, you do not want this behavior. But in a parallel universe where you did want the view to stick to the upper-left corner of the window, the inspector would look like Figure 17.8.

Figure 17.8. Don’t Do This—This View Will Not Resize with the Window

Figure 17.9 is a complete diagram of what the red lines in the Size Inspector mean.

Figure 17.9. What the Red Lines in the Size Inspector Mean

drawRect

When a view needs to draw itself, it is sent the message drawRect: with the rectangle that needs to be drawn or redrawn. The method is called automatically—you never need to call it directly. Instead, if you know that a view needs redrawing, you send the view the setNeedsDisplay: message:

[myView setNeedsDisplay:YES];

This message informs myView that it is “dirty.” After the event has been handled, the view will be redrawn.

Before calling drawRect:, the system locks focus on the view. Each view has its own graphics context, which includes the view’s coordinate system, its current color, its current font, and the clipping rectangle. When the focus is locked on a view, the view’s graphics