In the last chapter, you created an application that displays a list of BNRItem instances in a UITableView. The next step for Homepwner is allowing the user to interact with the table – to add, delete, and move rows. Figure 9.1 shows what Homepwner will look like by the end of this chapter.
UITableView has an editing property, and when this property is set to YES, the UITableView enters editing mode. Once the table view is in editing mode, the rows of the table can be manipulated by the user. Depending on how the table view is configured, the user can change the order of the rows, add rows, or remove rows. Editing mode does not allow the user to edit the content of a row.
But first, the user needs a way to put the UITableView in editing mode. For now, you are going to include a button that toggles editing mode in the header view of the table. A header view appears at the top of a table and is useful for adding section-wide or table-wide titles and controls. It can be any UIView instance.
Note that the table view uses the word “header” in two different ways: There can be a table header and there can be section headers. Likewise, there can be a table footer and section footers.
You are creating a table header view. It will have two subviews that are instances of UIButton: one to toggle editing mode and the other to add a new BNRItem to the table. You could create this view programmatically, but in this case you will create the view and its subviews in a XIB file, and BNRItemsViewController will unarchive that XIB file when it needs to display the header view.
First, let’s set up the necessary code. Reopen Homepwner.xcodeproj. In BNRItemsViewController.m, add a class extension with the following property. Also stub out two methods in the implementation.
@interface BNRItemsViewController ()
@property (nonatomic, strong) IBOutlet UIView *headerView;
@end
@implementation BNRItemsViewController
// Other methods here
- (IBAction)addNewItem:(id)sender
{
}
- (IBAction)toggleEditingMode:(id)sender
{
}
Notice that headerView is a strong property. This is because it will be a top-level object in the XIB file; you use weak references for objects that are owned (directly or indirectly) by the top-level objects.
Now you need to create the new XIB file. Unlike the previous XIB files you created, this XIB file will not deal with the view controller’s view. (As a subclass of UITableViewController, BNRItemsViewController already knows how to create its view.) XIB files are typically used to create the view for a view controller, but they can also be used any time you want to lay out view objects, archive them, and have them loaded at runtime.
Create a new file (Command-N). From the iOS section, select User Interface, choose the Empty template, and click Next (Figure 9.3).
On the next pane, select iPhone. Save this file as HeaderView.
In HeaderView.xib, select the File's Owner object and change its Class to BNRItemsViewController in the identity inspector (Figure 9.4).
Drag a UIView onto the canvas. Then drag two instances of UIButton onto that view. You will then want to resize the UIView so that it just fits the buttons; however, Xcode will not let you: the size is locked. To unlock the size, select the UIView on the canvas and open the attributes inspector. Under the Simulated Metrics section, select None for the Size option (Figure 9.5).
Now that the view can be resized, resize it and make the connections shown in Figure 9.6.
Also, change the background color of the UIView instance to be completely transparent. To do this, select the view and show the attributes inspector. In the pop-up labeled Background, choose Clear Color (Figure 9.7).
So far, your XIB files have been loaded automatically by the implementation of UIViewController. For example, BNRReminderViewController in Chapter 6 knew how to load BNRReminderViewController.xib because of code written in its superclass, UIViewController. For HeaderView.xib, you are going to write the code to have the BNRItemsViewController load this XIB file manually.
To load a XIB file manually, you use NSBundle. This class is the interface between an application and the application bundle it lives in. When you want to access a file in the application bundle, you ask NSBundle for it. An instance of NSBundle is created when your application launches, and you can get a pointer to this instance by sending the message mainBundle to NSBundle.
Once you have a pointer to the main bundle object, you can ask it to load a XIB file. In BNRItemsViewController.m, implement headerView.
- (UIView *)headerView
{
// If you have not loaded the headerView yet...
if (!_headerView) {
// Load HeaderView.xib
[[NSBundle mainBundle] loadNibNamed:@"HeaderView"
owner:self
options:nil];
}
return _headerView;
}
Notice that this is a getter method that does more than just get. This is a common pattern: Lazy Instantiation puts off creating the object until it is actually needed. In some cases this approach can significantly lower the normal memory footprint of your app.
You do not have to specify the suffix of the filename; NSBundle will figure it out. Also, notice that you passed self as the owner of the XIB file. This ensures that when the main NSBundle is parsing the resultant NIB file at runtime, any connections to the File's Owner placeholder will be made to that BNRItemsViewController instance.
The first time the headerView message is sent to the BNRItemsViewController, it will load HeaderView.xib and keep a pointer to the view object in the instance variable headerView. The buttons in this view will send messages to the BNRItemsViewController when tapped.
Now you just need to tell the table view about its header view. In BNRItemsViewController.m, add this to the viewDidLoad method:
- (void)viewDidLoad
{
[super viewDidLoad];
[self.tableView registerClass:[UITableViewCell class]
forCellReuseIdentifier:@"UITableViewCell"];
UIView *header = self.headerView;
[self.tableView setTableHeaderView:header];
}
Build and run the application to see the interface.
While XIB files are often used to create the view for a view controller (for example, BNRReminderViewController.xib), you have now seen that a XIB file can be used any time you wish to archive view objects. In addition, any object can load a XIB file manually by sending the message loadNibNamed:owner:options: to the application bundle.
UIViewController’s default XIB loading behavior uses the same code. The only difference is that it connects its view outlet to the view object in the XIB file. Imagine what the default implementation of loadView for UIViewController probably looks like:
- (void)loadView
{
// Which bundle is the NIB in?
// Was a bundle passed to initWithNibName:bundle:?
NSBundle *bundle = [self nibBundle];
if (!bundle) {
// Use the default
bundle = [NSBundle mainBundle];
}
// What is the NIB named?
// Was a name passed to initWithNibName:bundle:?
NSString *nibName = [self nibName];
if (!nibName) {
// Use the default
nibName = NSStringFromClass([self class]);
}
// Try to find the NIB in the bundle
NSString *nibPath = [bundle pathForResource:nibName
ofType:@"nib"];
// Does it exist?
if (nibPath) {
// Load it (this will set the view outlet as a side-effect
[bundle loadNibNamed:nibName owner:self options:nil];
} else {
// If there is no NIB, just create a blank UIView
self.view = [[UIView alloc] init];
}
}
Now let’s implement the toggleEditingMode: method. You could toggle the editing property of UITableView directly. However, UITableViewController also has an editing property. A UITableViewController instance automatically sets the editing property of its table view to match its own editing property.
To set the editing property for a view controller, you send it the message setEditing:animated:. In BNRItemsViewController.m, implement toggleEditingMode:.
- (IBAction)toggleEditingMode:(id)sender
{
// If you are currently in editing mode...
if (self.isEditing) {
// Change text of button to inform user of state
[sender setTitle:@"Edit" forState:UIControlStateNormal];
// Turn off editing mode
[self setEditing:NO animated:YES];
} else {
// Change text of button to inform user of state
[sender setTitle:@"Done" forState:UIControlStateNormal];
// Enter editing mode
[self setEditing:YES animated:YES];
}
}
Build and run your application, tap the Edit button, and the UITableView will enter editing mode (Figure 9.8).
