CHAPTER 14: Hey! You! Get onto iCloud!

513

Storyboard Detailing

Select MainStoryboard.storyboard, find the detail scene, and take a look at what’s there right now.

All the GUI contains is a label (“Detail view content goes here”), which is the one that contained the document’s description when you ran the app earlier. That label isn’t particularly useful, so select the label in the detail view controller and press the delete key to remove it.

Use the object library to find a View, and drag it into the detail view. Interface Builder will help you line it up so that it fills the entire area. After dropping it there, use the size inspector to set both its width and height to 310. Finally, drag the view and use the guidelines to center it in its container (see Figure 14–5).

Figure 14–5. We replaced the label in the detail view with another view, 310 × 310 pixels, centered in its containing view.

Switch over to the identity inspector so we can change this UIView instance into an instance of our custom class. In the Custom Class section at the top of the inspector, select the Class popup list and choose BIDTinyPixView.

Now, we need to wire up the custom view to our detail view controller. We haven’t prepared an outlet for our custom view yet, but that’s OK, since Xcode 4’s drag-to-code will do that for us.

Activate the assistant editor. A text editor should slide into place alongside the GUI editor, displaying the contents of BIDDetailViewController.h. If it’s showing you anything

www.it-ebooks.info

514	CHAPTER 14: Hey! You! Get onto iCloud!

else, use the jump bar at the top of the text editor to make BIDDetailViewController.h come into view.

To make the connection, control-drag from the Tiny Pix View to the code, releasing the drag just above the @end line. In the popup window that appears, make sure that Connection is set to Outlet, name the new outlet pixView, and click the Connect button.

You should see that making those connections has added this line to

BIDDetailViewController.h:

@property (weak, nonatomic) IBOutlet BIDTinyPixView *pixView;

One thing it didn’t add, however, is a header import for our custom view. Let’s take care of that by adding this line toward the top of BIDDetailViewController.h:

#import <UIKit/UIKit.h>

#import "BIDTinyPixView.h"

@interface BIDDetailViewController : UIViewController

.

.

.

Next, switch over to BIDDetailViewController.m, and you’ll see that Xcode also added this method synthesizer toward the top of the file:

@synthesize pixView = _pixView;

Xcode also added a line to the top of viewDidUnload:

- (void)viewDidUnload

{

[self setPixView:nil];

[super viewDidUnload];

//Release any retained subviews of the main view.

//e.g. self.myOutlet = nil;

}

From this start, this class already has a class extension that declares a private method. Let’s add a property to BIDDetailViewController.m, to keep track of which color the user has chosen:

.

.

.

@interface BIDDetailViewController ()

@property (assign, nonatomic) NSUInteger selectedColorIndex;

- (void)configureView; @end

.

.

.

Next, we’ll implement the getter and setter for this property. We’ll use the synthesized getter, but write our own setter so that whenever this value is set (which will happen when the user taps the segmented control), we set the highlight color in our custom view.

www.it-ebooks.info

CHAPTER 14: Hey! You! Get onto iCloud!

515

.

.

.

@synthesize pixView = _pixView;

@synthesize selectedColorIndex;

- (void)setSelectedColorIndex:(NSUInteger)i { if (selectedColorIndex == i) return;

selectedColorIndex = i; switch (selectedColorIndex) {

case 0:

self.pixView.highlightColor = [UIColor blackColor]; break;

case 1:

self.pixView.highlightColor = [UIColor redColor]; break;

case 2:

self.pixView.highlightColor = [UIColor greenColor]; break;

default:

break;

}

[self.pixView setNeedsDisplay];

}

.

.

.

Now, let’s modify the configureView method. This isn’t a standard UIViewController method. It’s just a private method that the project template included in this class as a convenient spot to put code that needs to update the view after anything changes.

Since we’re not using the description label, we delete the line that sets that. Then we add a bit of code to pass the chosen document along to our custom view, and tell it to redraw itself by calling setNeedsDisplay.

- (void)configureView

{

// Update the user interface for the detail item.

if (self.detailItem) {

self.detailDescriptionLabel.text = [self.detailItem description]; self.pixView.document = self.detailItem;

[self.pixView setNeedsDisplay];

}

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults]; self.selectedColorIndex = [prefs integerForKey:@"selectedColorIndex"];

}

We ended this method by pulling the color choice out of NSUserDefaults. We set our own selectedColorIndex property. That, in turn, will call the setter we defined earlier, which will pass the chosen color to our custom view.

www.it-ebooks.info