Eureka Kütüphanesi ile CustomRow oluşturmak!

Herkese merhaba, bir önceki yazımda Eureka kütüphanesini genel hatlarıyla anlatmıştım. Bu yazımda ise;

• “Kütüphane geliştiricilerinin tanımlamadığı, ancak projemizde kullanmak istediğimiz özelleştirilmiş rowları nasıl oluşturacağız?” sorusunun cevabını bulacaksınız. Şimdiden keyifli okumalar 🎉

CustomRow() Nasıl oluşturulur?

Bir ImageView ve bir UILabel içeren CustomRow()

Eureka’nın aslında “UITableView”’den türetilmiş olduğunu ve “cell” nesnelerimizin burada “row” olarak tanımlandığını anlatmıştım.

Şimdi ise, özelleştirilmiş “row” tasarlamak istiyoruz. Bu işlem için öncelikle işin matematiğini oturtmamız gerekiyor.

• Eureka UITableView’den türetilmiştir.
• “TableViewCell” neslerimiz, Eureka’da “row” olarak kullanılmıştır.

Bu iki maddeyi göz önünde bulundurursak, işe öncelikle CustomCell yapısı oluşturarak başlamamız gerektiğini anlayabiliriz. Çünkü, tanımlanmış “rowlarımız” aslında birer “hücre” yapısından ibaret.

2. Olarak oluşturmuş olduğumuz “CustomCell” nesnesini, Eureka ile birlikte kullanabilmek için “CustomRow” nesnesine dönüştürmemiz gerekmekte. Biraz karmaşık gözükse de, aslında oldukça basit. Şimdi kodlamaya geçelim.

İlk olarak bir Swift projesi başlatalım, Eureka kütüphanesini “Cocoapods” veya “SPM” aracılığıyla projemize kuralım. Bir önceki yazımızda, “FormViewController” nasıl tanımlanır, anlatmıştım. Şimdi projemize “Eureka”’yı import ederek, gerekli düzenlemeleri yapalım.

import UIKit
import Eureka

final class ViewController: FormViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

İkinci olarak, bir “CustomCell” oluşturmamız gerekiyor. Oluşturduğumuz “CustomCell”’den “CustomRow” türeteceğiz.

Bu işleme, “xib” kullanarak bir “UITableViewCell CocoaTouch class”ı oluşturarak başlayalım.

.xib kullanarak, bir Cell oluşturma

Oluşturmuş olduğumuz “CustomCell classımıza” Eureka’yı import edelim. Karşımıza boş bir “xib” ve “CustomCell” sınıfı gelecek.

Oluşturmak istediğimiz “CustomRow” içerisinde; 1 adet “UIImageView” ve 1 adet “UILabel” ögesi bulunuyor. Dilerseniz “ProgramaticUI” veya “SnapKit” kullanabilirsiniz. Ancak ben “storyboard” üzerinden devam edeceğim.

“xib” dosyamız üzerinde “ImageView” ve “Label”’ı istediğimiz şekilde konumlandıralım.

Konumlandırılmış ImageView ve UILabel elemanı

@IBOutlet’lerimizi “CustomCell classımıza” bağlayalım. Burada “CocoaTouch Class”ımızı “UITableViewCell” türünde oluşturduğumuz için “UITableViewCell”’den farklı olarak yapacağımız bir kaç işlem bulunmakta.

Eureka’da bulunan form ve row yapısını şimdiye kadar “UITableView” ile oldukça benzettik. Burada ilk yol ayrımımıza geliyoruz. Oluşturacağımız “CustomCell” yapısı “UITableViewCell” nesnesi olmayacak. Dümdüz, sıfırdan bir hücre yapısı oluşturacağız. Kod üzerinde göstermek gerekirse;

import UIKit
import Eureka

final class CustomCell: Cell<String>, CellType {

    @IBOutlet weak var logoImage: UIImageView!
    @IBOutlet weak var teamName: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
    }
}

Biz, “CustomRow”’umuzda kullanabilmek için bir “CustomCell” oluşturuyoruz. “CustomCell” sınıfımız direkt olarak “Cell”’den türetilmelidir. “Cell<String>” ifadesi, hücre içerisinde “String” değerler olacağını belirtiyor. “CellType” ise oluşturduğumuz yapının “hücre” tipinde olduğunu beliriyor.

Sonuç olarak;

• İçerisinde “String” değerler bulunduran bir “Cell” oluşturacağımızı
• Oluşturmuş olduğumuz yapının “Hücre” tipinde olduğunu belirtmiş olduk.

“CustomRow” sınıfımızda kullanmak istediğimiz “Hücre” yapısını tasarladık. Şimdi ise oluşturmuş olduğumuz “hücre” yapısından bir “row” oluşturma zamanı geldi.

“CustomRow” isminde bir “Swift” dosyası oluşturalım ve tanımlamaya geçelim.

import Eureka
import UIKit

final class CustomRow: Row<CustomCell>, RowType {
    
    required public init(tag: String?) {
        super.init(tag: tag)
        cellProvider = CellProvider<CustomCell>(nibName: "CustomCell")
        cell.height = { 60 }
    }
}

Burada yazmış olduğumuz kodu açıklamak gerekirse, CustomCell oluştururken yaptığımız işlemi tekrarladık diyebiliriz. Kodun akışını şu şekilde açıklayabiliriz;

• Merhaba, ben “CustomRow class’ı”,
• Ben bir “row” oluşturacağım.
• Oluşturduğum “row”, <CustomCell> türünde ve bir “row” nesnesi olacak.

Kod akışına devam etmek gerekirse;

• “cellProvider” methodu içerisinde, oluşturmuş olduğumuz xib dosyamızın bağlantısını yapıyoruz.

Tebrikler! Şu anda uygulamamızın her yerinde kullanabileceğimiz bir CustomRow() tanımladık. Kullanımını görebilmek adına;

import UIKit
import Eureka

final class ViewController: FormViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        fillForm()
    }

    private func fillForm(){
        form +++
        Section("First Section")
        <<< CustomRow(){
            $0.cell.teamName.text = "Barcelona"
            $0.cell.logoImage.image = UIImage(named: "Barcelona")
        }
    }
}

Alacağımız çıktı ise şu şekilde olacaktır;

Ancak burada oluşturduğumuz CustomRow()’da görmek istemediğimiz bir durumla karşılaştık. O da; “row içerisindeki “componentlere” cell üzerinden ulaşmak”

$0.cell.teamName.text = "Barcelona"
$0.cell.logoImage.image = UIImage(named: "Barcelona")

Bu yapıdan kurtulmak için yapabileceğimiz bazı aktiviteler mevcut. Bunlardan birisi;

• “CustomRow” içerisinde “teamName” ve “logoImage” değişkenlerini tanımlamak. Ayrıca, “override updateCell” methodunu çağırmak.

final class CustomRow: Row<CustomCell>, RowType {
    
    var teamName: String?
    var logoImage: UIImage?
    
    required public init(tag: String?) {
        super.init(tag: tag)
        cellProvider = CellProvider<CustomCell>(nibName: "CustomCell")
        cell.height = { 60 }
    }
    override func customUpdateCell() {
        cell.teamName.text = teamName
        cell.logoImage.image = logoImage
    }
}

“updateCell” methodu içerisinde “teamName” ve “logoImage” atamalarını yaptıktan sonra oluşturduğumuz “CustomRow”’u kullanırken, “cell” üzerinden ilerlememize gerek kalmayacak. Yeni kullanımımız;

        form +++
        Section("First Section")
        <<< CustomRow(){ row in
           row.teamName = "Barcelona"
           row.logoImage = UIImage(named: "Barcelona")
        }

şeklinde olacaktır. Bunu yapmamızın sebebi, “Eureka”’yı tam anlamıyla kullanabilmek ve “cell” yapısını asla görmemektir.

Okuduğunuz için teşekkür ederim, umarım faydalı olmuştur.