Chapter 12: Custom Views
All the visible objects in an application are either windows or views. In this chapter, you will create a subclass of NSView . From time to time, you will create a
custom view to do custom drawing or event handling. Even if you do not plan to do
custom drawing or event handling, by learning how to create a new view class, you
will learn a lot about how Cocoa works.
Windows are instances of the class NSWindow . Each window has a collection of views.
Each view is responsible for a rectangle of the window. The view draws inside that
rectangle and handles mouse events that occur there. A view may also handle keyboard events. You have worked with several subclasses of NSView already: NSButton, NSTextField, NSTableView, and NSColorWell are all views. (Note that a window is
not a subclass of NSView .)
The View Hierarchy
Views are arranged in a hierarchy (Figure 12.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.
Here are the relevant methods:
- (NSView *)superview ;
- (NSArray *)subviews ;
- (NSWindow *)window ;
Any view can have subviews, but most don't. Here are five views that commonly have
- The content view of a window.
NSBox . The contents of a box are its subviews.
NSScrollView . If a view appears in a scroll view, it is a subview of the scroll
view. The scroll bars are also subviews of the scroll view.
NSSplitView . Each view in a split view is a subview (Figure 12.2).
NSTabView . As the user chooses different tabs, different subviews are
swapped in and out (Figure 12.3).
Get a View to Draw Itself
In this section, you are going to create a very simple view. It will simply appear and
paint itself green. It will look like Figure 12.4.
Create a new project of type Cocoa Application (Figure 12.5).
Name it ImageFun
After the new project is created, open MainMenu. nib, and select NSView in the classes
browser (Figure 12.6).
Press return to create a subclass, and name it StretchView (Figure 12.7).
Create the files for StretchView (Figure 12.8).
Save the files in the project directory.
Create an Instance of a View Subclass
Now create an instance of your class by dragging out a CustomView placeholder and
dropping it on the window (Figure 12.9).
Resize the view to fill most of the window. Open the info panel and set the class of
the view to be StretchView (Figure 12.10).
Notice that creating an instance of a view is different from creating an instance of a
controller object like AppController . To create an instance of AppController in
Chapter 7, you used the Instantiate menu item. When creating a view, it is important
that you attach it to a window and give it a size and location in that window.
Your StretchView object is a subview of the window's content view. An interesting
question is: What happens to the view when the superview resizes? There is a page in
the info panel that allows you to set that behavior. Open the size info panel, and set it
as shown in Figure 12.11. This means that it will grow and shrink as necessary to
keep the distance from its edges to the edges of its superview constant.
If you wanted the view to stay the same size, you could let the distance between the
edges of the view and the edges of the superview grow and shrink. In this exercise,
you do not want this behavior. But in a parallel universe where you did, the inspector
would look like this (Figure 12.12).
Save and close the nib file.
When a view needs to draw itself, it is sent the message drawRect: with the rectangle
that needs to be drawn or redrawn. This method is called automatically, and you will never need to call it directly. Instead, if you know that a view needs redrawing, you
will send the view the message setNeedsDisplay...