Bert McDowell

Date range editing is a useful when dealing with calendars or time periods, the iPhone calendar provides a nice simple way of editing a date range. Just open up the Calendar hit the + button and edit the events date range, you get a lovely screen that looks like the image below:

Calendar Date Rang Editor

Unfortunately UIkit does not provide a basic control to edit a date range editor, it does provide the UIDatePicker which can be used to build your own date range editor and this is what I have set about to do. The basic idea is to emulate the basic functionality implemented in the calendar date range editor, i.e. The start and end dates can be selected which in turn alters the date displayed in the UIDatePicker and the control provides basic error detection changing the start date red when invalid and prevent savings if there is an invalid date range.

The following is the result of my attempt to recreate this control in a simple and customisable way, the header file below is rather long but there are only a few items exposed to interface builder to make it easy to setup.

//
//  UIViewControllerDateRangeEditor.h
//  UIViewControllerDateRangeEditor
//

#import

@interface UIViewControllerDateRangeEditor : UIViewController
{
@private

// ----------------------------------------
// control objects
// ----------------------------------------
IBOutlet UIBarButtonItem *	leftBarButton;          // Navigation Button to be used on the left    : Cancel
IBOutlet UIBarButtonItem *	rightBarButton;      // Navigation Button to be used on the right  : Save
// ----------------------------------------

// ----------------------------------------
// Display Content
// ----------------------------------------
IBOutlet UILabel  *			startLabel;                   // start label : used for highlighting and is not altered
IBOutlet UILabel  *			startDate;                     // start date label : used for highlighting and contains the current start date

IBOutlet UILabel  *			endLabel;                     // end label : used for highlighting and is not altered
IBOutlet UILabel  *			endDate;                      // end date label : used for highlighting and contains the current end date
// ----------------------------------------

// ----------------------------------------
// control objects
// ----------------------------------------
IBOutlet UIDatePicker *		datePicker;       // date picker : link the value change to the dateChanged action
// ----------------------------------------

// ----------------------------------------
// Start Date Colors
// ----------------------------------------
UIColor *					normalColor;
UIColor *					highlightColor;
// ----------------------------------------

// ----------------------------------------
// Buttons
// ----------------------------------------
IBOutlet UIButton *			buttonStart;              // button that is to be highlighted at the start
UIButton *					buttonSelected;
UIImage  *					buttonImage;
// ----------------------------------------

// ----------------------------------------
// Date Formatter
// ----------------------------------------
NSDateFormatter *			dateFormatter;
// ----------------------------------------

// ----------------------------------------
// current dateValue
// ----------------------------------------
NSTimeInterval				startTimeInterval;
NSTimeInterval				endTimeInterval;

NSTimeInterval				minTimeInterval;
NSTimeInterval				maxTimeInterval;
// ----------------------------------------

// ----------------------------------------
Boolean						editingStartDate;
Boolean						savePressed;
Boolean						delayReset;
// ----------------------------------------
}

@property (nonatomic) NSTimeInterval startTimeInterval;
@property (nonatomic) NSTimeInterval endTimeInterval;

@property (nonatomic) NSTimeInterval minTimeInterval;
@property (nonatomic) NSTimeInterval maxTimeInterval;

@property (nonatomic, readonly) Boolean savePressed;

- (void) reset;

- (IBAction) cancel:(id)sender;
- (IBAction) save:(id)sender;

- (IBAction) dateChanged:(id)sender;

- (IBAction) selectStartDate:(id)sender;
- (IBAction) selectEndDate:(id)sender;

@end

The View controller provided with this article should permit you to create your own custom date range editor using interface builder, this can either be loaded manually or via the main nib. The sample project provide demonstrates how the view controller is setup and how you can use it in your own project.

Sample Images

Download : UIViewControllerDateRangeEditor.h, UIViewControllerDateRangeEditor.m

Sample Project : UIViewControllerDateRangeEditor

Example Usage :

// -------------------------------------------------------------------
// load  the date range editor and push it onto the view stack
// -------------------------------------------------------------------
- (IBAction) editDateRange:(id)sender
{
if ( editor == nil )
{
editor = [[UIViewControllerDateRangeEditor alloc] initWithNibName:@"UIViewControllerDateRangeEditor" bundle:nil];
editor.title = @"Edit";
}

editor.startTimeInterval = startTime;
editor.endTimeInterval   = endTime;

[[self navigationController] pushViewController:editor animated:TRUE];
}

// -------------------------------------------------------------------
// when the controller returns from the editor copy the date out if save has been
// pressed and reset the controller.
// -------------------------------------------------------------------
- (void) viewWillAppear:(BOOL)animated
{
if ( editor )
{
if ( editor.savePressed )
{
startTime = editor.startTimeInterval;
endTime = editor.endTimeInterval;
}

[editor reset];
}
}

As always the source is provided as is and use it at your own risk, feel free to alter and extend as you see fit. Have fun.

On of the nice things about the UINavigationController is that it will keep track of the view controllers that have been presented which in turn permits the application to dismiss a controller and return to the previous one. The only problem I faced was was altering the transition animations being used to present and dismiss the views. This is not such a big problem when using OS3.0 and above as Apple have now provided a property to change transition animation, though it is a bit limited (see below):

modalTransitionStyle
The transition style to use when presenting the current view controller modally.

@property (nonatomic, assign) UIModalTransitionStyle modalTransitionStyle

UIModalTransitionStyleCoverVertical
When the view controller is presented, its view slides up from the bottom of the screen. On dismissal, the view slides back down. This is the default transition style.

UIModalTransitionStyleFlipHorizontal
When the view controller is presented, the current view initiates a horizontal 3D flip from right-to-left, resulting in the revealing of the new view as if it were on the back of the previous view. On dismissal, the flip occurs from left-to-right, returning to the original view.

UIModalTransitionStyleCrossDissolve
When the view controller is presented, the current view fades out while the new view fades in at the same time. On dismissal, a similar type of cross-fade is used to return to the original view.

There are more transition animations provided by the OS, these have been available to users for OS2.0, so why not support them as well? Another problem is lack of support for altering these animations OS versions prior to OS3.0.

What I really wanted was the ability to play any of the transition provided by the OS and that the transitions to be the same no matter what version the OS the user was running and that’s what I set out to create.

The first question I had was where to put the code? It had to be easily available to my derived View Controllers and also be easy to remove. There where a couple of options 1) derive a new class off the UIViewController and inherit form that or 2) extend the UIViewController provided by UIKit. One of the nice features of Objective-C (if you don’t know) is the ability to extend a class’s functionality, providing an easy way to integrate code into a class even if you don’t have the original source code. I picked the later method as it would permit the additional code to be available to any of the UIViewControllers in my project all I had to do was include the extended class’s header in the .m file and the code could be used.

Below is the header file that I created to extend the UIKit UIViewController:

//
//  UIViewController-Extended.h
//
//  Created by Robert on 17/12/2009.
//

#import <UIKit/UIKit.h>

typedef enum
{
UIViewControllerAnimationTransitionNone = 0,
UIViewControllerAnimationTransitionFade,
UIViewControllerAnimationTransitionPushFromTop,
UIViewControllerAnimationTransitionPushFromRight,
UIViewControllerAnimationTransitionPushFromBottom,
UIViewControllerAnimationTransitionPushFromLeft,
UIViewControllerAnimationTransitionMoveInFromTop,
UIViewControllerAnimationTransitionMoveInFromRight,
UIViewControllerAnimationTransitionMoveInFromBottom,
UIViewControllerAnimationTransitionMoveInFromLeft,
UIViewControllerAnimationTransitionRevealFromTop,
UIViewControllerAnimationTransitionRevealFromRight,
UIViewControllerAnimationTransitionRevealFromBottom,
UIViewControllerAnimationTransitionRevealFromLeft,

UIViewControllerAnimationTransitionFlipFromLeft,
UIViewControllerAnimationTransitionFlipFromRight,
UIViewControllerAnimationTransitionCurlUp,
UIViewControllerAnimationTransitionCurlDown,
} UIViewControllerAnimationTransition;

@interface UIViewController (UIViewController_Expanded)

- (void)dismissModalViewControllerWithAnimatedTransition:(UIViewControllerAnimationTransition)transition;
- (void)presentModalViewController:(UIViewController*)viewController withAnimatedTransition:(UIViewControllerAnimationTransition)transition;

- (void)dismissModalViewControllerWithAnimatedTransition:(UIViewControllerAnimationTransition)transition WithDuration:(float)duration;
- (void)presentModalViewController:(UIViewController*)viewController withAnimatedTransition:(UIViewControllerAnimationTransition)transition WithDuration:(float)duration;

@end

The class interface is very simple, there is a list of the supported transition (these are all available) and four functions that are used invoke these transitions. Two functions to Present a modal and two to dismiss, unfortunately Objective -C does not support default function variables like c++ (correct me if I’m wrong) which is the reason for four functions where I would rather have two.

The class implementation is not as tidy (please feel to improve it) but it works, I’ve tested it on both OS3.0 / OS2.2 and have run into no issues as yet. The only real problem I have with it is that I have to turn views bounds clipping off,  this was so that the UINavigationBar was displayed. If you don’t use a naviagion bar you can remove that code.

Example use:

//
//  CustomViewController.m
//

#import "CustomViewController.h"
#import "UIViewController-Extended.h"

@implementation CustomViewController

...

// -------------------------------------------------------------------
// display the setup view controller
// -------------------------------------------------------------------
- (IBAction) displaySetupPage:(id)_sender
{
if ( setupController == nil )
{
setupController = [[CustomSetupController alloc] initWithNibName:@"Setup" bundle:nil];
}

[self presentModalViewController:controller withAnimatedTransition:UIViewControllerAnimationTransitionFlipFromRight];
}

...

@end

As always the source is provided as is and use it at your own risk, feel free to alter and extend as you see fit. Have fun.

Download : UIViewController-Extended.h, UIViewController-Extended.m

Sample Project : UIModuleTransitionSample

I’ve been plodding away on a project (it’s getting there almost) and one of the things that I really wanted was to provide video tutorials for the user. I really don’t want to package all these videos with the application, really once you’ve watched them once you will probably never look at them again (If I’m wrong about that let me know ).

The new idea is to stream them down to the device, once option was to use the MoviePlayer provided with the sdk. This is fine if you want to host your own video content, but I’m not that confident that I would be able to provide a reliable content service. Whats the alternative then, well there is always  YouTube and the iPhone has a compatible way of playing back videos even inside the application. Unfortunately to play these YouTube videos you need to use a UIWebView where the simplest version of a player would present the user with a link to play the video. Not the most elegant solution but it works, but I was not really happy with the solution.

I decided I could do better, I really wanted a player that provided complete application integration and the resulting Player is just that. The player is easy to use and has simplest API I could come up with, it’s also very easy to integrate with any application. Go on and try it out.

//
//  YouTubePlayer.h
//
//  Created by Robert on 18/12/2009.
//

#import <Foundation/Foundation.h>

@interface YouTubePlayer : NSObject <UIWebViewDelegate, UIAlertViewDelegate>
{
@private
	UIView	  *				  background;
	UIWebView *				  webView;
	UIActivityIndicatorView * activityIndicator;
}

- (void) playbackVideo:(NSString*)_videoID InView:(UIView*)_view;

@end

Example use:

// Inside a UIViewController
- (void) play
{
     // create the video player object
     if ( videoPlayer == nil )
     {
           videoPlayer = [[YouTubePlayer alloc] init];
     }

    // Request the video to be played using the video id
     [videoPlayer playbackVideo:@"MuU00Q3RhDg" InView:self.view];
}

As always the source is provided as is and use at your own risk, also feel free to alter and use as you want I don’t mind. Have Fun.

Download : YouTubePlayer.h, YouTubePlayer.m

Note: You will need to include the SystemConfiguration framework as this is used to check for the availability of a web connection.

Thanks to the following resources that make it possible to build this player:

• iPhone Incubator
• YouTube Developers Blog

I did some work a couple of weekends ago where I implemented a basic line graph view for the iPhone, the code is now up and available. I don’t think it’s the best implementation in the world and it sure as hell could do with some improvement, but I think that of all the code I write Oh well the current implementation works for me at this time, but feel free to grab the code and alter it to your own needs.