IT tutorials
 
Mobile
 

iPad Development : The Dual-Action Color Popover (part 2) - Hooking Up the Grid

12/3/2011 4:30:21 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

2. Hooking Up the Grid

Now that we have a view class ready to go, we can create a view controller that makes use of it. Use the New File Assistant to create a new UIViewController subclass, making it include the creation of an .xib file, but not making it a UITableViewController subclass. Name it SelectColorController, and give it the following interface in SelectColorController.h:

//  StrokeColorController.h
#import <UIKit/UIKit.h>
@class ColorGrid;
// a notification name
#define ColorSelectionDone @"ColorSelectionDone"
@interface SelectColorController : UIViewController {
IBOutlet ColorGrid *colorGrid;
IBOutlet UIView *selectedColorSwatch;
UIColor *selectedColor;
UIPopoverController *container;
}
@property (retain, nonatomic) ColorGrid *colorGrid;
@property (retain, nonatomic) UIColor *selectedColor;
@property (assign, nonatomic) UIPopoverController *container;
@end

The GUI for this class will contain a ColorGrid instance, as well as a simple UIView for displaying the selected color. We make the colorGrid an accessible property so that our main controller, DudelViewController, can set its properties (rowCount, columnCount, and colors) when setting things up. This class also has properties for the currently selected color and the UIPopoverController that displays it. And, like the ColorGrid class, it will communicate "upstream" to the DudelViewController indirectly, through the use of a notification, whose name is defined here.

Now open SelectColorController.xib in Interface Builder. Once again, the default view is meant to be full-screen, so use the attribute inspector to turn off the Status Bar by setting it to Unspecified, and then the size inspector to make it 320 by 320. Use the Library to get instances of UIView and ColorGrid, and lay them out as shown in Figure 2.

Figure 2. The basic layout of our color picker in Interface Builder

The upper view there is the UIView, and the lower one is the ColorGrid. You don't need to get too picky about the sizes of these views, since ColorGrid will adjust to whatever you throw at it, but it's good to have the ColorGrid reasonably large and both views centered in the parent view. Connect the outlets from File's Owner to the colorGrid and selectedColorSwatch views. The GUI is complete! Now we just need to make it work.

Here's the code for SelectColorController.m:

//
// StrokeColorController.m
#import "SelectColorController.h"
#import "ColorGrid.h"
@implementation SelectColorController
@synthesize colorGrid, selectedColor, container;
- (void)viewDidLoad {
[super viewDidLoad];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(colorGridTouchedOrDragged:)
name:ColorGridTouchedOrDragged object:colorGrid];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(colorGridTouchEnded:)
name:ColorGridTouchEnded object:colorGrid];
selectedColorSwatch.backgroundColor = self.selectedColor;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)orientation {
// Overriden to allow any orientation.
return YES;
}
- (void)viewDidUnload {
[super viewDidUnload];
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
- (void)dealloc {
[[NSNotificationCenter defaultCenter] removeObserver:self];
self.colorGrid = nil;

[super dealloc];
}
- (void)colorGridTouchedOrDragged:(NSNotification *)notification {
NSDictionary *userDict = [notification userInfo];
self.selectedColor = [userDict objectForKey:ColorGridLatestTouchedColor];
selectedColorSwatch.backgroundColor = self.selectedColor;
}
- (void)colorGridTouchEnded:(NSNotification *)notification {
NSDictionary *userDict = [notification userInfo];
self.selectedColor = [userDict objectForKey:ColorGridLatestTouchedColor];
selectedColorSwatch.backgroundColor = self.selectedColor;
[[NSNotificationCenter defaultCenter] postNotificationName:ColorSelectionDone
object:self];
}
@end


This should be pretty straightforward. We register methods to listen for activity from the ColorGrid, each of which grabs the latest touched color from the notification object. If the touch ended, we send out yet another notification, so that our main controller gets the message that a color has been set.

 
Others
 
- iPad Development : The Dual-Action Color Popover (part 1) - Creating a Simple Color Grid
- XNA Game Studio 3.0 : Creating Fake 3-D - Creating Shadows Using Transparent Colors
- Android Application Development : ViewGroups (part 2) - ListView, ListActivity, ScrollView & TabHost
- Android Application Development : ViewGroups (part 1) - Gallery and GridView
- Java ME on Symbian OS : MIDP 2.0 Game API Core Concepts
- Java ME on Symbian OS : Building a Simple MIDP Game
- jQuery 1.3 : Compound effects & Creating custom animations
- jQuery 1.3 : Effects and speed
- Mobile Web Apps : Quick Wins (part 2) - Form Field Attributes
- Mobile Web Apps : Quick Wins (part 1) - Nifty Links
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS