UIKit: XIB
XIB dosyaları, uygulama arayüzümüzü parça parça oluşturmamızı sağlayan araçlardır.
Merhaba sevgili TurkishKit okuyucuları! 👋🏼 Bugün sizlerle XIB dosyalarını kullanarak nasıl uygulama arayüzü geliştirebileceğimizi öğreneceğiz. Hazırsanız hemen başlayalım! 🤗
XIB Nedir?
XIB dosya türü Storyboard dosya türüne oldukça benzerdir. Aralarındaki en büyük fark; Storybord’un ViewController, XIB dosyalarının ise direkt View elemanlarını oluşturmak ve düzenlemek için olmasıdır.
XIB dosya teknolojisi pek de yeni bir teknoloji sayılmaz: XIB dosyaları zamanının NIB -NeXT Interface Builder- dosyalarının yeni nesil hali gibi düşünülebilir. Hatta bu teknolojinin 1980'lerin sonlarına doğru ortaya çıktığını söyleyebiliriz.
Hadi Kodlayalım
XIB dosyaları hem programsal olarak hem de Storyboard üzerinde kullanılabilir. Bu makalemizde iki tarafta da nasıl kullanıldığını öğreneceğiz. Tabii onlardan önce yeni bir Xcode projesi oluşturmalıyız.
Xcode projemizi oluşturduktan sonra cmd+N tuşuna basıp “View” türünden bir dosya oluşturalım.
Burada oluşan UIView elemanının bir UIViewController elemanı boyutunda olmasını istemiyoruz. Bu yüzden, “Size” özelliğini “Freeform” olarak değiştirelim.
Elemanın boyutunu değiştirebilmek için “Size Inspector” bölümüne gelip “Height” özelliğini 240 olarak değiştirelim.
Artık arayüz elemanlarımızı oluşturabiliriz. İlk önce kordinatları ve boyutu X: 20 | Y: 20 | Width: 150 | Height: 200 olacak şekilde bir UIImageView elemanı ekleyelim.
Bu elemanın içerisine de bir fotoğraf ekleyelim. (Siz de elemanın boyutlarına yakın bir resim ekleyebilirsiniz.)
Bir başlığa ihtiyacımız olduğundan kordinatları ve boyutu X: 180 | Y: 20 | Width: 214 | Height: 30 olan bir UILabel elemanı oluşturalım.
Bu elemanın yazı boyutunu 25 ve stilini “Bold” olarak ayarlayalım.
Başlığın altında bir açıklamanın olması için kordinatları ve boyutu X: 180 | Y: 20 | Width: 214 | Height: 30 olan bir UILabel elemanı oluşturalım.
Bu UILabel elemanı birden fazla satırdan oluşan metinler barındıracağı için satır sayısını “0” olarak ayarlayalım.
Elemanımızın daha gerçekçi gözükebilmesi için UILabel elemanlarına gerçek içerikler yazabiliriz.
Son olarak, elemanımızın farklı boyutlarda da düzgün görünebilmesi için içerisindeki elemanların “auto layout”unu iyi bir şekilde ayarlayalım.
Auto layout hakkında pek fazla bilgi sahibi değilseniz daha önce bu konu hakkında yazmış olduğumuz yazımızı okuyabilirsiniz:
UIView elemanının içerisindeki elemanları kod üzerinde tanımlamak için “ProductView” adında yeni bir Swift dosyası oluşturalım ve elemanımızın sınıfını ona eşitleyelim.
Sonrasında aşağıdaki gibi elemanları teker teker kod sayfasına bağlayalım.
class ProductView: UIView { // MARK: - UI Elements
@IBOutlet weak var productImage: UIImageView!
@IBOutlet weak var productTitle: UILabel!
@IBOutlet weak var productDescription: UILabel!
}
“ViewController.swift” sayfasına dönelim ve “ProductView” elemanını “viewDidLoad” fonksiyonunun içerisinde tanımlayalım.
class ViewController: UIViewController { // MARK: - Life Cycle
override func viewDidLoad() {
super.viewDidLoad() if let productView = Bundle.main.loadNibNamed("\(ProductView.self)", owner: self, options: nil)?.first as? ProductView {
}
}
}
“productView” elemanını UIViewController elemanına ekleyelim.
// MARK: - Life Cycle
override func viewDidLoad() {
super.viewDidLoad() if let productView = Bundle.main.loadNibNamed("\(ProductView.self)", owner: self, options: nil)?.first as? ProductView {
self.view.addSubview(productView)
}
}
“ProductView” elemanını istediğimiz şekilde ekrana yerleştirebilmek için “translatesAutoresizingMaskIntoConstraints” elemanına “false” değerini vermeliyiz.
productView.translatesAutoresizingMaskIntoConstraints = falseBu elemanın içerisindeki elemanların değerlerini aşağıdaki gibi değiştirebiliriz.
productView.translatesAutoresizingMaskIntoConstraints = false
productView.productImage.image = UIImage(named: "iPhone 11")
productView.productTitle.text = "iPhone 11"
productView.productDescription.text = "Kullanım konusunda hiçbir karışıklığa yer vermeden tonlarca yetenekle donatılmış çığır açıcı üçlü kamera sistemi. Pil ömrü konusunda eşi benzeri görülmemiş büyüklükte bir adım."Elemanımızın konumunu ve boyutunu ayarlayabilmek için NSLayoutConstraint yapısını kullanalım.
NSLayoutConstraint.activate([
productView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
productView.centerYAnchor.constraint(equalTo: view.topAnchor, constant: 200),
productView.widthAnchor.constraint(equalToConstant: 414),
productView.heightAnchor.constraint(equalToConstant: 240)
])Bu şekilde projeyi çalıştırdığımızda uygulamamızın içerisinde elemanımızı görebiliriz.
XIB dosyalarını, sadece programsal olarak eleman oluşturmanın yanı sıra Storyboard üzerinde de eleman oluşturmak için kullanabiliriz. (Bu sayede, kendi oluşturmuş olduğunuz elemanları, tıpkı Xcode’un sizlere sunduğu elemanlar gibi kullanabilirsiniz!) Bunu göstermek için “ProductSuperview” adında yeni bir Swift dosyası oluşturalım.
Bu dosyayı oluşturmamızın sebebi, “ProductView” elemanımızı Storyboard üzerinde kullanılabilir bir hale getirmektir. Bunun olabilmesi için de “ProductView” elemanının belli fonksiyonların içerisinde tanımlanıp ana UIView elemanının içerisine eklenmelidir. Bunun için “addProductView” adında bir fonksiyon oluşturalım.
@IBDesignable
class ProductSuperview: UIView { // MARK: - Functions
func addProductView() { }
}
@IBDesignable nedir? 🤔
@IBDesignableyapılan tasarımsal değişiklikleri direkt Storyboard dosyaları üzerinden görüntüleyebilmenizi sağlayan bir yapıdır.
@IBDesignable hakkında daha fazla bilgi edinmek isterseniz, ilgili yazımızı aşağıdaki bağlantıdan inceleyebilirsiniz:
Bu fonksiyon içerisinde az önce yaptığımız gibi “ProductView” elemanını çağıralım.
// MARK: - Functions
func addProductView() {
if let productView = Bundle.main.loadNibNamed("\(ProductView.self)", owner: self, options: nil)?.first as? ProductView { }
}
Aynı şekilde kendisini ana UIView yapısına ekleyelim.
addSubview(productView)Elemanımızın konum ve boyutunda değişiklikler yapmadan önce yine “translatesAutoresizingMaskIntoConstraints” özelliğini “false” değerine eşitleyelim.
productView.translatesAutoresizingMaskIntoConstraints = falseNSLayoutConstraint yapısıyla elemanımızın konumunu ve boyutunu ayarlayalım. (Burada elemanımızın konumunu her taraftan merkeze aldık. Boyutunu ise kendisine eşitledik.)
NSLayoutConstraint.activate([
productView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
productView.centerYAnchor.constraint(equalTo: self.centerYAnchor),
productView.widthAnchor.constraint(equalTo: self.widthAnchor),
productView.heightAnchor.constraint(equalTo: self.heightAnchor)
])XIB dosyamızın içerisindeki elemanı oluşturmak için az önce oluşturduğumuz fonksiyonu “awakeFromNib” fonksiyonunda çalıştıralım.
// MARK: - Life Cylce
override func awakeFromNib() {
super.awakeFromNib() addProductView()
}
Aynı zamanda elemanımızın Storyboard sayfalarında derlenebilmesi için fonksiyonumuzu “prepareForInterfaceBuilder” fonksiyonunun içerisinde çalıştıralım.
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder() addProductView()
}
Artık “ProductSuperview” elemanımızı “Main.storyboard” sayfamızın içerisindeki UIViewController elemanımızın içerisinde oluşturabiliriz. Bunu yapabilmek için yeni bir UIView elemanı oluşturalım.
Sonrasında bu oluşturduğumuz UIView elemanının sınıfını “ProductSuperview” olarak ayarlayalım.
Projeyi çalıştırdığımızda da göreceğiniz üzere uygulamada hem programsal olarak hem de Storyboard üzerinden oluşturulmuş iki tane “ProductView” elemanı mevcut.
Bu makalemizde yapmış olduğumuz projemize buradan ulaşabilirsiniz:
Bir makalemizin daha sonuna geldik. Bu makalemizde XIB dosyaları ile nasıl arayüz elemanları oluşturabileceğimizi öğrendik. Keyifli kodlamalar! 🧠
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. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
