Herkese merhaba, bu yazımda sizlere Eureka Kütüphanesini tanıtacağım.
Eureka, açık kaynak kodlu 3rd party bir Swift kütüphanesidir. Ülkemizde pek fazla kullanılan bir teknoloji olmasada, iOS camiasında kabul görmüştür. Github platformunda, 12K star almış ve binlerce projede kullanılmıştır.
Eureka, bir ‘Form Builder’ kütüphanesidir. Basit ve hızlı bir şekilde form yapısı oluşturmamızı sağlar. UITableView’den türetilmiş ve TableView özellikleri taşıyan bir yapıdır. TableView’de bulunan “cell” yapılarını “row” olarak kullanacağız. Aslında bir çok noktada benzerlik göstermektedir. Ancak, en önemli avantajları;
- Hazır Componentler,
- Kullanım Kolaylığı,
- iOS Native tasarım,
- Hızlı geliştirme, konusunda gerçekten deneyimlemeniz gereken bir kullanımı vardır.
Hızlı geliştirme ve kullanım kolaylığına örnek vermemiz gerekirse;
- LabelRow() gibi bir tanımlama yaptığımızda UILabel elemanı,
- DateRow() gibi bir tanımlama yaptığımızda Date elemanı,
- CheckRow() gibi bir tanımlama yaptığımızda Check UIButton elemanı,
- SwitchRow() gibi bir tanımlama yaptığımızda UISwitch elemanı oluşturmuş oluruz.
Şimdi, kodlayarak daha hızlı kavrayalım.
Nasıl Kullanılır?
Öncelikle bir Xcode üzerinden, swift projesi başlatalım. SPM veya Cocoapods üzerinden Eureka’yı projemize dahil edelim. (SPM’i nasıl kullanacağınızı bilmiyorsanız, buradaki linkten öğrenebilirsiniz.).
SPM ile kurulumu sağladıktan sonra, 3rd party bir kütüphane olduğu için projemize import etmemiz gerekiyor. Gerekli import işlemini sağlayalım.
import UIKit
import Eureka
final class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
}Gerekli import işlemini sağladık. 2. olarak önemli nokta, Eureka bir Form Builder kütüphanesiydi. Ancak projemizi ilk oluşturduğumuzda “ViewController” sınıfımız, “UIViewController” türünde geldi.
Gerekli import işlemini sağladık ve artık Eureka’yı kullanma zamanı. Hazır olarak gelen “ViewController” sınıfımız artık “FormViewController” türünde olmalıdır. Çünkü artık “Form” türünde bir “ViewController” yaratacağız.
import UIKit
import Eureka
final class ViewController: FormViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
}Eureka’da form yapısı ve birbirinden bağımsız Seciton’lar oluşturmak oldukça basittir.
Bir form yapısı oluşturmak için en temel başlığımız, “form” keywordüdür. “form” ile başlangıç yapıp, “form” nesnesini. “+++ Seciton()” keywordünü kullanarak, “Section” ekleyebiliriz.
Kod üzerinde göstermek gerekirse;
form
+++ Section()
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}Sadece 5 satır kod yazmanız yeterlidir. Bu yapıya 2. bir Section eklemek istersek eğer;
“form” başlangıcını ve diğer “section” yapısını etkilemeden,
“+++ Seciton()” kodunu kullanarak, 2. bir Section ekleyebiliriz.
Aynı işlemi 3. 4. 5. … sonuncu Section’a kadar tekrarlayabilirsiniz.
form
+++ Section()
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}
+++ Section()
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}Asıl kodumuza dönmek gerekirse;
import UIKit
import Eureka
final class ViewController: FormViewController {
override func viewDidLoad() {
super.viewDidLoad()
createForm()
}
private func createForm(){
form
+++ Section("First Date Section")
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}
+++ Section("Second Date Section")
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}
}
}Burada, “createForm()” isimli bir fonksiyon tanımladık. Bu fonksiyon form nesnesi oluşturmamızı sağlayacak (Dilerseniz fonksiyon oluşturmayıp, “viewDidLoad” içerisinde de form nesnelerini oluşturabilirsiniz).
Oluşturmuş olduğumuz “createForm()” fonksiyonunu “viewDidLoad” içerisinde çağırarak, form çizdirme işlemimizi başlatıyoruz.
2 tane Section’dan oluşan ve içerisinde 1'er “DateRow” bulunduran bir form oluşturmuş olduk. Kullanımının ne kadar hızlı ve nasıl bir avantaj sağladığını, şimdi daha iyi gördük. Çıktı olarak;
Oluşturmuş olduğumuz Sectionlar içerisine istediğimiz kadar UI elemanı koyabiliriz. Form yapımızı, biraz zenginleştirmemiz gerekirse;
private func fillForm(){
form +++
Section("First Section")
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}
<<< SwitchRow() {
$0.title = "Enable notifications"
$0.value = true
}
<<< CheckRow() {
$0.title = "Agree to terms and conditions"
$0.value = false
}
+++ Section("Second Section")
<<< DateRow() {
$0.title = "Select a date"
$0.value = Date()
}
<<< SliderRow() {
$0.title = "Select a value"
$0.value = 5.0
}
<<< SegmentedRow<String>("segmentedRowTag") {
$0.title = "Segmented Row"
$0.options = ["Option 1", "Option 2", "Option 3"]
$0.value = "Option 1"
}
+++ Section("Name and Password Section")
<<< NameRow() {
$0.title = "Your name:"
}
<<< PasswordRow() {
$0.title = "Your password:"
}
}3 farklı Section kullanarak yapımızı geliştirdik. 1. ve 2. Section’larda 3'er UI elemanı, 3. Seciton’da 2 UI elemanı kullandık ve çıktı olarak;
Şimdiye kadar kullandığımız ve kullanmadığımız bir çok Form elemanı, Eureka geliştiricileri tarafından hazırlanmış base yapılardan oluşmakta. Ancak aşağıdaki gibi bir row oluşturmak istediğimizde, burada karşımıza “CustomRow” yapısı çıkıyor.
Eureka kütüphanesi dikkatinizi çektiyse ve “CustomRow nasıl oluşturulur? Nasıl kullanılır?” gibi düşünceniz varsa 2. yazımı bekleyin🥳
Burada, Eureka geliştiricileri tarafından geliştirilmiş bir example app mevcut. Daha detaylı bilgi ve hazır UI Elemanlarını öğrenmek için projeyi inceleyebilirsiniz.
Umarım faydalı olmuştur, okuduğunuz için teşekkürler.
CustomRow nasıl oluşturulur? yazımı okumak için, tıklayın!
