前言
本文主要給大家介紹了關于swift 4自定義UITableCell的相關內容，分享出來供大家參考學習價值，下面話不多說了，來一起看看詳細的介紹吧
直接上圖
新建MenuCell
創建一個類 MenuCell 繼承 UITableViewCell 添加兩個要實現的方法
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 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數很高的布局庫，用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里創建好的數據傳過來并給icon，title，附上值
func setValueForCell(menu: MenuModel) { title.text = menu.title icon = ImageUtil.loadImageFromUrl(imageView: icon, url: menu.url)}方法里的 ImageUtil 是我封裝的一個靜態方法，用于顯示網絡圖片的
class ImageUtil { class func loadImageFromUrl(imageView: UIImageView, url: String) -> UIImageView { //定義URL對象 let url = URL(string: url) //從網絡獲取數據流 let data = try! Data(contentsOf: url!) //通過數據流初始化圖片 let newImage = UIImage(data: data) imageView.image = newImage return imageView }} 上面自定義的加載網絡圖片的方法會有很長的延遲，當點擊Cell進入下一面的時候，網絡加載會花大量時間，這樣會導致頁面出現白屏，解決辦法有兩個，一個是把加載圖片的地方改成異步加載，一個是引用第三方的圖片加載庫
將網絡消耗的代碼放在異步線程里方法
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 網上查了一下，這是把ui操作放在異步里執行的問題，如果一個異步操作耗時很長，那么程序就會進入假死狀態，系統就會彈出 就用無響應 這樣的提示，所以這種是不推薦的
另一種是引入第三方類庫 https://github.com/onevcat/Kingfisher
用法也很簡單
import Kingfisherlet url = URL(string: menu.icon)//設置加載菊花self.icon.kf.indicatorType = .activityself.icon.kf.setImage(with: url)
方法里的 MenuModel 是我定義的一個菜單的結構體
struct MenuModel { var title: String var url: String}處理TableView渲染方法
先在在tableView里注冊自己定義的 TableCell
override func viewDidLoad() { // ... //注冊cell的Identifier，用于渲染cell self.tableView.register(MenuCell.self, forCellReuseIdentifier: "cellID") }修改渲染方法
//渲染cellfunc tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") as! MenuCell cell.setValueForCell(menu: data[indexPath.row]) return cell}這樣就好了，直接運行看效果吧
還是帶上圖片了app才好看
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
