Swift ile Uygulama Geliştirme: Interface Builder
Interface Builder sayesinde sürükleyip bırakarak uygulamanız için mükemmel arayüzler oluşturun!
Merhaba TurkishKit okuyucuları! 👋🏻 Bugünkü yazımızda Xcode içinde bulunan ve arayüz elemanlarını sürükleyip bırakarak güzel ve kolay bir şekilde arayüz oluşturmamızı sağlayan Interface Builder’ı öğreneceğiz.
Interface Builder Nedir?
Storyboard ile çalışan Interface Builder, Xcode içinde bulunan ve görsel olarak arayüzler oluşturmak için kullanabileceğiniz bir arayüz oluşturucu araçtır. Sürükle ve bırak mantığı ile çalışan Interface Builder, güzel arayüzleri çok kolay bir şekilde tasarlamamıza imkan sağlar.
Hadi Başlayalım!
Storyboard Sayfasına Gitmek
Projenizde sol taraftan “Main.storyboard” dosyasına tıklayacak olursanız, ekranın ortasında beyaz bir kanvas göreceksiniz. Bu, uygulamanızı açtığınızda göreceğiniz ilk ekrandır. Tabii uygulamanıza yeni ekranlar eklemek için yeni kanvaslar eklediğinizde bunu değiştirebilirsiniz. Projenizde hiç bir şey yapmadan direkt olarak emülatörde çalıştırırsanız, beyaz ve boş bir sayfa göreceksiniz çünkü henüz hiçbir değişiklik yapmadık.
Açılacak Storyboard’ları Seçmek
Büyük ihtimalle eğer uygulamanızın başlangıç sayfasını nasıl değiştirebileceğinizi veya farklı storyboard’lar ile nasıl kullanabileceğimizi merak etmişsinizdir. Projenizin genel görünümüne gittikten sonra göreceğiniz “Main Interface” alanı uygulamanızın ayağa kalktıktan sonra, yani açılmak için hazır olduğunda hangi storyboard’ı kullanacağını belirler. Şu anda sadece Main isimli storyboard’ımız olduğu için main storyboard’ı seçebiliyoruz.
Projemizin başlangıç storyboard’ı olduğu gibi her storyboard’ın da bir başlangıç sayfası vardır. Başlangıç sayfasını değiştirmek oldukça kolaydır. Kanvasın sol tarafında gördüğünüz oku istediğiniz kanvasa sürükleyerek o kanvası başlangıç sayfası haline getirebilirsiniz.
Document Outline View
Ekranın sol tarafında View Controller’leri gördüğünüz kısım “Document Outline View” olarak adlandırılır. Bu kısımda ekrandaki bütün View Controller’leri ve onların içindeki bütün arayüz elemanlarını hiyerarşik bir yapı ile görebilirsiniz. Daha önce bir tasarım programı kullandıysanız, bu alana aşina olabilirsiniz. Bir tasarım elemanının yanında bulunan oka basarak o elemanın altında bulunan tasarım elemanlarını da görebilirsiniz. Aynı zamanda bu sekmeden bir elemanı seçtiğinizde, kanvas üstünde seçtiğiniz eleman mavi olarak gözükür.
Burada kısa fakat önemli bir not vermek istiyorum. Bir View Controller seçmek için Document Outline View üzerinden seçebilir veya kanvasımızın üstünde bulunan dikdörtgene basabilirsiniz. Kanvasın içinde bulunan beyaz alana basarsanız, View Controller’i yerine içerideki View’i seçmiş olursunuz
Arayüz elemanı eklemek
Eğer bir sayfaya arayüz elemanı eklemek istiyorsak, sağ üst tarafta bulunan + ikonuna basarak “Object Library” yani arayüz eleman kütüphanesini açabiliriz. Burada iOS işletim sisteminde kullanılabilecek bütün arayüz elemanlarını bulabilirsiniz.
Object Library içerisinden bir elemanı arayüzümüze eklemek istediğimizde yapmamız gereken tek şey o elemanı tutup kanvasımızın içerisine sürüklemektir. Bu şekilde istediğimiz elemanı arayüzümüze eklemiş oluruz. Hadi bir buton ekleyelim!
Butonu ekledikten sonra ekranda çıkan bazı çizgileri farketmiş olabilirsiniz. Bu çizgiler Xcode’un bizim için otomatik olarak oluşturduğu layout guide’lar yani tasarım rehberleridir. Layout guide’lar arayüz elemanlarımızın daha düzenli olmasını, farklı arayüz elemanları arasındaki boşlukları ayarlamamızı, arayüz elemanlarını doğru konumlandırmamızı ve bunun gibi birçok şeyi bize sağlar.
Quick Help Inspector
“Quick Help Inspector” sağ tarafta bulunan, üzerinde bulunmuş olduğunuz arayüz elemanı hakkında size bilgi veren ve bir çok özellik ekleyip değiştirmenizi sağlayan kısımdır. Burada “Identity Inspector” ve “Attribute Inspector” gibi birden çok sekme vardır. Merak etmeyin, bunların hepsini bu yazı içerisinde ele alacağız 😎
Identity Inspector
Bu kısımda seçili olan arayüz elemanının hangi sınıfa ait olduğunu görebilirsiniz. Örneğin, oluşturduğumuz buton Apple’ın kendi üretmiş olduğu bir buton olduğu için UIButton sınıfındandır. Kendimiz özel bir buton üretip, (örneğin daire şeklinde bir buton) ürettiğimiz sınıfı kullanmak için buradan arayüz elemanının sınıfını kendi oluşturduğumuz sınıf ile değiştirebiliriz.
Attribute Inspector
Bu kısım, seçili olan arayüz elemanının üzerinde birçok ayar yapabilmemizi sağlıyor. Örneğin UIButton üzerinde olduğumuz için, butonun arkaplan rengi, yazı rengi, yazı kalınlığı, gölge rengi gibi bir çok özelliği değiştirebiliyoruz.
Size Inspector
Bu kısımda seçili olan arayüz elemanının boyutunu ve X,Y konumunu görebilir ve değiştirebilirsiniz. Burada küçük fakat çok önemli bir bilgi vermek istiyorum. Xcode içindeki Kanvas yani tasarımı yaptığımız yer üzerinde konum olarak 0,0 noktası yani merkez noktası sol üst köşe olarak kabul edilir. Bir elemanın X değerini arttırdığınızda sağa, Y değerini arttırdığınızda ise aşağa doğru hareket eder. Boyutları değiştirmek için arayüz elemanına tıkladığınızda çıkan çerçeveleri de kullanabilirsiniz. Aynı zamanda konumu değiştirmek için arayüz elemanını tutup sürükleyebilirsiniz.
Connections Inspector
Bu kısımda ise seçili olan arayüz elemanına tanımlı olan değişkenler ve fonksiyonları görebilirsiniz ve bağlayabilirsiniz. Burayı biraz kısa geçiyoruz fakat merak etmeyin yazının devamında detaylı bir şekilde ele alacağız
IBAction ve IBOutlet
Bildiğiniz gibi arayüz elemanlarımız ile kodumuz ile bir şekilde iletişime geçmesi gerekiyor. Örneğin bir beğenme butonunda butona basınca beğenmeyi veritabanına kaydeden, ona göre kullanıcıya geri dönüş veren, gerekirse animasyon gösteren bir kod bloğu ile iletişime geçmesi gerekiyor. Arayüz elemanlarını kodumuza bağlamamak konusunda da yardımımıza @IBAction ve @IBOutlet koşuyor.
IBAction ile IBOutlet Arasındaki Farklar Nelerdir?
Eminim ki birçok yeni başlayan veya Swift ile belirli bir süre geçirmiş herkes. Bu ikisi arasındaki farkı merak etmiştir. Kısaca, @IBAction bir arayüz elemanından aksiyon almak için yani üzerine tıklandı, sürüklendi, basılı tutuldu gibi aksiyonları almak için kullanılır. @IBOutlet ise bir arayüz elemanının rengini, fontunu, yazısını, arkaplanını ve buna benzer özelliklerini kod ile değiştirmek için kullanılır. @IBAction’ın bir fonksiyona bağlı olması lazımken, @IBOutlet’in bir değişkene bağlı olması lazımdır.
Aklınızda bulunsun:
@IBOutlet’leri viewDidload() fonksiyonunun üstünde,@IBAction’ları ise sınıfın en altında oluşturmanız kod sadeliği açısından güzel bir kullanımdır.
Hadi bir IBOutlet oluşturalım!
Gördüğünüz gibi, normal bir değişken tanımlamadan çok bir farkı yok. Her zamanki gibi değişkenin adını yazıyor ve daha sonra tipini belirtiyoruz. Oluşturacağımız değişken UIButton olduğu için değişkenin tipini UIButton olarak belirledik ve ! koyarak sonlandırdık. Daha sonra başına @IBOutlet koyarak bu değişkenin bir storyboard değişkeni olduğunu ifade ediyoruz. Bu işlemi yaptıktan sonra değişkenimizin yanında bir daire çıkıyor. Bu daire değişkenimizin storyboard’a bağlı olup olmadığını gösteriyor. Şu an henüz bağlamadığımız için dairemiz boş.
@IBOutlet var myButton: UIButton!Şu an storyboard üzerinde bir butonumuz ve kodumuzun içinde değişken olarak tanımlanmış bir butonumuz var fakat henüz birbiri ile bağlamadık. Hadi bağlayalım!
IBOutlet ile Arayüz Elemanını Bağlama
View Controller üzerine tıklayıp Connections Inspector bölümüne giderseniz, Outlets alanında kod ile oluşturduğumuz butonu göreceksiniz. Sağ tarafta bulunan daireye tıklayıp istediğimiz arayüz elemanına sürükleyerek kod ile oluşturduğumuz butonu arayüz elemanımıza rahatlıkla bağlayabiliriz ve butonun her türlü özelliğini kod ile değiştirebiliriz. Koda gidip bakacak olursanız, oluşturduğumuz butonun yanındaki dairenin içinin artık dolu olduğunu görebilirsiniz.
Hadi bir IBAction oluşturalım!
Oluşturduğumuz fonksiyona, aynı normalde bir fonksiyon oluşturur gibi isim verdik. @IBAction fonksiyonları, argument label özelliği boş olan bir parametre alırlar. Bu parametreye istediğiniz ismi verebilirsiniz. Biz burada button ismi verdik ve daha sonra parametre tipini, bağlayacağımız arayüz elemanının tipi olan UIButton yaptık. Daha sonra storyboard fonksiyonu olduğu anlaşılması için başına @IBAction ekledik. Fonksiyonumuzun çalışıp çalışmadığını test etmek için içine bir print ifadesi yerleştirdik.
@IBAction func buttonTapped(_ button: UIButton) {
print(“Hello, TurkishKit!”)
}Şu an storyboard üzerinde bir butonumuz ve kodumuzun içinde bir fonksiyonumuz var fakat henüz birbiri ile bağlamadık. Hadi bağlayalım!
IBAction ile Arayüz Elemanını Bağlama
View Controller’ı seçip Connections Inspector kısmına gittiğimizde, en aşağıda eklediğimiz fonksiyonu göreceğiz. Aynı @IBOutlet için yaptığımız gibi bu fonksiyonun yanındaki daireye tıklayıp, sürükleyip butonumuzun üstüne bırakıyoruz. Sürükleyip bıraktıktan sonra karşımıza bazı algılama seçenekleri geliyor. Örneğin butona dokunulduğu an çalışan, butona tıklayıp çekildiği zaman çalışan, butonun dışına bastığımızda çalışan gibi algılama seçeneklerini seçebiliyoruz. Çoğunlukla basıp çekerek çalışan Touch Up Inside seçeneği kullanılır ve biz de bunu kullanacağız.
Harika! Butonumuz çalışıyor!
Kod ile eleman oluşturmak
Bir arayüz elemanı sadece storyboard ile kullarak oluşturulmaz. Kod ile de oluşturulabilir. Ekranda bir uyarı çıkarmak gibi .oğu zaman kod ile arayüz elemanı da oluşturmanız gerekebilir. Bir adet basit örnek vererek bu konuyu örneklendirelim.
Burada myFrame isminde bir frame oluşturduk. Bu frame elemanımızın boyutlarınızı ve konumunu belirliyor. Daha sonra oluşturduğumuz frame yardımıyla bir UILabel nesnesi oluşturduk. Oluşturduğumuz labelin ismini, yazı boyutu ve rengini değiştirdik. Daha sonra her View Controller içinde bulunan ana view’ımıza oluşturduğumuz label’i ekledik. Aslında bu kadar basit.
let myFrame = CGRect(x: 100, y: 100, width: 130, height: 20)
let label = UILabel(frame: myFrame)
label.text = “Merhaba”
label.font = .systemFont(ofSize: 30)
label.textColor = .red
view.addSubview(label)Evet bu kadar! Ekrana tamamen kod ile istediğimiz yazıyı renkli bir şekilde yazdırdık.
Bu makalemizde Interface Builder kullanarak nasıl kolay, hızlı ve güzel arayüzler oluşturabileceğimizi, Interface Builder temellerini, kod ve elemanları bağlamayı ve sıfırdan kod ile eleman oluşturmayı öğrendik. Umarım bu bilgilerle mükemmel arayüzler oluşturursunuz. Sonraki makalelerde görüşmek üzere. Bol kodlu günler diliyorum! 💻
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. iOS geliştiricisi olma yolundaki ilk ve güçlü adımı atın. Kendi iPhone uygulamalarınızı geliştirmeye başlayın.
Birebir Mentorluk Desteği
İhtiyaç duyduğunuz her an desteğe hazır TurkishKit mentorları ile eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
