iOS Uygulamalarında Kod ile Görsel Öğeler Yaratma

Daha önceki bölümlerde sizlere Interface Builder aracı ile ekranda görsel öğeler oluşturmayı göstermiştik. Ekran tasarımını bu şekilde oluşturmak çok kolay ve hızlı olsa da zaman zaman çeşitli görsellere kod içerisinden müdahale etmemiz gerekebilir. Aslında Interface Builder’ın da yaptığı işlem belirlenen ekran tasarımını koda çevirerek ekranı oluşturmaktır.

Bildiğimiz gibi her ekran (ViewController) bir ana ekran (View) içerir ve oluşturulan görsel öğeler bu ana ekran içinde barındırılır. Herhangi bir UIViewController içerisinde self.view ile çağırdığınız değişken aslında bu ana ekranı simgeler. Oluşturduğunuz bütün görsel öğeler ise bu ana ekranın alt öğeleridir (subview).

Şimdi ilk olarak ekrana kod içerisinden bir UILabel öğesi ekleyelim. Genellikle kod içerisinden oluşturulacak öğeler, Interface Builder kullanılma ihtimali de göz önünde bulundurularak viewDidLoad metodu içerisinde belirlenir. Her görsel öğe gerçekte bir sınıftır ve UIView ana sınıfından türemiştir. Oluşturacağımız UILabel sınıfı da UIView sınıfının bütün özelliklerine sahiptir.

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 120, 40)];
    myLabel.text = @"Ilk label";
    [self.view addSubview:myLabel];    
}

 

Burada yeni bir sınıf oluşturulurken kullanılan alloc / init metodlarından faydalanıyoruz. UIView sınıfları aynı zamanda initWithFrame metoduna sahiptir. Burada CGRectMake ile oluşturulan çerçeve (frame) görsel öğenin ekranın neresinde ve ne kadar büyüklükte olacağıdır. CGRectMake(x,y,width,height) metodunda ilk değişken (x) öğenin ekranında soluna olan uzaklığını belirtir. y değişkeni ise ekranın tepesinden olan uzaklıktır. width değişkeni öğenin genişliğini belirlerken height ise yüksekliğini temsil eder. Yukarıdaki örnekte ekranında solundan ve yukarısından 10 birim uzaklıkta 120 x 40 büyüklüğünde bir UILabel oluşturulmuştur. text değeri ise UILabel’ın ekranda görüntüleyeceği mesajı belirtir. UILabel'a ait ihtiyacımız olan özellikleri değiştirdikten sonra addSubview metodu ile UILabel’ı ekranda görüntüleyebiliriz.

Şimdi ekrana birden fazla UILabel getireceğiz. Bunun için yapmamız gereken, bir for döngüsü içerisinde UILabel öğeleri oluşturarak bunları ana ekrana taşımak olacak:

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 120, 40)];
    myLabel.text = @"Ilk label";
    [self.view addSubview:myLabel];
    
    for(int i = 0; i < 3; i ++) {
        UILabel *aLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 50 + i * 50, 120, 40)];
        aLabel.text = [NSString stringWithFormat:@"Label %d",i];
        [self.view addSubview:aLabel];
    }   
}

 

UIButton oluşturmak için aşağıdaki kodu kullanırız:

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIButton *uiButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    uiButton.frame = CGRectMake(40, 300, 100, 60);
    [uiButton setTitle:@"Bir buton" forState:UIControlStateNormal];
    [uiButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:uiButton];   
}

 

UIButton oluşturmak için UIButton sınıfı içerisinde yer alan buttonWithType: metodundan faydalanırız. Burada sistem tarafından bize sağlanan çeşitli düğme tipleri bulunur. Eğer kendi düğme tasarımına sahipseniz, UIButtonTypeCustom seçeneğini seçmenizi öneririz. Biz düğme işletim sisteminin standart düğmelerine benzeteceğimizden, UIButtonTypeRoundedRect ile ilerledik.

UIButton'ların title özelliği kullanıcının davranışına göre değişmektedir. Düğmenin normal hali ekrana getirildiği ve kullanılabilir (enabled) olduğu durumdur. Eğer düğmenin ENABLED özelliği NO yapılırsa düğme UIControlStateDisabled durumuna geçer. UIControlStateHighlighted durumu ise kullanıcının düğmeye dokunduğu durumdur. Düğmenin seçilmiş olması UIControlStateSelected ile belirtilir. Düğmelerde renk ve metin değişimlerinde, düğmenin o anda bulunduğu durum göz önünde bulundurulmalıdır. addTarget:action:forControlEvents: metodu ise butonun belirli bir etkiye karşı vereceği cevabı belirler. Biz burada düğmeyi aynı ViewController sınıfı içerisinde yer alan buttonClicked: metodunu çalıştıracak şekilde programladık. Son satırda ise addSubview: metoduyla düğmemizi ekrana çekiyoruz.

buttonClicked: metodu ise aşağıdaki şekilde hazırlanmıştır;

 

- (IBAction) buttonClicked:(id)sender {
    UIButton *button = (UIButton *) sender;
    [button setTitle:[NSString stringWithFormat:@"%d",arc4random() * 100] forState:UIControlStateNormal];
}

 

Burada sender değişkeni aksiyonu gönderen görsel öğeyi işaret eder. Biz bu fonksiyonun bir düğme tarafından gönderildiğini bildiğimizden, ilk olarak UIButton sınıfına çeviriyoruz. Ardından her basıldığında rastgele bir integer değeri oluşturmasını ve bunu ekrana getirmesini sağlıyoruz.

Bu şekilde Interface Builder’a bağlı kalmadan birçok görsel öğeyi oluşturabiliriz. Aklınıza gelen her türlü UIView sınıfını yukarıdaki metodlar yardımıyla ekrana getirebilirsiniz. Son olarak görsel öğelere ulaşmak için sık kullanılan iki yöntemi sizlerle paylaşalım:

 

for(UIView *subview in self.view.subviews) {

NSLog(@"%@",[subview class]);

}

 

addSubview metodu ile eklenen bütün görsel öğeler bir UIView içerisinde yer alan subviews dizisi içinde bulunur. Yukarıdaki örnekte ana ekrana yerleştirilmiş bütün görsel öğelerin sınıf adları konsola yazdırılmıştır.

 

 UILabel

 

            2013-09-12 19:32:23.423 KodGorsel[828:a0b] UILabel

            2013-09-12 19:32:23.423 KodGorsel[828:a0b] UILabel

            2013-09-12 19:32:23.424 KodGorsel[828:a0b] UILabel

            2013-09-12 19:32:23.424 KodGorsel[828:a0b] UIButton
    
 

Bununla beraber, eğer belirli bir görsel öğeye erişmek istiyorsanız bu UIView’a bir etiket (tag) verebilirsiniz.

 

UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 120, 40)];
myLabel.text = @"Ilk label";
myLabel.tag = 100;
[self.view addSubview:myLabel];

 

Yukarıdaki örnekte oluşturulan UILabel öğesine etiket olarak 100 değerini verdik. Daha sonradan 100 etiketine sahip elemana ulaşmak için viewWithTag: metodunu kullanırız.

 

id label = [self.view viewWithTag:100];

 

Bu şekilde bir UIView içerisinde yer alan alt öğelerde etiketini bildiğimiz bir öğeye çok hızlı bir şekilde ulaşabiliriz.

 

Uyarı : Eğer aynı etikete sahip birden fazla öğe varsa, viewWithTag: metodu sadece bir tanesini döndürecektir.