UITabBarController Implementation
Herkese merhabalar. Bu yazımızda yaygın UI komponentlerinden olan UITabBarController kullanımından bahsedeceğiz.
Öncelikler UITabBarController nedir ondan bahsedelim. UITabBarController sayfaların altta verilen bir bar yardımı ile kolayca geçişinin gerçekleştirildiği önemli bir arayüz komponentidir. IOS temel uygulamaların birçoğunda da kullanılan bu komponent kullanıcı deneyimi açısından çok önemlidir. Aşağıdaki resimde ios saat uygulaması olan Clock uygulamasının görünümü verilmiştir.
Görüldüğü gibi aslında günümüzde birçok uygulamada kullanılan UITabBarController aslında bekleninenin aksine XCode Interface Builder yardımı ile çok kolayca tasarlanabilen bir komponenttir. Şimdi tasarıma başlayabiliriz. Öncelikle yeni bir proje açıyoruz.
Daha sonra Main.storyboard’ a tıklıyoruz. Halihazırda bulunan viewcontroller’ı silip sol üstte bulunan + butonuna basarak Library’den bir adet UITabBarController seçiyoruz.
TabBarController storyboard’a geldiğinde default olarak iki adet. viewcontroller ile gelmektedir.
Siz buna ek olarak daha fazla viewcontroller ekleyebilirsiniz. 5 view controller’a kadar tab bar’da görünür. 5'den fazla eklendiğinde yine default olarak beşinci tab bar item daha fazla butonuna döner ve kalan view controller’lar table view içerisinde gösterilir. Bu da XCode’un bize sunduğu önemli bir özelliktir.
Öncelikle ilk ve ikinci view controller geçişlerini anlamak adına view controller’lara birer adet Label atıyoruz. Daha sonra bu label’lara First VC ve Second VC isimlerini veriyoruz.
Daha sonra view controller’larda bulunan barlara tıklayarak attributes inspector üzerinden isimlerini değiştiriyoruz.
Daha sonra arkaplan renkerlini değiştirip uygulamayı çalıştırıyoruz.
Bu işlemin ardından belirleyeceğimiz iki adet system iconunu yine attributes inspector içerisinde image kısmından ayarlıyoruz. Ben iki adet system ikonu kullandım.
Bu işlemin ardından TabBarController üzerindeki bara tıklayarak yine attributes inspector içerisinde bar tint ile image tintlerini değiştiriyorum.
Tekrar çalıştırıp görünüme baktığımız zaman aşağıdaki gibi olması gerekmektedir.
Son olarak default olarak gelen iki view controller’a iki adet daha view controller ekliyoruz.
Daha sonra bu view controller’ları UITabBarController üzerinden mouse’un sağ tık’ı yardımıyla üzerine geliyoruz.
Daha sonra çıkan menüden Relationship Segue’i seçiyoruz. Böylelikle view controller’ımızı tab bar içerisine gömmüş oluyoruz.
Daha sonra bu view controller’lara da diğerlerine yaptığımız gibi arkaplan renk ayarlaması icon ve bar ayarlaması yapıyoruz.
Görüldüğü gibi oldukça kolay şekilde entegre edilebile UITabBarController’ı sizde projelerinizde tercih edebilirsiniz. Ayrıca tab bar’ı customize etmek isterseniz IOS SDK’sında bulunan UIBezierPath yardımı ile çizdirerek daha custom ve güzel Tab Bar’lar oluşturabilirsiniz. Biraz başlangıç seviye bir yazı oldu. Umarım yeni başlayan arkadaşlara faydalı olur. İyi kodlamalar✋🏻.
