Writing SimpleColorPicker App for iPhone

UISlider is such a tempting object which you don’t get in HTML web pages. Although HTML 5 gives this capability to some extent, Apple iOS provides nice UISlider objects. UISlider object can be used for selecting min and maximum values. Very first thought which comes on your mind is to build useful Color Picker Application. This application is really fun to deploy on iPhone. You can almost develop this in less than 5 minutes.

Step 1:  Lets start by creating new Xcode Project Single View Application

Step 2: Go to Story board and design the SimpleColorPicker using the Object Panel on right bottom

• Drag and drop the UIView Object on the top.
• Add three UISliders in bottom area. Stretch them to left and right edges.
• Add labels on top of each UISlider.
• Add a UILabel with message Hex Code.
• Add one more label next to Hex Code for displaying the output. You may set different background color to drive one’s attention.
• Set Min value of slider as 0 and max value as 255.

Step 3: Add the IBOutlets and IBActions in ViewController.h

• Add three UISlider objects as IBOutlets.
• Add  UIView Object named colorBox.
• And UILabel to show hex code of RGB number.

//
//  ViewController.h
//  SimpleColorPicker
//
//  Created by Deepak Keswani on 30/03/12.
//  Copyright (c) 2012 deepakkeswani.com. All rights reserved.
//

#import 

@interface ViewController : UIViewController {
    IBOutlet UIView *colorBox;
    IBOutlet UISlider *redSlider;
    IBOutlet UISlider *greenSlider;
    IBOutlet UISlider *blueSlider;
    IBOutlet UILabel *hexCode;
}

- (IBAction) updateView;

@end

Step 4: According to header declaration add the methods in ViewController.m file

• Complete the implementation of updateView method.
• Please note even the slider object returns value from 0 to 255, but when we create custom color object using UIColor we can only pass float value from 0 to 1. This value can be generated by dividing UISlider value with 255.
• We can present the number in hex format only if we have value in NSInteger. Thats why all the three slider values are converted into NSInteger object.

- (IBAction)updateView {
    colorBox.backgroundColor = [UIColor colorWithRed:redSlider.value/255 green:greenSlider.value/255 blue:blueSlider.value/255 alpha:1.0];
    NSInteger redHex = [[NSNumber numberWithFloat:redSlider.value]integerValue];
    NSInteger greenHex = [[NSNumber numberWithFloat:greenSlider.value]integerValue];
    NSInteger blueHex = [[NSNumber numberWithFloat:blueSlider.value]integerValue];
    hexCode.text = [NSString stringWithFormat:@"%.2X%.2X%.2X",redHex,greenHex,blueHex];
}

Step 5: Create the connections between the display objects and methods.

Link Red, Green and Blue sliders with IBOutlet objects.

Again associating slider with method. On Change of value event,  updateView method will be called.

Following screenshot shows complete set of objects linked with IBOutlets and IBActions method.

Step 6: Build and Run the project to see the Simple Color Picker app in simulator

This will show you Simple Color Picker app in iPhone Simulator. When you slide the Red, Green & Blue slider. the value changes and color is also applied to colorBox. Also hex Code is shown as you slide the UISlider objects.

If you have compatible iPhone model & you have subscribed to Apple iOS Developer Program, you must have received Team Provisioning profile. This profile must be installed on your test device.  Using these with the help of Xcode organizer you can deploy this app directly on your iPhone.