快捷導(dǎo)航

swift 4自定義UITableCell的方法示例

更新時(shí)間：2018年06月11日 10:59:40 作者：朋也

這篇文章主要給大家介紹了關(guān)于swift 4自定義UITableCell的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要給大家介紹了關(guān)于swift 4自定義UITableCell的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)價(jià)值，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

直接上圖

新建MenuCell

創(chuàng)建一個(gè)類 MenuCell 繼承 UITableViewCell 添加兩個(gè)要實(shí)現(xiàn)的方法

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
 super.init(style: style, reuseIdentifier: reuseIdentifier)
}

required init?(coder aDecoder: NSCoder) {
 super.init(coder: aDecoder)
}

初始化組件

把tableCell里要顯示的組件都初始化好，我這里就只有兩個(gè)組件

class MenuCell: UITableViewCell {
 var icon = UIImageView()
 var title = UILabel()
 
 lazy var box = UIView()
 
 override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
 super.init(style: style, reuseIdentifier: reuseIdentifier)
 
 box.addSubview(icon)
 box.addSubview(title)
 
 self.addSubview(box)
 }
}

組件加進(jìn)去了，接下來(lái)就是布局了，Github上有個(gè)star數(shù)很高的布局庫(kù)，用pod安裝就可以用了，地址：https://github.com/SnapKit/SnapKit

布局

用法還是比較簡(jiǎn)單的，看文檔就能明白大概用法了，下面是我的布局

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
 super.init(style: style, reuseIdentifier: reuseIdentifier)
 
 box.addSubview(icon)
 box.addSubview(title)
 
 self.addSubview(box)
 
 icon.snp.makeConstraints { (make) in
 // 設(shè)置icon組件距離box組件左，上各10個(gè)距離單位（不太清楚是不是像素），偏移12個(gè)距離單位
 make.left.top.equalTo(10).offset(12)
 // 設(shè)置icon的寬高各20個(gè)單位
 make.width.height.equalTo(20)
 }
 
 title.snp.makeConstraints { (make) in
 // 設(shè)置title組件位置從icon組件的右邊開(kāi)始算起，再偏移10個(gè)單位
 make.left.equalTo(self.icon.snp.right).offset(10)
 // 設(shè)置title距離上面高度跟icon一樣
 make.top.equalTo(self.icon)
 }
}

給TableCell附值

在 MenuCell 里新建一個(gè)方法，可以把在 TableView里創(chuàng)建好的數(shù)據(jù)傳過(guò)來(lái)并給icon，title，附上值

func setValueForCell(menu: MenuModel) {
 title.text = menu.title
 icon = ImageUtil.loadImageFromUrl(imageView: icon, url: menu.url)
}

方法里的 ImageUtil 是我封裝的一個(gè)靜態(tài)方法，用于顯示網(wǎng)絡(luò)圖片的

class ImageUtil {
 
 class func loadImageFromUrl(imageView: UIImageView, url: String) -> UIImageView {
 //定義URL對(duì)象
 let url = URL(string: url)
 //從網(wǎng)絡(luò)獲取數(shù)據(jù)流
 let data = try! Data(contentsOf: url!)
 //通過(guò)數(shù)據(jù)流初始化圖片
 let newImage = UIImage(data: data)
 imageView.image = newImage
 return imageView
 }
}

上面自定義的加載網(wǎng)絡(luò)圖片的方法會(huì)有很長(zhǎng)的延遲，當(dāng)點(diǎn)擊Cell進(jìn)入下一面的時(shí)候，網(wǎng)絡(luò)加載會(huì)花大量時(shí)間，這樣會(huì)導(dǎo)致頁(yè)面出現(xiàn)白屏，解決辦法有兩個(gè)，一個(gè)是把加載圖片的地方改成異步加載，一個(gè)是引用第三方的圖片加載庫(kù)
將網(wǎng)絡(luò)消耗的代碼放在異步線程里方法

func setValueForCell(menu: MenuModel) {
 title.text = menu.title
 DispatchQueue.global().async {
 self.icon = ImageUtil.loadImageFromUrl(imageView: self.icon, url: menu.url)
 }
 //icon = ImageUtil.loadImageFromUrl(imageView: icon, url: menu.url)
}

這樣程序就不會(huì)卡了，運(yùn)行會(huì)看到圖片最開(kāi)始是沒(méi)有的，然后慢慢的加載出來(lái)，但這樣xcode會(huì)報(bào)一個(gè)錯(cuò) UIImageView.image must be used from main thread only 網(wǎng)上查了一下，這是把ui操作放在異步里執(zhí)行的問(wèn)題，如果一個(gè)異步操作耗時(shí)很長(zhǎng)，那么程序就會(huì)進(jìn)入假死狀態(tài)，系統(tǒng)就會(huì)彈出就用無(wú)響應(yīng) 這樣的提示，所以這種是不推薦的

另一種是引入第三方類庫(kù) https://github.com/onevcat/Kingfisher

用法也很簡(jiǎn)單

import Kingfisher

let url = URL(string: menu.icon)
//設(shè)置加載菊花
self.icon.kf.indicatorType = .activity
self.icon.kf.setImage(with: url)

方法里的 MenuModel 是我定義的一個(gè)菜單的結(jié)構(gòu)體

struct MenuModel {
 var title: String
 var url: String
}

處理TableView渲染方法

先在在tableView里注冊(cè)自己定義的 TableCell

override func viewDidLoad() {
 // ...
 //注冊(cè)cell的Identifier，用于渲染cell
 self.tableView.register(MenuCell.self, forCellReuseIdentifier: "cellID")
 
}

修改渲染方法

//渲染cell
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") as! MenuCell
 cell.setValueForCell(menu: data[indexPath.row])
 return cell
}

這樣就好了，直接運(yùn)行看效果吧

還是帶上圖片了app才好看

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。