TableView Giriş

Liste halindeki bilgileri göstermek için kullanılan “Table View” yapısının özelliklerini öğreneceksiniz.

Mentorluk

Randevu OluşturKredi Al

Liste halindeki bilgileri göstermek için kullanılan “Table View” yapısının özelliklerini öğreneceksiniz.
Neredeyse tüm uygulamaların iskeletini oluşturan bu yapıyı siz de kolayca öğrenip kendi uygulamanızda kullanabilirsiniz!

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

    
    class ViewController: UIViewController {
        ...
    }
    

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

    
    class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
        ...
    }
    

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.

    
    var arkadasIsimler = ["Ali","Ömer","Ayşe"]
    var arkadasYaslari = ["19","25","45"]
    

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

    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return arkadasIsimleri.count
    }
    

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.

    
    let cell = tableView.dequeueReusableCell(withIdentifier: "arkadas")!
    

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.

    
    cell.textLabel?.text = arkadasIsimleri[indexPath.row]
    cell.detailTextLabel?.text = arkadasYaslari[indexPath.row]
    

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

Sıradaki

TableView İleri

“Table View” hakkında edineceğiniz bilgileri özel “Table View” hücreleri ekleyerek geliştireceksiniz.

Videolar

Swift Temellerine Giriş
Swift Temellerine Giriş
Teknolojinin Dili Kodlama
Teknolojinin Dili Kodlama
Playground Temelleri
Playground Temelleri
Veri Tipleri & Sabitler ve Değişkenler
Veri Tipleri & Sabitler ve Değişkenler
Operatörler
Operatörler
Kontrol Akışı
Kontrol Akışı
Fonksiyonlar
Fonksiyonlar
String'ler
String'ler
Objeler, Metotlar ve Özellikler
Objeler, Metotlar ve Özellikler
Xcode ile Tanışın
Xcode ile Tanışın
Struct
Struct
Class
Class
Koleksiyonlar
Koleksiyonlar
Döngüler
Döngüler
Xcode
Xcode
“Build”, “Run” ve “Debug”
“Build”, “Run” ve “Debug”
Arayüz Elemanlarını Yakından Tanıyın
Arayüz Elemanlarını Yakından Tanıyın
Dokümantasyon
Dokümantasyon
“Interface Builder” Temelleri
“Interface Builder” Temelleri
"UIKit" ile Kullanıcı Arayüzüne Giriş
"UIKit" ile Kullanıcı Arayüzüne Giriş
İlk Uygulama
İlk Uygulama
Kontrol Elemanları
Kontrol Elemanları
Autolayout & Stackview
Autolayout & Stackview
Optionals
Optionals
Tip Dönüşümleri
Tip Dönüşümleri
Guard
Guard
Uygulama Hayat Döngüsü ve Veri Modelleme
Uygulama Hayat Döngüsü ve Veri Modelleme
Scope Sabit & Değişken
Scope Sabit & Değişken
Enumerations
Enumerations
Protokoller
Protokoller
Segue ve Navigation Controller
Segue ve Navigation Controller
TabbarController
TabbarController
View Controller Hayat Döngüsü
View Controller Hayat Döngüsü
Basit Akışlar Oluşturmak
Basit Akışlar Oluşturmak
Uygulama Anatomisi ve Hayat Döngüsü
Uygulama Anatomisi ve Hayat Döngüsü
Model View Controller
Model View Controller
Uygulamanızda Veri Kaydedin
Uygulamanızda Veri Kaydedin
ScrollView
ScrollView
TableView Giriş
TableView Giriş
TableView İleri
TableView İleri
Verileri Kaydetmek
Verileri Kaydetmek
System View Controllers
System View Controllers
Uygulama Geliştirin
Uygulama Geliştirin
Karmaşık Veri Girişi Ekranları Oluşturmak
Karmaşık Veri Girişi Ekranları Oluşturmak
Closures
Closures
Extensions
Extensions
Pratik Animasyonlar
Pratik Animasyonlar
İnternet ile İletişime Geçin
İnternet ile İletişime Geçin
İnternet ile Çalışmak
İnternet ile Çalışmak
JSON
JSON
Concurrency
Concurrency