Herkese merhaba bu yazıda Custom TableView UI elemanından bahsedeceğiz yani normal düz bir listview yapısından ziyade daha farklı UI elemanları ekleyebildiğimiz daha zengin bir yapı oluşturabileceğimiz bir yapı. İlk öncelikle ViewController’ımızı TableView’e dönüştürelim bunu yapmak için 2 adet interface’yi sınıfımıza dahil etmeliyiz. O interface’ler şunlar:
- UITableViewDataSource
- UITableViewDelegate
İnterface’leri dahil ederken “,” ile ayırarak direk sınıfımızın arkasına ekliyoruz ve bu interface’leri dahil ettiğimizde bizden 2 adet fonksiyonu ovveride etmemizi istiyor. Bu ovveride ettiğimiz 2 fonksiyon zaten TableView’imizin temel 2 fonksiyonu. Bu fonksiyonlardan biri TableView’de kaç satır olacağını belirlememizi sağlarken diğer fonksiyon TableView içerisine ekleyeceğimiz verileri gösteren fonksiyon. Bunun dışında epey fonksiyon mevcut TableView’imizi daha da özelleştirmek için yazının devamında bu fonksiyonlardan bazılarına da değineceğim. Daha sonra bizim için bir şablon niteliğinde olacak bir tableViewCell sınıfı oluşturacağız TableView satırlarımızın nasıl görüneceğini burada tasarlayacağız ve en son bu hazırladığımız hücreyi TableView’imiz ile ilişkilendireceğiz. Şimdi TableView’imizden başlayalım.
import UIKit
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {//sınıfları implemente ettik
var tableView = UITableView()//kullanacağımız tableview
var array = ["macbook","ipad","iphone"]
var array2 = ["computer","tablet","phone"]
var imageArray = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .red
imageArray.append(UIImage(named: "macbookImg")!)//ilgili resimler ile image array'i dolduruldu
imageArray.append(UIImage(named: "tabletImg")!)
imageArray.append(UIImage(named:"iphoneImg" )!)
tableView = UITableView(frame: UIScreen.main.bounds)//tableview'in tüm ekranı kaplaması sağlandı
tableView.delegate = self //burada bir nevi kalıtım yapıyoruz viewController'ımıza tableview özellikleri veriyoruz
tableView.dataSource = self
tableView.separatorStyle = .none
tableView.register(MenuCell.self, forCellReuseIdentifier: "menuId") //buradaki id kısmı önemli aşağıdaki ile aynı olmalı
self.view.addSubview(tableView)//tableView'imizi viewController'imiza ekledik
}
//bu fonksiyonları ovverride ettirdi bize
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {//tableview'imizin kaç satır olacağı
return array.count //elimizdeki dizilerden birinin boyutu kadar olsun dedik
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {//hücre içindeki satırlar dolduruluyor
let cell = MenuCell(style: UITableViewCellStyle.default, reuseIdentifier: "menuId") //MenuCell sınıfında hücre şablonumuzu elde ediyoruz
cell.l1.text = array[indexPath.row]//array dizimizin içindeki verileri tek tek satırlara yazıyoruz
cell.l2.text = array2[indexPath.row]//array2 dizimizin içindeki verileri tek tek satırlara yazıyoruz
cell.img.image = imageArray[indexPath.row] //resimleri aktarıyoruz
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { //herhangi bir hücreye tıklanma olayı
var alert = UIAlertController(title: "Buraya Tıkladınız", message:array2[indexPath.row] , preferredStyle: UIAlertControllerStyle.alert)
alert.addAction(UIAlertAction(title: "Tamam", style:UIAlertActionStyle.default , handler: nil))
self.present(alert,animated: true,completion: nil)
}
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {//hücre arka planı
let bgImg = UIImage(named: "viewBg")
let bgImgView = UIImageView(image: bgImg, highlightedImage: nil)
cell.backgroundView = bgImgView
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {//hücrelerin satır yükseklikleri
return 100
}
}
- Burada 5. satırdan 14. satıra kadar dizi tanımlamaları ve içlerini doldurma aşaması.
- 16. satırdan 20. satıra kadar TableView tanımlamaları. 16. satırda TableView’imizin ekranın komplesini kaplamasını istiyoruz istersek ekranın belirli bir kısmınıda kaplattırabiliriz. 20. satırda bizim şablon olarak göstereceğimiz sınıfımızı gösteriyoruz.
- 26. satırdaki fonksiyon TableView’de kaç satır olacağını belirtiyor.
- 30. satırdaki fonksiyon TableView içine referans ettiğimiz, şablon TableViewCell sınıfımızın içindeki UI elemanlarına, atama yapmamızı sağlıyor.
- 38. satırdaki fonksiyonda herhangi bir satıra tıkladığımızda ne olmasını istiyorsak onu yazıyoruz ben mesaj kutusu açtım basitçe.
- 44. satırdaki fonksiyonda satırların arka planlarına bir resim ekledim, görsel tasarım açısından daha güzel sonuçlar elde etmek için.
- Son olarak 50. satırdaki fonksiyonda hücrelerin yüksekliklerini ayarladım.
Şimdi TableViewController bittiğine göre artık içine yerleştireceğimiz TableViewCell sınıfını inceleyelim.
import UIKit
class MenuCell: UITableViewCell {
var screenSize = UIScreen.main.bounds //cihaz ekran boyutları alındı
var img = UIImageView() //tableview hücremize ekleyeceğimiz resim
var l1 = UILabel() //tableview hücremize ekleyeceğimiz label 1
var l2 = UILabel() //tableview hücremize ekleyeceğimiz label 2
var subView = UIView()
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {//hücremiz burada hazırlanacak initialize edilecek
super.init(style: style, reuseIdentifier: reuseIdentifier)
subView = UIView(frame: CGRect(x:0,y:0,width:screenSize.width*0.8,height:screenSize.height*0.6))
subView.backgroundColor = UIColor.clear
img = UIImageView(frame: CGRect(x:subView.bounds.width*0.05,y:subView.bounds.height*0.08,width:subView.bounds.width*0.1,height:subView.bounds.height*0.1))
img.clipsToBounds = true
img.contentMode = UIViewContentMode.scaleAspectFit // resimleri tam olarak oranlı küçültmesi için
l1 = UILabel(frame: CGRect(x:subView.bounds.width*0.5,y:0,width:subView.bounds.width*0.3,height:subView.bounds.height*0.2))
l1.textColor = .black
l1.text = "Apple"
l2 = UILabel(frame: CGRect(x:subView.bounds.width*0.5,y:subView.bounds.height*0.05,width:subView.bounds.width*0.3,height:subView.bounds.height*0.2))
l2.textColor = .black
l2.text = "Steve Jobs"
subView.addSubview(img)
subView.addSubview(l1)
subView.addSubview(l2)
self.addSubview(subView)
}
}
- Burada 13. satırdan 17. satıra kadar TableView satırlarında hangi UI elemanlarını kullancaksak onları tanımladık. Ben bunu bir ağaç yapısı gibi düşünürsek parent olarak bir adet view tanımladım ve buna subView adını verdim, baktığımızda bu subView benim listede ki bir satırımı ifade edecek ve diğer UI elemanlarını bunun altına ekleyeceğim. Bunu illa bu şekilde yacağız diye bir şey yok tabi.
- 24. satırdaki gibi init fonksiyonunu ovveride etmeliyiz bizim TableView’imiz açıldığı anda tüm UI elemanlarını hazırlaması için zaten bu tüm UI elemanlarını bu fonksiyon içerisinde tanımlayacağız.
- 27. satırdan 41. satırada kadar daha önceden de yaptığımız gibi yine UI elemanlarını elle yazdık ve ekranda ki konumlarını belirledik.
- 43. satırdan 46. satıra kadar baktığımızda yukarıda bahsettiğim olayı görüyoruz burada img, l1 ve l2 UI elemanlarını subView altına ekledim ve son olarakta subView’i ana view’e ekledim.
Herkese iyi çalışmalar.