swift 4自定義UITableCell的方法示例

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

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

前言

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

直接上圖

新建MenuCell

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

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

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

初始化組件

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

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)
 }
}

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

布局

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

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
 // 設置icon組件距離box組件左，上各10個距離單位（不太清楚是不是像素），偏移12個距離單位
 make.left.top.equalTo(10).offset(12)
 // 設置icon的寬高各20個單位
 make.width.height.equalTo(20)
 }
 
 title.snp.makeConstraints { (make) in
 // 設置title組件位置從icon組件的右邊開始算起，再偏移10個單位
 make.left.equalTo(self.icon.snp.right).offset(10)
 // 設置title距離上面高度跟icon一樣
 make.top.equalTo(self.icon)
 }
}

給TableCell附值

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

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

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

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

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

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)
}

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

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

用法也很簡單

import Kingfisher

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

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

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

處理TableView渲染方法

先在在tableView里注冊自己定義的 TableCell

override func viewDidLoad() {
 // ...
 //注冊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
}

這樣就好了，直接運行看效果吧

還是帶上圖片了app才好看

總結(jié)

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