UITableView Kullanımı

 

UITableView kullanımı hakkında bilmeniz gerekenler 📖

Ön Bilgi

TableView i birçok uygulamada sıkça görürüz. Elimizdeki verileri satır satır ekrana bastırmak için kullanırız.

Her satırdan farklı ekranlara geçiş yapabilir, detay bilgisi alabilir veya istediğimiz bir aksiyon alabiliriz.

Ayrıca tableview verileri statik veya dinamik olabilir. Biz bu derste statik veri kullanacağız.

Dersin sonunda çok işlem yaptığınızı düşünebilirsiniz ama hemen her uygulamanızda kullanacağınız için kısa zamanda alışacaksınız.

Bu arada tablo satırı değil de tablo hücresi dersek daha doğru olur. Her bir satır aslında TableViewCell olarak isimlendiriliyor.

Biz bu hücreleri doldurmak istiyoruz.

Screen Shot 2018-09-19 at 12.07.58 PM.png

O zaman hemen başlayalım 💪

 

UITableView Kullanımı: Örnek Uygulama

 

Bağlantılar

Bir proje yaratalım ve Storyboard’a bir TableView objesi sürükleyelim.

 

Ekranımızda sadece TableView objesi olursa direk TableViewController da kullanmak mantıklı olabilir fakat bunu daha sonra göreceğiz.

Auto-layout ile constraint ekleyelim, ekranın tüm köşelerini doldursun.

TableView seçiliyken Attributes Inspectordan bir tane TableViewCell prototipi yaratalım.

 

Assistant Editor’u açalım ve Tablomuzun IBOutlet bağlantısını yapalım

 

Delege Metodları

Verileri ekrana yansıtabilmemiz için delegate ve datasource sınıflarını implement etmemiz gerekiyor.

Bunları asıl sınıfımıza davet edelim

 

Xcode şikayetçi oldu bakalım neyden hoşlanmamış beyefendi 😄

 

“Gerekli delegate metodlarını eklememişin, istersen ben ekleyeyim senin için dostum” diyor.

Eklesin bakalım…

 

Not

UITableView yapısını minimal düzeyde kullanabilmemiz için bu iki metodu mecburen implement etmemiz gerekiyor.

Bunlar çok önemli fonksiyonlardır.

Tablomuza veri eklerken içinde kaç tane hücre olacağını numberOfRows fonksiyonunda belirteceğiz.

Her bir hücre içinde nelerin, nasıl yer alacağını da cellForRowAt fonksiyonunda belirteceğiz.

TableView ı istediğiniz gibi customize edebilmeniz için bu iki fonksiyon yeterli değil.

Apple’ın Manuel Guide da kullanabileceğiniz tüm fonksiyonları görebilirsiniz.

Eğer henüz yeni öğreniyorsanız bu derse odaklanmanız daha iyi olacaktır.

Şimdi bir de heightForRowAt fonksiyonunu çağıralım. Bu fonksiyonu ise her bir hücrenin ne kadar uzunlukta olacağını ayarlamak için kullanacağız.

 

Delegate fonksiyonlarımız şimdilik yeterli fakat ViewController sınıfımız biraz çirkinleşmeye başladı 😬

 

UITableView in daha birçok fonksiyonu var, ilerde bunları da kullandığınız zaman sınıfınınız iyice anlaşılması güç hale gelecek. O yüzden TableView ile alakalı olan ne varsa bunları extension içine yazalım.

 

Extension modülünü şöyle yazıyoruz:

  • Sınıfın bittiği yerde extension [Sınıf Adı]: [TableView Delegate ve Datasource] yaz
  • TableView fonksiyonlarını extension içine taşı

Yani sınıfı şu hale getirmek istiyoruz:

 

Derslerimde her zaman söylüyorum, Delegate metodlarıyla işiniz varsa bunu extension içine yazın,
kodumuz temiz kalsın 😊

Delege fonksiyonlarını dolduralım…

Gördüğünüz gibi daha güzel bir hale geldi. Bu derste TableView gördüğümüz için sadece bir extension yazdık.

Ama mesala bir de CollectionView kullansaydık onu da farklı bir extension da yazardık.

Şimdi viewDidLoad fonksiyonu içinde TableView ın delegate ve datasource unu belirtmemiz gerekiyor.

Eğer bu adamı geçerseniz tüm fonksiyonları doğru yazsanız bile ekranda hiçbir şey göremezsiniz çünkü tablo verilerinin sorumlu olduğu sınıfı belirtmemiş oluruz.

 

Şimdi bir array oluşturalım. Bu array içindeki verileri daha sonra tabloya yazdıracağız.

 

Şu an alt yapımız hazır. Şimdi sıra geldi fonksiyonların içini doldurmaya.

 

numberOfRowsInSection az önce dediğimiz gibi tabloda kaç tane hücre olacağını belirtir.

Eğer return 5 dersek 5 tane eleman döneceğini söyleriz, eğer array in eleman sayısını yani 9 dersek tüm elemanları bastırabiliriz fakat sadece return 9 demek çok amatörce bir yaklaşımdır. Ya ilerde bu dizinin boyutu değişirse?

O zaman myArray.count değerini return etmemiz lazım ki myArray in boyutu ne zaman değişse ona göre boyutunu hesaplasın ve return etsin.

numberOfRowsInSection fonksiyonunu aşağıdaki gibi yazmış olduk

 

Şimdi cellForRowAt fonksiyonunu dolduracağız. Bu fonksiyonda her bir hücrenin özelliklerini belirtiyoruz.

En basit anlamda hücrenin başlığını belirtebiliriz. Zaten yukarıdaki myArray dizisini de hücrelere başlık olarak vereceğiz.

O zaman önce bir hücre oluşturalım

Burada iki şeye dikkatinizi çekmek istiyorum

  • dequeueReusableCell
  • withIdentifier: “Cell”

 

dequeueReusableCell ile hücremizin yeniden kullanılabilir olduğunu söylüyoruz. Yani ilerde o hücreyi silersek veya değiştirirsek o hücrede başka veri bulunabilir diyoruz. Hücreleri çoğu zaman dequeueReusableCell ile oluştururuz.

Diğer bir konu ise hücre için kullandığımız identifier. Burada hücremize bir değişken ismi vermemiz gerekiyor çünkü hangi tablonun hücresi olduğunu nerden bilsin? Ya birden çok tablomuz aynı ekrandaysa?

Burda ben basitçe “Cell” ismi verdim fakat henüz Storyboard da bunu belirtmedik. Bu adımı unutursak yine istediğimiz gibi çalışmaz.

Şimdi Storyboard’a gelelim ve hücremiz seçiliyken identifier olarak “Cell” ismini verelim.

Screen Shot 2018-09-19 at 11.45.13 AM

y3ooAHgOAp.gif

 

ViewController a geri dönelim

cellForRowAt fonksiyonun içindeki indexPath kelimesine çok dikkat etmemiz gerekiyor. TableView yapısını ne zaman kullansak indexPath hayati önem taşır.

Peki nedir bu indexPath?

indexPath bir değişken tipidir. Yani Int, Double, Float gibi bir tür diye düşünebilirsiniz.

indexPath içinde birçok veri bulundurur. Bunlardan en çok kullandığımız section ve row dur.

Section tabloyu kaça böldüğümüzü belirtirken, row ise o section da kaç tane hücre bulunacağı belirtir.

Bizim şu an section ile işimiz yok, onu başka bir derste detaylıca ele alacağız.

indexPath.row bize tablonun kaçıncı satırında olduğumuz bilgisini verecek.

Yani,

şeklinde kullanırsak bize o hücreye karşılık gelen array in ne olduğunu verecektir.

 

Biz devam edelim…

O zaman bu bilgiyi bir değişkende tutalım, hücrenin başlığına eşitleyelim ve hücreyi return edelim.

Dolayısıyla fonksiyonumuz şöyle oldu

 

İsterseniz hücrenin arkaplanıyla oynayabilir, hücreye resim ekleyebilir, fontunu ve puntosunu değiştirebilir ve alt başlık ekleyebilirsiniz. TableView ın ilk dersi olarak şimdilik sadece başlık verdik.

Aslında şu an projemiz çalışabilir vaziyette ama bir de isteğe bağlı kullanabileceğiniz bir fonksiyon göstereyim.

Henüz doldurmadığımız son fonksiyon olan heightForRowAt metodu hücrenin kaç piksel uzunluğunda olacağını belirtir.

Buraya kısaca return 60 dememiz kafidir. İsteğe göre değiştirebilirsiniz.

 

Projeyi çalıştırma zamanı 💻

Screen Shot 2018-09-19 at 12.00.19 PM.png

 

Sonuç

Malum et fiyatlarından bir şey yiyemez olduk ama en azından böyle tabloya yazdırabiliyoruz 😎

 

Projenin kaynak koduna iOS Notları – Github dan erişebilirsiniz.

 

Sizin de eklemek istediğiniz bir konu varsa lütfen yorum kısmında belirtin 🙂

 

İyi kodlamalar 💻

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir