UIKit: UITableView

Neredeyse tüm uygulamaların iskeletini oluşturan bu yapıyı siz de kolayca öğrenip kendi uygulamanızda kullanabilirsiniz!

Ege Sucu
TurkishKit
4 min readFeb 18, 2019

--

Herkese merhaba ! 🙂 Yeni bir Swift ile UIKit yazısıyla karşınızdayız. Bu yazımızın konusu her uygulamanın olmazsa olmazı haline gelen UITableView.

Eğer Swift ile UIKit serimizdeki önceki yazıyı henüz okumadıysanız okumanızı öneririm:

Kullanım Alanları

En sık kullandığımız uygulamalardan olan WhatsApp, UITableView kullanımına mükemmel bir örnektir. Uygulamayı açtığınızda ilk gördüğünüz şey sohbet listesidir. Bu liste pek çok sohbeti aralarında bir çizgi ile ayırarak size gösteriyor. Bu tarz listeleri Spotify, Instagram, Facebook gibi uygulamalarda görebiliyoruz. Biz bu yapıya UITableView diyoruz. Konuyu tam olarak kavradığınız zaman bahsettiğim büyük uygulamalar gibi harika işler çıkarabiliyorsunuz. Peki buna nasıl başlıyoruz?

UITableView Kodlama

Öncelikle yeni bir uygulama düşünelim. Uygulamamız bize arkadaşlarımızın ismini ve yaşlarını göstersin. Konsepti basit olsa da ufak modifiyeler ile çok güzel bir uygulama çıkarabilirsiniz. Uygulamamızı yarattıktan sonra tasarım ekranımda bir adet Table View objesi taşıyorum ve ekranıma bırakıyorum. Uygulamamda Navigation Controller istediğim için ViewController ekranımı seçip yukarıdaki menüden “Editor →Embed In →Navigation Controller” seçeneğini tıklıyorum. Daha sonra TableView objemi ekrana yayıyorum ve Sağ paneldeki “Prototype Cells” kısmını 1 arttırıyorum. Böylece listemdeki hücre tasarımım ortaya çıktı.

Daha sonra yarattığım hücreye tıkladığımda sağ panelde yeni bir liste çıkıyor. Burası hücremi özelleştirdiğim yer. Burada birkaç değişiklik yapıyorum. Öncelikle Style kısmımı “Right Detail” diyorum. Böylece hücremde 1 metin ve bir açıklama metni çıkıyor. Daha sonra Identifier kısmına gelerek hücreme anlamlı bir isim veriyorum. Ben burada “arkadaş” kelimesi kullanıyorum. Bunun sebebi listemin arkadaşlarımı içereceği için bir objeyi arkadaş olarak tanımlamamın mantıklı olmasıdır.

Tasarım ile ilgili yapacağımız son şey ise Delegate ve Datasource’u ViewController’a bağlamak. Bunun en büyük sebebi de elimize hazır verilen tablo üzerinde ihtiyaçlarımıza bağlı olarak değişiklik yapmak istememiz. TableView seçili iken “control/kntrl” tuşunuza basılı tutarak farenizi ViewController üzerinde bulunan sarı ikona getirmeniz ve delegate/datasource objelerini seçmeniz gerekiyor.

Bunu da yaptıktan sonra geriye bir tek objemizi kodumuza tanıtmak geldi. Sağ üstte bulunan Assistant Editor seçeneğini aktif ediyoruz ve “kntrl/option” tuşuna basarak objemizi koda sürüklüyoruz. İsmini arkadaşTableView diyorum böylece objem daha akılda kalıcı olabilir. Tasarım kısmı sadece bu kadar.

Şimdi kodlama kısmına geçiyorum. Burada kodun

kısmında TableView’a dair Delegate ve Datasource’dan bahsetmek durumundayız. Bu kısmı şu kod ile değiştirin.

Uygulamamız size bir kırmızı hata verecektir. Çok normal. Çünkü tabloyu özelleştirmek istiyoruz ama buna dair değiştireceğimiz fonksiyonlar eksik. Hataya basarak bizim için otomatik olarak bu eksikleri gider diyoruz. Böylece bizim için 2fonksiyonu oluşturuyor. “numberOfRowsInSection ve cellForRowAt”.

Bu fonksiyonların çalışma prensipleri şöyledir:

  • numberOfRowsInSection bize tablonun kaç satırdan oluşacağını soruyor. Burada genellikle dizilerimizin sayısını veririz.
  • cellForRowAt bize hücremizin içeriğinde ne olduğunu belirtiyor. Burada arkadaşlarımızın ismini ve yaşını belirteceğiz.

Öncelikle iki Array yaratıyoruz.

Daha sonra numberOfRowsInSection fonksiyonunu şu şekilde düzeltiyoruz.

Böylece tablo çizildiğinde bize arkadaş sayımız kadar hücre yaratacak.

Daha sonra cellForRowAt fonksiyonu içerisini düzenlememiz gerekiyor. Öncelikle bir hücre yaratıyoruz. Bu hücreyi tablo içerisinden çağırıyoruz ve tasarımda yarattığımız “arkadaş” tanımını kullanıyoruz.

Daha sonra bu cell içerisindeki textLabel ve detailTextLabel objelerine ulaşıyoruz ve hangi sırada isek o arkadaşımızın yaşı ile ismini veriyoruz.

En son return cell diyerek tablomuzu yaratmış oluyoruz. Uygulamamızı çalıştırdığımızda sonucu görebilirsiniz.

Örnek Proje — UITableView

Uygulamanın tam halini GitHub arşivimizde bulabilirsiniz. Part 2'de görüşmek üzere!

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.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz.

Twitter | Instagram | Facebook

--

--