How to create a digital clock with custom images for hours and seconds in iPhone?

I am having 10 images from 0-10 for setting the hour and minutes of my digital clock. I am getting confused on how to set a custom image to digital clock so that it will start working.

This is my code:

- (void)viewDidLoad {
    //timer to recursiv开发者_如何学编程ely call the showClock method.
    timer=[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(showClock) userInfo:nil repeats:YES];  
    [super viewDidLoad];
}



-(void)showClock
{
    NSDate *dateShow= [NSDate dateWithTimeIntervalSinceNow:0];
    NSDateFormatter *dateFormat = [[[NSDateFormatter alloc] init] autorelease];
    [dateFormat setTimeStyle:NSDateFormatterMediumStyle];
    NSString *dateString = [dateFormat stringFromDate:dateShow];


    NSDate * date = [NSDate date];
    NSCalendar * calendar = [[NSCalendar alloc]
                             initWithCalendarIdentifier:NSGregorianCalendar];
    NSDateComponents * components =
    [calendar components:(NSHourCalendarUnit | NSMinuteCalendarUnit) fromDate:date];

    NSInteger hour = [components hour];
    NSInteger minute = [components minute];
    NSInteger firstHourDigit = hour/60;
    NSInteger secondHourDigit = hour%60;
    NSInteger firstMinuteDigit = minute/60;
    NSInteger secondMinuteDigit = minute%60;
    [minfirstImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"0.png", firstHourDigit]]];
    [minsecondImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%0.png",secondHourDigit]]];
    [secfirstImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%0.png",firstMinuteDigit]]];
    [secSecondImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%0.png",secondMinuteDigit]]];


}

When I run my app, the imageview is not displayed with the image. What may be the problem? Is there any problem in the calculation?

Rani...

I think used different images for timing is increase the your apps size , so i have one suggestion for you just check this code and make changes as per your requirement i think this is best way to display time as you want,,

for this code you have to create only one background image without text...

- (void)viewDidLoad {
        [super viewDidLoad];

        [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(showClock) userInfo:nil repeats:YES];  
        // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
        // self.navigationItem.rightBarButtonItem = self.editButtonItem;
    }



-(void)showClock
{
    NSCalendar *cal = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSDate* now = [NSDate date]; 
    int h = [[cal components:NSHourCalendarUnit fromDate:now] hour];
    int m = [[cal components:NSMinuteCalendarUnit fromDate:now] minute];
    int s = [[cal components:NSSecondCalendarUnit fromDate:now] second];
    [cal release];


//    NSInteger firstHourDigit = hour/60;
//    NSInteger secondHourDigit = hour%60;
//    NSInteger firstMinuteDigit = minute/60;
//    NSInteger secondMinuteDigit = minute%60;

    NSLog(@"\n Time :%d : %d : %d",h,m,s);


    [imgViewHour setImage:[self getImageFor:[NSString stringWithFormat:@"%d",h]]];
    [imgViewMnt setImage:[self getImageFor:[NSString stringWithFormat:@"%d",m]]];
    [imgViewSec setImage:[self getImageFor:[NSString stringWithFormat:@"%d",s]]];


}



-(UIImage *)getImageFor:(NSString*)txt {


        int w =50,h=35;


        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(3, 3, w-6, h-6)];
        lbl.text = txt;
        lbl.textColor = [UIColor whiteColor];
        lbl.textAlignment = UITextAlignmentCenter;
        lbl.font = [UIFont fontWithName:@"Arial" size:18];
        lbl.font = [UIFont boldSystemFontOfSize:14];
        [lbl setBackgroundColor:[UIColor clearColor]];
        lbl.shadowOffset=CGSizeMake(0,2);
        lbl.shadowColor = [UIColor blackColor];


        UIView *viewImage = [[UIView alloc] initWithFrame:CGRectMake(0, 0, w, h)];

        [viewImage setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"imageBackGround.png"]]];
        [viewImage addSubview:lbl];

        UIGraphicsBeginImageContext(viewImage.bounds.size);
        [viewImage.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *Image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        [viewImage release];

        return Image;

    }

Thanks ... :)

Take images name as from 0.png-9.png and try with below code it will help you

NSDate *dateShow= [NSDate dateWithTimeIntervalSinceNow:0];
NSDateFormatter *dateFormat = [[[NSDateFormatter alloc] init] autorelease];
[dateFormat setTimeStyle:NSDateFormatterMediumStyle];
NSString *dateString = [dateFormat stringFromDate:dateShow];


NSDate * date = [NSDate date];
NSCalendar * calendar = [[NSCalendar alloc]
                         initWithCalendarIdentifier:NSGregorianCalendar];
NSDateComponents * components =
[calendar components:(NSHourCalendarUnit | NSMinuteCalendarUnit) fromDate:date];

NSInteger hour = [components hour];
NSInteger minute = [components minute];
NSInteger firstHourDigit = hour/10;
NSInteger secondHourDigit = hour%10;
NSInteger firstMinuteDigit = minute/10;
NSInteger secondMinuteDigit = minute%10;
int res=0;
for(int i =0;i<4;i++)
{

    if(i==0)
         res = firstHourDigit;
    else if(i==1)
        res = secondHourDigit;
    else if (i==2)
        res = firstMinuteDigit;
    else 
        res = secondMinuteDigit;
        NSString *str_imageName;
switch (res) {

    case 0:
        str_imageName=@"0.png";
        break;
    case 1:
        str_imageName=@"1.png";
        break;
    case 2:
        str_imageName=@"2.png";
        break;
    case 3:
        str_imageName=@"3.png";
        break;
    case 4:
        str_imageName=@"4.png";
        break;
    case 5:
        str_imageName=@"5.png";
        break;
    case 6:
        str_imageName=@"6.png";
        break;
    case 7:
        str_imageName=@"7.png";
        break;
    case 8:
        str_imageName=@"8.png";
        break;
    case 9:
        str_imageName=@"9.png";
        break;

    default:
        break;
}
    if(i==0)
        [minfirstImage setImage:[UIImage imageNamed:str_imageName]];
    else if(i==1)
        [minsecondImage setImage:[UIImage imageNamed:str_imageName]];
    else if (i==2)
        [secfirstImage setImage:[UIImage imageNamed:str_imageName]];
    else 
        [secSecondImage setImage:[UIImage imageNamed:str_imageName]];


}

Maintain an array of UIImages and then break down the string character by character to check out what number there is:

create array for images
load images into array

create array for imageviews
put imageviews into array

loop 5 times
if we're on 2 then skip // dot
else create substring from that character and call integerValue on it
use that as index into array
set imageview at index to image at index