UIKit: Custom TableView Cell
UITableView uygulamaların iskeletini oluşturuyor. Bu yapıyı meydana getiren hücreler ise küçük ama gerçekte olduğu gibi apayrı bir dünya!
Merhaba değerli Turkishkit okuyucuları 🙂 Bu yazımızda başlangıç projemizi daha güzel ve işlevsel bir uygulamaya dönüştüreceğiz! TableView hücrelerini daha canlı bir hale getirerek daha fazla bilgi sunmasını sağlayacağız.
Daha önceki yazımızda TableView konusuna giriş yapmıştık. Dilerseniz göz gezdirebilirsiniz.
Hazırlık
Bir önceki kısmı okumadıysanız geri dönüp okumanızı ve final projemize göz atmanızı öneririm. Projeye GitHub üzerinden ulaşabilirsiniz.
Önceki yazımızda bir hücreyi 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:
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.
İç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.
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:
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. Projenin bitmiş halinden bu resimlere ulaşabilirsiniz. ViewController dosyamızda bir değişken belirleyip Array içinde bu resimleri tutuyoruz.
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:
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. 💪🏻
Projeyi Github Repomuzda bulabilirsiniz:
Hepinize keyifli kodlamalar dilerim. 🙂
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.
