iPhone Kursu 4. Ders: Tab Bar Controller

Yarın kursumuzun beşinci dersi var, bense daha dördüncü dersi yeni yazıyorum. Bugün bütün günümü üçüncü dersin ikinci kısmı olan Navigation Controller yazısını yazmaya harcadığım için -ve tahminimden çok daha uzun sürdüğü için- Tab Bar Controller’a anca sıra geldi. Uzun uzun yazmak gerçekten yorucu oluyor, ileride Video Blog şekline geçmeyi düşünebilirim.

Bu kez kısa kısa gitmeye çalışacağım. Bir önceki uzuun yazıyı iyice sindirdiyseniz temelde ondan farklı hiç bir şey yapmadığımızı göreceksiniz.

Bu dersde sıfırdan Tab Bar Controller kullanmayı göstermişti hocamız. Fakat notlarımı şirkette unuttuğum için dersteki örnek yerine yine bir önceki yazıdaki gibi Yemek Tarifleri uygulamasının başka bir versiyonu ile yazıya devam edelim. Tab Bar kullanmak asıl amacımız olacağı için daha önceki yazıda “Etli Yemekler, Zeytinyağlılar ve Çorbalar” şeklinde olan kategorileri bu kez Tab Bar’ımızın sekmeleri olarak düşünelim. Sekmelere basıldıkça birer liste çıksın ve içinde yemekler sıralansın (Table View Controller). En son sekme olarak da “Hakkımızda” sekmesini ekleyelim. Buna basıldığında programımız hakkında küçük bir bilginin yer aldığı ekran görünsün (Custom View Controller).

Xcode’umuzu açıp Yeni Proje olarak Windows Based Applicatation taslağını seçerek işe başlayalım. Uygulamanın adı YemekTarifleri olsun. Bir önceki dersdeki gibi yine MainWindow.xib dosyamıza çift tıklayarak Interface Builder’ı açalım. Document penceresinde yapayalnız duran Window’un hemen yanına Library’den bu kez Tab Bar Controller’ı sürükleyip bırakalım (Resim 1), geçen sefer Navigation Controller sürüklemiştik. IB’deki bu controllerimizi Xcode’da uygulamamızla ilişkilendirebilmek için YemekTarifleriAppDelegate.h dosyasında UITabBarController *cntTabBar; ifadesiyle UITabBarController tipinde cntTabBar adıyla bir değişken oluşturup bunun @property ifadesini yazalım. YemekTarifleriAppDelegate.m dosyasında @synthesize cntTabBar; ifadesini de koyalım ki içimiz rahat olsun. Yine bir önceki yazıda olduğu gibi uygulama başlatılınca Tab Bar Controller’imizin view’i Window’a subView olarak eklenebilmesi için (aksi halde beyaz window’a bakakalırız) YemekTarifleriAppDelegate.m dosyasındaki en üstteki application (didFinishLaunchingWithOptions parametreli olan) fonksiyonunun içine [self.window addSubview:cntTabBar.view]; ifadesini yazalım. Burda lütfen dikkat ediniz, cntTabBar bir controller’dir, Window’a subview eklerken controller’i değil, ona ait olan view’i  (cntTabBar.view) kullanıyoruz (Resim 2).

Şimdi IB’ye dönüp Tab Bar’ımızı Xcode’da tanımladığımız cntTabBar değişkeni ile eşleştirebiliriz. Documents’de Tab Bar Controller seçiliyken inspector’un 2. sekmesindeki listede “New Referencing Outlet” öğesinin sonundaki yuvarlağı kulağından tutup Documents’deki Yemek Tarifleri App Delegate nesnesinin üzerine bırakalım. Açılan listeden cntTabBar’ı seçelim (zaten sadece o var). İşte şimdi projeyi kaydedip uygulamayı çalıştırdığımızda beyaz ekran yerine Tab Bar’ımızı görüyoruz (Resim  3).

Yukarıda dediğimiz üzere uygulamamızın tab bar’ında dört tane sekme olsun istiyoruz: Etli Yemekler, Zeytinyağlılar, Çorbalar ve Hakkında. Hakkında ekranı hariç diğer bütün ekranlarda bir önceki yazıda gördüğümüz Navigation Based yapı olsun (yani listeden bir öğeye tıkladığımızda bir iç sayfaya gitsin) istiyoruz. Hakkında’ya basınca da içinde basit bir yazı olan custom view penceresi çıksın istiyoruz.

MainWindow.xib dosyasını IB’de açtığımızda Documents penceresinde Tab Bar Controller altında şimdilik iki öğe görüyoruz. İkisi de Custom View controller şeklinde. Bizim istediğimiz ise üçü Navigation Controller şeklinde olması, dördüncüsünün Custom View Controller olması. Yapmamız gereken; halihazırda iki tane olan Tab Bar Controller altındaki custom view’lardan birini silmek ve Library’den üç tane Navigation Controller’i Documents’deki Tab Bar Controller’ın üstüne sürüklemek. Tab Bar’daki butonların sırasını tasarım ekranından sürükleyerek değiştirebiliriz (Resim4). Butonların üzerindeki yazıları da çift tıklayarak düzenleyebilirsiniz. Tab bar’ların ikonlarını (simgelerini) Inspector penceresinden değiştirebilirsiniz. Bunun için 32×32 ebadında png ikonları önceden hazırlayıp Resources klasörü altına sürüklemelisiniz. Sürüklerken “Copy Items into destination group” seçeneğini işaretlemeyi unutmayın. Aksi halde dosyayı bilgisayarınızda bulunduğu yerden göstermeye çalışır. Tab bar ikonları Xcode tarafından otomatik olarak mavi-siyah tonda görünür. Sizin özel bir gayret sarfetmenize gerek yok. Fakat buraya koyacağınız ikonlar şu örnekteki gibi transparan olursa rahat edersiniz.

Etli Yemekler için yapacağımız şeyler, diğer ikisi için de aynı olacağından sadece ilk tab için yapılacakları anlatıp sonra Hakkında tabından bahsedeceğim. Yazının sonundaki linkten uygulamanın kodunu indirip diğer detaylara göz atabilirsiniz.

Etli Yemekler tab’ına tıklandığında Navigation Controller yapısı altında bir Table View görünmesini istiyoruz. Burda listelenen yemeklerden herhangi birine tıkladığımızda bir Custom View gösterip yemeğin tarifini buraya koyabiliriz. Her yemek için ve hatta diğer kategorilerin altındaki yemekler için bu zahmete girmek tabi ki bir şeyleri yanlış yaptığımızın en büyük kanıtı ama burda amaç en efektik şekilde kod yazmak değil mevzuyu anlatmak! Nitekim inşallah bir sonraki yazıda bu hamaliyeyi daha da kısaltan yapıları göreceğiz. (Yazıyı bitirmeden kursa gitmem gerekti, beşinci dersde bu bahsettiğim amelelikten kurtulma metodunu görmüş olduk.)

IB’de Documents penceresi açıkken Library’den Table View Controller nesnesini tutup Documents’deki Tab Bar Controller’ının altındaki birinci Navigation Controller (Etli Yemekler) altındaki View Controller (Root View Controller) öğesinin üstüne bırakalım. Bu sayede default olarak Custom View şeklinde duran Navigation Controller’ın view yapısı artık bir Table View Controller’a dönüşmüş oldu. Table View Controller’imizin Table View’ini zaten Documents’e görüyoruz. Bunun kodunu oluşturacak class’ları oluşturalım.

Xcode’da Classes klasörüne sağ tıklayıp Add -> New File -> UIViewController Subclass (UITable View Subclass seçili olsun, With xib … seçili olmasın) yolundan giderek EtliYemeklerViewController.m dosyamızı (.h dosyasını) oluşturalım. Etli yemeklerimiz bir önceki yazıdaki gibi basit bir diziden gelsin istediğimiz için EtliYemeklerViewController.h dosyasında dizimizi tanımlayıp EtliYemeklerViewController.m dosyasında ViewDidLoad fonksiyonu içinde diziyi doldurup (ayrıca self.title=@”Etli Yemekler”; ifadesi ile başlığı da setlemeyi unutmayın) Table View ile ilgili meşhuuur üç fonksiyonu da dizinin her elemanı Table View’in bir hücresine gelecek şekilde düzenleyelim. Bunlarla ilgili ekran çıktıları bir önceki yazıda bol bol vardır efendim.

XCode’daki işimizi bitirdiğimizde bu yazdığımız class dosyalarının IB’deki ilgili Table View Comtroller’ımızın kaynak dosyaları olduğunu belirtmek için Inspector’un son tab’ındaki Class değerini EtliYemeklerViewController olarak değiştirmeliyiz (Resim 6).

Uygulamayı çalıştırdığımızda Etli Yemekler hemen Table View’ımızda listelendiğini görmekteyiz. Bunlardan herhangi birine tıklandığında tarifi içeren bir custom view gelsin istiyorduk. XCode’da Classes klasörüne sağ tıklayıp Add -> New File -> UIView Controller SubClass elemanını (sadece With Xib for user interface seçili olsun) oluşturalım. Dosya adı olarak OrmanKebabiViewController.m yazalım. OrmanKebabiViewController.xib dosyasını projemiz düzenli olsun diye Resources klasörüne taşıyalım ve çift tıklayıp IB’de açalım. Orman Kebabı tarifine dair bilgileri ve resimleri bu view üzerine yerleştirelim (Resim 7).

Diğer tarifleri de tek tek yapmamız gerekiyor. Tabi ki yukarıda da değindiğimiz üzere aslında bu iş böyle yapılmaz. Normalde tariflerin görüneceği sayfa bir kere tasarlanır. Şurasında yemeğin fotoğrafı, şurda adı, şurda malzemeleri şurda da tarifi görünsün şeklinde bir kere IB’de tasarım yapılır. Daha sonra veriler sabit bir diziden, ya da bir xml’den ya da bir veritabanı dosyasından çekilerek önce Table View’larda gösterilir. Table View’da ilgili satıra tıklayınca yine bu veri kaynağından ilgili tarif ve detay bilgileri çekilerek IB’de oluşturulan şablona yerleştirilir. Fakat bunu inşallah bir sonraki dersimizde göreceğiz. Bu yazıdaki uygulamamızın asıl amacı Tab Bar Controller’ın farklı alt controller’larla nasıl kullanıldığını örneklemek.

Konuya geri dönelim, diğer bütün tarifler için Xcode’da Classes klasörüne sağ tıklayıp Add->New File->UIView Controller Sub Class oluşturup (sadece Xib seçili olsun) dosya adına DigerTariflerViewController.m diyelim. DigerTariflerViewController.xib dosyasına çift tıklayarak ekrana herhangi bir şeyler yazalım.

Şimdi EtliYemeklerViewController.m dosyasını açıp Table View Controller’la ilgili dördüncü fonksiyonu (- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath ) amacımıza uygun bir şekilde kodlayalım. EtliYemeklerViewController’daki tablonun ilk satırına tıklandığında OrmanKebabıViewController’ın view’i, diğer satırlar tıklandığında DigerTariflerViewController’ın view’ı gelsin istiyoruz. Tabi öncelikle EtliYemeklerViewController.m dosyasının ilk kısmında #import “OrmanKebabıViewController.h” ve #import “DigerTariflerViewController.h” yazmalıyız. Sonra yukarda bahsettiğimiz fonksiyonu düzenlediğimizde Etli Yemekler kısmı tamamdır (Resim 8).

Yazımızın başında Tab Bar uygulamamızın ilk üç tabının Navigation Controller şeklinde ilerleyeceğini, Hakkımızda tabına tıklandığında ise Custom View ile oluşturulmuş bir ekranın görüntüleneceğini belirtmiştik. Etli Yemekler kısmını gördüğümüz için diğer iki tab da bu şekilde devam edecek, dolayısı ile tekrar tekrar yazmanın bir manası yok.

Hakkımızda Tab’ına tıklanınca gelmesini istediğimiz ekranı oluşturalım. Xcode’da Classes klasörüne sağ tıklayıp Add->New File ->UIView Controller Subclass (sadece Xib seçili olsun) oluşturup dosya adını HakkindaViewController.m yapalım. HakkındaViewController.xib dosyasına çift tıklayarak IB’de açalım ve içine koymak istediğimiz bilgileri koyalım, bu view Navigation Controller’a dahil olmadığından tepesinde Title Bar çıkmayacaktır, bunu da Library’den sürükleyip ekleyebiliriz (Resim 9).

MainWindow.xib dosyasını IB’de açıp Documents penceresinden Tab Bar Controller altındaki dördüncü tab’a ait view controller seçili haldeyken Inspector’un 1.tabından Nib Name değerini HakkindaviewController olarak değiştirelim (Resim 10).

İşte hepsi bu. Uygulamamız tamamdır. Buradan indirebilirsiniz.

[nggallery id=10]