Önceki yazılarımda çok ekranlı iPhone uygulamaları yazmanın 3 farklı yolu olduğunu söylemiştim:
- UIScrollView kullanarak tek ekranda birden fazla sayfa göstermek
- UITabBarController kullanarak tab'lı menü yapısı kurmak
- UINavigationController kullanarak tab'sız, derinlikli menü yapısı kurmak.
Bunlardan ilkinin nasıl yapılacağını daha önce ele almıştım. Bugünkü yazımda da ikinci yöntemi ele alacağım. Tab'lıarayüzler tipik olarak az sayıda, birbirinden bağımsız işlevselliğesahip ekranları olan uygulamalarda kullanılmakta. iPhone uygulamalarında kullanılmaları çok kolay çünkü iOS işletim sistemi tabdeğiştirdiğinizde ekrana o tab ile ilgili olan ekranın getirilmesi içinyapılması gereken her şeyi sizin yerinize yapıyor. Şimdi bu tip arayüzesahip bir uygulamanın nasıl yapıldığını basit bir örnek üzerindegöstereceğim.
İlk olarak XCode'u açıp "Tab Bar Application" taslağını kullanarak yeni bir proje yaratın. Tab'lı arayüze sahip bir uygulama geliştirmek için bu taslağı kullanmanız şart değil, "View Based Application" taslağını da kullanabilirsiniz ancak o zaman fazladan bir kaç şey yapmanız gerekiyor bu yüzden ötekini kullanmanız daha mantıklı. Proje ilk yaratıldığında ne durumda olduğunu aşağıdaki resimde görebilirsiniz.
Gördüğünüz üzere, taslak varsayılan olarak 2 adet tab ve her biri bir tab'da gösterilmek üzere ayarlanmış olan 2 adet ViewController içeriyor. MainWindow.xib dosyasının içine bakarsanız, UITabBarController türünden bir nesne, onun içerisinde bir Tab Bar nesnesi ve onun da içerisinde her biri bir adet Tab Bar Item içeren 2 adet ViewController olduğunu görürsünüz. Burada kaç tane ViewController olduğu, Tab Bar'ın kaç tane tab'a sahip olduğunu belirliyor. Eğer yeni bir ViewController yaratıp onu Tab Bar Controller nesnesinin altına sürüklerseniz, tab sayısının 3'e çıktığını görürsünüz. Uygulamayı bu haliyle çalıştırıp neye benzediğine bir bakın.
Şimdi detaylara girmeden önce en basit işlem olan tabisimlerinin değiştirilmesine bakalım. Bunun için tek yapmanız gereken arayüzde gördüğünüz tabların üzerindeki yazılara çift tıklamak. Buna alternatif olarak, sol taraftaki obje listesinden istediğiniz ViewController'ın altındaki Tab Bar Item nesnesini seçip Attributes Inspector bölmesindeki Title özelliğini değiştirebilirsiniz. Aynı yerdeki Image özelliğini kullanarak tab'ların ikonlarını değiştirebilirsiniz. Ben örnek olarak daha önce yazdığım bir uygulamada kullanmış olduğum tab1.png ve tab2.png adındaki 2 ikonu kullandım. Eğer Search, Downloads, Contacts, History gibi yaygın olarak kullanılan standart iOS ikonlarını kullanmak isterseniz Identifier seçeneğini Custom'dan ilgili türe getirebilirsiniz. Ancak bu durumda tab ismini buradan değiştirme şansına sahip olmayacaksınız. Aşağıdaki resimde benim ilk tab item için bu seçenekleri nasıl ayarladığımı görebilirsiniz.
Şimdi tab'lar ile ekranlar arasındaki bağlantının nasıl yapıldığını görebilmek adına taslakla birlikte gelen 2 ViewController'a ait olan .h, .m ve .xib dosyalarını silip yerine yenilerini ekleyeceğiz. İlgili 6 adet dosyayı sildikten sonra en sol taraftaki Project Navigator bölmesinde Ornek adlı klasör simgesi üzerinde sağ tıklayıp New File seçeneğini seçin. Açılan pencereden UIViewController subclass seçeneğini seçip Sayfa1VC adında yeni bir ViewController yaratın. Sonra aynı işlemi tekrar yapıp bu sefer Sayfa2VC adında bir ViewController daha yaratın (Bunları yaratırken ilgili .xib dosyalarını da yaratma seçeneğinin seçili olduğundan emin olun). Yeni yarattığınız bu ViewController'ları Tab Bar ile ilişkilendirmeden önce arayüz dosyalarını açıp her birine birer Label koyun ve View'in arkaplan rengini değiştirin ki hangi tab'ın nereyi açtığını daha rahat görebilesiniz. Benim Sayfa1VC.xib içerisindeki View üzerinde yaptığım değişiklikler resimdeki gibi.
Burada dikkat etmeniz gereken nokta sağ taraftaki "Simulated Metrics" kısmında, "Bottom Bar" özelliğini Tab Bar olarak ayarlamış olmam. Bu seçeneği seçerek XCode'a bu ekranın Tab Bar kullanan bir navigasyon mekanizması içerisinde kullanılacağını belirtmiş oluyoruz. XCode da tasarım yaparken Tab Bar'ın aşağıda kapladığı kısmı da görüp hesaba katabilelim diye ekranın alt kısmına göstermelik bir bar koyuyor. Bu bar'ın kendisi ile hiçbir işiniz yok referans diye konulmuş sadece.
Şimdi tab'ların her biri için yeni bir ekranınız var. Bunları tab'lar ile ilişkilendirmek için MainWindow.xib dosyasına dönüp Tab Bar Controller nesnesi altındaki ViewController nesnelerinin özelliklerini değiştirmeniz gerekiyor. Öncelikle "FirstViewController - First" ismiyle gösterilen ViewController'ı seçin ve Identity Inspector bölmesini açın. Buradaki class özelliği, bu ViewController'ın hangi sınıftan olduğunu belirtiyor. Şu anda FirstViewController olarak ayarlı çünkü hatırlarsanız taslak ile birlikte yaratılan ve ilk tab ile ilişkilendirilmiş olan ViewController'ın adı buydu. Şimdi onu silip yerine Sayfa1VC yazın çünkü ilk tab'a basıldığında onun gösterilmesini istiyoruz. Sonra Identity Inspector penceresinden de arayüzün hangi .xib dosyasından yükleneceğini gösteren NIB name özelliğinin adını da ilgili arayüz dosyasının adı olan Sayfa1VC ile değiştirin. Aşağıda bu iki özelliğin değişmiş hallerinin ekran görüntülerini görebilirsiniz. Label özelliğinin aldığı değerlere takmayın hiç XCode kafasına göre tutarsız isimler veriyor oraya.
Bu işlemlerden sonra uygulamayı çalıştırırsanız şuna benzer bir görüntüyle karşılaşıyor olmanız gerekli.
Böylece ilk Tab Bar'lı uygulamanızı yazmış, daha doğrusu yapmış oldunuz. Dikkat ederseniz hiç kod yazmadık. Çünkü kod ile yapılması gereken 2-3 satırlık şeyleri taslak bizim için yapmıştı. Eğer ne yaptığını görmek istiyorsanız "OrnekAppDelegate.m" adlı dosyayı ve header dosyasını açıp bakabilirsiniz. Burada göreceğiniz tek şey TabBarController nesnesi için bir outlet yaratılmış olması ve uygulama yüklendikten sonra window nesnesinin rootViewController'ı olarak TabBar'ın atanması. Geri kalanı iOS bizim için kendisi hallediyor.