TableView İleri

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

Mentorluk

Randevu OluşturKredi Al

Önceki konumuzda bir UITableView hücresini yaratmış ve basit bir format ile elimizdeki bilgileri vermiştik. Şimdi bu hücreleri biraz daha geliştirelim!

UITableView hücresini özelleştirme

Öncelikle “Arkadaş” adını verdiğimiz hücremize tıklıyoruz. Burada sağ panel bize hücremize dair bilgileri gösteriyor. “Table View Cell” elementini şeçtiğimizden emin olmamız gerekiyor:

Image for post
Table View Cell Attributes Inspector

Burada daha önce işaretlediğimiz Style kısmını yeniden seçip türüne “Custom” diyoruz. Bu kısımda hücremizden bilgiler kayboluyor. Ama korkmayın! Onları güzelleştireceğiz.

İlk olarak hücremizin yüksekliğini arttırmak istiyoruz. Bunu sağda bulunan Size Inspector menüsünden gerçekleştiriyoruz. Row Height(yani hücre yüksekliği) değerini 150 olarak ayarlıyoruz.

Image for post
Size Inspector

İçini doldurmak üzere bir tane UIImageView ve iki adet UILabel ekliyoruz. ImageView 128x128 boyutunda, başlık için olan Label System-Bold formatında ve 25 boyutunda, diğeri ise System-Light formatında ve 25 boyutunda olacak şekilde ayarladık. UILabel alanlarını hücrenin önerdiği kenara kadar uzatıyoruz, böylece uzunlukları bir kırpma yaratmayacaktır. Arka plana dilerseniz bir renk verebilirsiniz ve #9debf4 kodu ile ekran görüntüsündeki renge ulaşabilirsiniz. Sonunda aşağıdaki tasarıma kavuşuyoruz.

Image for post
Hücrenin Tasarımı

UITableView hücresini kodlama

Artık yeni hücremize yakışır bir kod yazmamız gerekiyor. Yeni bir Cocoa Touch Class yaratıyoruz. “ Command + N” ile kısayoldan yeni bir dosya yaratabilirsiniz.

Yarattığımız sınıfa “ArkadasTableViewCell” ismini veriyoruz. Türü de “UITableViewCell” oluyor.

Storyboard dosyamıza gelerek hücremizi yeniden seçiyoruz. Identity Inspector menüsünün altında Class kısmında yarattığımız kodu seçiyoruz. Böylece tasarımımız kod ile buluşuyor!

Son olarak Assistant Editor menüsünü açıyoruz ve “kntrl” tuşuna basarak yarattığımız arayüz elemanlarını kodumuza sürüklüyerek Outlet olarak bağlıyoruz. Eğer otomatik olarak gelmez ise Manual yönlendirip dosyayı seçebilirsiniz. Son adımlara yaklaşırken hücremiz şu şekilde görünüyor:

    
    class ArkadasTableViewCell: UITableViewCell {
        @IBOutlet weak var arkadasResmi: UIImageView!
        @IBOutlet weak var arkadasIsmi: UILabel!
        @IBOutlet weak var arkadasYasi: UILabel!
    }
    

Bu noktada iki eksiğimiz var. Uygulamamızda yer alan TableView bu düzenlemeden habersiz ve koyacak bir resmimiz henüz yok.

Resimler için internet üzerinden üç resim bulup bunları Assets.xcassets dosyamıza sürüklüyoruz. ViewController dosyamızda bir değişken belirleyip Array içinde bu resimleri tutuyoruz.

    
    var arkadasResimleri = [UIImage(named: "arkadas1"), UIImage(named: "arkadas2"), 
    UIImage(named: "arkadas3")]
    var arkadasIsimleri = ["Emirhan", "Ufuk", "Râna"]
    var arkadasYaslari = [23, 24, 21]
    

Geriye bir tek şey kaldı. O da bu yeni hücre düzenimizi uygulamamıza anlatmak. Bunun için ViewController dosyamızdaki fonksiyonumuza dönüyoruz.

Buradaki kodları değiştiriyoruz. Öncelikle cell tanımlamayı değiştiriyoruz. Bu, uygulamaya hücre olarak ne kullanacağımızı gösteriyor. Son olarak yine fonksiyonumuz içerisine resimleri çizdirebilmek adına aşağıdaki kodu yazıyoruz:

    
    func tableView(_ tableView: UITableView, cellForRowAt 
    indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "arkadaş") 
        as! ArkadasTableViewCell

        cell.arkadasResmi.image = arkadasResimleri[indexPath.row]
        cell.arkadasIsmi.text = arkadasIsimleri[indexPath.row]
        cell.arkadasYasi.text = arkadasYaslari[indexPath.row]
    }
    

Örnek Uygulamamız Bitti!

UITableView elementini daha detaylı olarak incelediğimiz ve hücreleri kendimize göre tasarlayıp, kodladığımız uygulamamızın son hali işte böyle gözüküyor. 💪🏻

Image for post
UITableViewCell Örnek Uygulaması

Sıradaki

Verileri Kaydetmek

Protokollerden faydalanarak veri kaydetmenin yollarını öğreneceksiniz.

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