Bu yazımda CoreGraphics kullanarak basit bir analog saat uygulaması yapmayı anlatacağım. “Analog saati ne yapalım arkadaş ne gereği var” diyebilirsiniz ve haklısınız da. :) Çünkü aklı başında olan hiç kimse sizden iPhone için analog saat uygulaması istemeyecektir. Ama en azından temel olarak çizdirme işlemi nasıl gerçekleşiyor bunu öğrenebilirsiniz. Daha sonra birkaç araştırmayla kendinizi geliştirebilirsiniz. Şimdi yapacağımız uygulamada neler olacağından bahsedeyim. Saat, dakika ve saniyeyi çizdireceğiz ve bir buton yardımıyla o anki görüntüyü yakalayıp başka bir view içerisinde göstereceğiz.
Peki bu işlemleri yapmak için nelere ihtiyacımız var?
2 adet UIImageView ve 1 adet UIButton işimizi görecektir :)
Öncelikle New Project sekmesini tıkladıktan sonra açılan pencerede View-based Application’ı seçip choose butonuna basın ve projenin adını belirleyin. Ben AnalogSaat olarak belirledim.
Projemizi oluşturduktan sonra kodumuzu yazmaya başlayabiliriz. Bildiğiniz üzere *.h ve *.m uzantılı dosyalarımız bulunmakta. *.h uzantılı dosyamızda propertyler ve metotların prototipleri yazılır. *.m uzantılı dosyada ise bu oluşturduğumuz metotlar doldurulur. Şimdi *.h uzantılı dosyamızın içerisini ihtiyacımız olan metotlar doğrultusunda dolduralım.
#import <UIKit/UIKit.h>
@interface AnalogSaatViewController : UIViewController {
}
-(void) SaatiCiz:(NSInteger)saat:(NSInteger) dakika:(NSInteger)saniye;
-(void) TikTak;
-(void) GoruntuAl;
@end
Yukarıda gördüğünüz üzere 3 adet metotumuz var.
SaatiCiz metodu dışarıdan NSInteger tipinde 3 adet değer almakta. Bu metot sayesinde aldığımız değerlere göre çizgilerimizi çizeceğiz.
TikTak metodu dışarıdan herhangi bir değer almamakta. Bu metotu timer ile 1 saniyede bir çağıracağız böylece her saniyede işlem yapacağız.
GoruntuAl metotu ise istediğimiz zaman saatin o anki görüntüsünü almaya yarar.
Şimdi ise *.m uzantılı dosyamıza geçelim. Uygulamamız çalışmaya başladığı anda ekranımıza bazı nesneler ekleyeceğiz. Bunun için ben UIViewController nesnesinin viewDidLoad metotunu kullanacağım. Şimdi viewDidLoad metotumuzu yazalım.
- (void)viewDidLoad {
[super viewDidLoad];
//Saatin cizilecegi imageView nesnemizi olusturup ozelliklerini atiyoruz.
UIImageView *imgSaat =[[UIImageView alloc] init];//View olusturuluyor ve retain sayisi 1 artiriliyor.
imgSaat.tag = 1; // tag 1'e esitlendi.
imgSaat.frame = CGRectMake(0, 0, 300, 300);//Boyutlari ve koordinatlari belirlendi.
[self.view addSubview:imgSaat]; //self.view'a eklendi.
[imgSaat release];//ekleme isleminden sonra release ediliyor boylece retain sayisi 1 azaltiliyor.
//Saatin goruntusunu yakalayip gosterecegimiz imageView nesnemizi olusturup ozelliklerini atiyoruz.
UIImageView *imgGoruntu =[[UIImageView alloc] init]; //View olusturuluyor ve retain sayisi 1 artiriliyor.
imgGoruntu.tag = 2; //tag 2'ye esitlendi.
imgGoruntu.frame = CGRectMake(150, 300, 150, 150);//Boyutlari ve koordinatlari belirlendi.
[self.view addSubview:imgGoruntu]; //self.view'a eklendi.
[imgGoruntu release]; //ekleme isleminden sonra release ediliyor boylece retain sayisi 1 azaltiliyor.
UIButton *btnGoruntu = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //View olusturuluyor.
//ama alloc metodu kullanmadigimiz icin retain uzerinde degisiklik yapilmadi
btnGoruntu.tag = 3; //tag 3'e esitlendi.
[btnGoruntu addTarget:self action:@selector(GoruntuAl) forControlEvents:UIControlEventTouchUpInside]; //Butona tıklandığında çalışacak metodu belirliyoruz.
[btnGoruntu setTitle:@"Goruntu Al" forState:UIControlStateNormal]; //Butonda yazılacak metini belirliyoruz.
btnGoruntu.frame = CGRectMake(0, 380, 150, 50);// Boyutlar ve koordinat ayarlanıyor.
[self.view addSubview:btnGoruntu]; //Self.view’a ekleniyor
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(TikTak) userInfo:nil repeats:YES];//
}
Program açıldığı zaman yapılacaklar bölümünü bitirdik. Şimdi ise sonrası. Çizdirme işlemlerine geçmeden önce butona tıklandığımızda yakalanacak olan görüntüyü halledelim :) Gayet basit bir işlem sadece bir view’dan diğerine kopyalama işlemi yapacağız.
-(void) GoruntuAl
{
Tag’i 1 olan yani üzerine saat çizdirdiğimiz imageView nesnemizi alıyoruz.
UIImageView *imgSaat = (UIImageView *)[self.view viewWithTag:1];
Tag’i 2 olan yani üzerinde yakaladığımız görüntüyü göstereceğimiz imageView nesnemizi alıyoruz.
UIImageView *imgGoruntu = (UIImageView *)[self.view viewWithTag:2];
Burada ise saatin o an ki halini yakalayıp gösteriyoruz.
[imgGoruntu setImage:imgSaat.image];
}
Şimdi ise NSTimer tarafından her 1 saniyede bir çağrılan TikTak metotumuzu yazalım.
-(void) TikTak
{
NSGregorianCalendar tipinde bir takvim oluşturuyoruz.
NSCalendar *takvim = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
Bugünü saat,dakika ve saniye olarak alıyoruz.
NSDateComponents *tarih = [takvim components:(NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit) fromDate:[NSDate date]];
Saat, dakika ve saniyeyi birer değişkene atıyoruz.
NSInteger saat = [tarih hour];
NSInteger dakika = [tarih minute];
NSInteger saniye = [tarih second];
Çizim işlemini yeni aldığımız saat,dakika ve saniye değerleriyle başlatıyoruz.
[self SaatiCiz:saat:dakika:saniye];
Takvimi release ediyoruz.
[takvim release];
}
İşte geldik yolun sonu olan çizdirme işlemine :)
-(void) SaatiCiz:(NSInteger)saat:(NSInteger) dakika:(NSInteger)saniye
{
Öncelikle orta noktamızı belirliyoruz.
int x = 150, y = 150;
float st,dk,sn;
Analog saat olduğu için 12 üstü bir değer işimizi görmeyecek bu yüzden saati eğer 12’den büyükse modunu alarak istediğimiz hale getiriyoruz.
saat = (saat>=12)?saat%12:saat;
Saniyemizi açı cinsinden yazıyoruz.
sn = (saniye == 360)?0:(saniye*6) - 90;
Dakikamızı açı cinsinden yazıyoruz.
dk = (dakika+saniye/60.0)*6 - 90;
Saatimizi açı cinsinden yazıyoruz.
st = (saat+dakika/60.0)*30 - 90;
Üzerine çizim yapacağımız imageView’imizi alıyoruz.
UIImageView *img = (UIImageView *)[self.view viewWithTag:1];
Çizim yapacağımız imageView’in boyutlarına göre ImageContext oluşturuyoruz.
UIGraphicsBeginImageContext(img.frame.size);
Üzerinde işlem yapacağımız context’i alıyoruz.
CGContextRef context = UIGraphicsGetCurrentContext();
Şimdi ise saat kısmı çizdiriliyor..
CGContextSetRGBFillColor(context, 0.6, 0.6, 0.7, 1);
CGContextMoveToPoint(context, x, y);
CGContextAddArc(context, x, y, 100, st*M_PI/180, (st+4)*M_PI/180, 0);
CGContextClosePath(context);
CGContextFillPath(context);
Şimdi ise dakika kısmı çiziliyor.
CGContextSetRGBFillColor(context, 1, 0, 1, 1);
CGContextMoveToPoint(context, x, y);
CGContextAddArc(context, x, y, 100, dk*M_PI/180, (dk+3)*M_PI/180, 0);
CGContextClosePath(context);
CGContextFillPath(context);
Şimdi ise saniye kısmı çiziliyor.
CGContextSetRGBFillColor(context, 1, 0, 0, 1);
CGContextMoveToPoint(context, x, y);
CGContextAddArc(context, x, y, 100, sn*M_PI/180, (sn+2)*M_PI/180, 0);
CGContextClosePath(context);
CGContextFillPath(context);
Çizdirme işlemi bittikten sonra oluşan resmimizi imageView nesnemize aktarıyoruz.
[img setImage:UIGraphicsGetImageFromCurrentImageContext()];
En son olark ImageContext’imizi kapatıyoruz.
UIGraphicsEndImageContext();
}
Uygulamanın ekran görüntüsü aşağıdaki gibidir.
Umarım faydalı olmuştur. Uygulamanın proje dosyasını aşağıdaki linkten indirebilirsiniz.