Friday, 17 June 2011


Design Phase: For this demo we will take a segment control, a label and a datePicker view and on the selected index of the segmented control we will try to change the modes of the datepicker view. The different modes available for datepickers are as follows:

  1. UIDatePickerModeTime
  2. UIDatePickerModeDate
  3. UIDatePickerModeDateAndTime
  4. UIDatePickerModeCountDownTimer

The default mode is UIDatePickerModeDateAndTime

Our final view looks like this .

Step 1: Open Xcode and create a new window based application project add UIViewController subclass file and name them MyViewController.

Step 2: Go to the .h file of MyViewController and declare objects of the segmented control, label and picker also you need to declare a method which will be called when the value of the segmented control will change, so here's how the code looks

@interface MyViewController : UIViewController {

UIDatePicker *datePicker;
UISegmentedControl *segmentedControl;
NSArray *modes;
UILabel *lbl;
-(void)changePickerView:(UISegmentedControl*) sender;


Now go to the .m file of the MyViewController class and into its init method start giving the frame and text to your controls here's how you do that

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
// Custom initialization

//setting the frame of the date picker
datePicker = [[UIDatePicker alloc]initWithFrame:CGRectMake(1, 216, 320, 216)];

//settings for the segmented control
modes = [[NSArray alloc]initWithObjects:@"1",@"2",@"3",@"4",nil];
segmentedControl = [[UISegmentedControl alloc]initWithItems:modes];
[segmentedControl setFrame:CGRectMake(20, 144, 280, 44)];
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
[segmentedControl setBackgroundColor:[UIColor blackColor]];
[segmentedControl addTarget:self action:@selector(changePickerView:) forControlEvents:UIControlEventValueChanged];

//settings for the label
lbl = [[UILabel alloc]initWithFrame:CGRectMake(53, 95, 217, 21)];
lbl.hidden = YES;
[lbl setBackgroundColor:[UIColor blackColor]];
lbl.textColor = [UIColor whiteColor];
lbl.adjustsFontSizeToFitWidth = YES;

//setting the background color to black
[self.view setBackgroundColor:[UIColor blackColor]];
return self;

Now into the loadView method add these view

- (void)loadView {
[super loadView];
[self.view addSubview:datePicker];
[self.view addSubview:segmentedControl];
[self.view addSubview:lbl];

Step 3: Now coming to our function that we made earlier called as
-(void)changePickerView:(UISegmentedControl*) sender

here's how the body of this function looks

-(void)changePickerView:(UISegmentedControl*) sender
switch (sender.selectedSegmentIndex) {

case 0:
datePicker.datePickerMode = UIDatePickerModeTime;
lbl.hidden = NO;
lbl.text = @"UIDatePickerModeTime";

case 1:
datePicker.datePickerMode = UIDatePickerModeDateAndTime;
lbl.hidden = NO;
lbl.text = @"UIDatePickerModeDateAndTime";

case 2:
datePicker.datePickerMode = UIDatePickerModeDate;
lbl.hidden = NO;
lbl.text = @"UIDatePickerModeDate";

case 3:
datePicker.datePickerMode = UIDatePickerModeCountDownTimer;
lbl.hidden = NO;
lbl.text = @"UIDatePickerModeCountDownTimer";


The above code is quite self-explanatory. We have changed the mode of the date picker on the basis of the index change of the segmented control.

Step 4: Go to the AppDelegate.m file and add this view to your window and your all done

#import "DateTimePickerDemoAppDelegate.h"
#import "MyViewController.h"

@implementation DateTimePickerDemoAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Override point for customization after application launch
MyViewController *mVC = [[MyViewController alloc]init];
[window addSubview:mVC.view];
[window makeKeyAndVisible];

Step 5: Run the application by pressing the Build and Go and you will get the below result




No comments:

Post a Comment