[Swift] — Generating UITableView Programmatically
Herkese merhabalar. Bu yazımızda UITableView yapısını storyboard yerine kodla oluşturma işlemini gerçekleştireceğiz.
UITableView IOS base SDK’sında kullanılan ve hemen hemen günümüzdeki bütün uygulamalarda yer alan temel IOS componentlerinden bir tanesidir. Fakat günümüzde tasarımların daha da karmaşık ve güzel bir hal aldığı göz önünde bulundurulduğunda UITableView içerisindeki cell yapısını bazen storyboard yerine kodda handle etmek daha efektif olmaktadır. Cell’i kodla generate etmek daha fazla özgürlük tanıdığından runtime’da yapılacak değişiklikler veya birden fazla komponentin entegre edilmesi daha kolay olmaktadır. Hadi başlayalım.
Öncelikle yeni bir proje açarak başlıyoruz.
Daha sonra view controller içerisindeki view’a önce table view’ımızı atıyoruz.
Oluşturduğumuz bu methodu viewDidLoad’da çağırıyoruz. Bu methodda ne yaptığımıza bakacak olursak table view’ın data source ve delegate’ini tanımlıyoruz. Daha sonra cell i.im oluşturduğumuz MainCell clasını ve bu cell’e ait reuseIdentifier’ı tableView’a register ediyoruz ve son olarak tableview’ın view içerisinde yerleşimini sağlamak için constraintlerini tanımlıyoruz.
Daha sonra tableview’ın datasource ve delegate methodlarını implement ediyoruz.
Bu işlemin ardından tableview cell’ini özelleştirme işlemine başlayabiliriz.
Öncelikle oluşturduğumuz class içerisinde setUpUI adında bir method oluşturuyoruz. Bu methoda cell’in içerisini tasarlayacağız ve init metodunda bunu çağıracağız. Bu işlemin amacı ilgili view controller açıldığında istenilen komponentlerin arayüze yerleşmesini sağlamak. Bunun için aşağıdaki whatsapp arayüzünü entegre edeceğim.
Bu işlem için her cell’ de bulunan komponentleri çıkarıyorum. Öncelikle bir adet UIImageView’a ihtiyacım var. Daha sonra üç adet UILabel ve aşağıdaki çizgi için kolay olsun diye bir adet UIView atacağım.
Yukarıdaki gibi image view’i generate ettikden sonra sonra uygulama aşağıdaki gibi görünmektedir.
Daha sonra title için bir adet label konumlandırıyoruz.
Bu işlemin ardından uyguluma ekran görüntüsü aşağıdaki gibidir.
Bu işlemin ardında bir adet daha label atıyoruz. Bu da son mesajı gösteren label olacak.
Yukarıdaki kodla bu son mesajın gösterim işlemi de halledildi. Uygulamanın son hali aşağıdaki gibidir.
Son olarak tarih için bir adet label daha ekleyeceğiz.
Bu işlemin ardından ekran görüntüsü aşağıdaki gibidir.
Son olarak dummy bir json dosyası ile dinamik veri kullanılarak tableview doldurulacak.
Bu işlem için updateUI adında bir method yazıldı. Bu method data source atandığında tetiklendi. Bu updateUI metodu jsondan alınan verileri arayüze yansıtma işini halledecek. Öncelikle view controller da bu datayı atıyoruz ve sonrasında imageview imajını title ve text’i atıyoruz. Bu işlemin ardından arayüzün son hali aşağıdaki gibidir.
Bu yazı ile UITableView yapısını kod ile generate ettik. Whatsapp arayüzünü yine kodla temsili olarak arayüze giydirdik. Umarım faydalı olur. İyi kodlamalar✋🏻.
