脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Swift → swift 4自定义UITableCell

swift 4自定义UITableCell的方法示例

 更新时间：2018年06月11日 10:59:40   作者：朋也  
这篇文章主要给大家介绍了关于swift 4自定义UITableCell的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要给大家介绍了关于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 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数很高的布局库，用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 Kingfisher

let url = URL(string: menu.icon)
//设置加载菊花
self.icon.kf.indicatorType = .activity
self.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")
 
}

修改渲染方法

//渲染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才好看

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

相关文章

  • Swift5中fileprivate与private的差别浅析

    Swift5中fileprivate与private的差别浅析

    这篇文章主要给大家介绍了关于Swift5中fileprivate与private的差别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Swift5具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • iOS Swift UICollectionView横向分页滚动，cell左右排版问题详解

    iOS Swift UICollectionView横向分页滚动，cell左右排版问题详解

    UICollectionView是iOS中比较常见的一个控件，这篇文章主要给大家介绍了关于iOS Swift UICollectionView横向分页滚动，cell左右排版问题的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随小编来一起学习学习吧。
    2017-12-12
  • Swift初始化方法的使用介绍

    Swift初始化方法的使用介绍

    Swift有着超级严格的初始化方法，不仅强化了designated初始化方法的地位，所有不加修饰的init方法都需要在方法中确保非Optional的实例变量被赋值初始化，下面这篇文章主要给大家介绍了关于Swift中初始化init的相关资料，需要的朋友可以参考下。
    2022-08-08
  • Swift中转义闭包示例详解

    Swift中转义闭包示例详解

    在Swift 中的闭包类似于结构块,并可以在任何地方调用,下面这篇文章主要给大家介绍了关于Swift中转义闭包的相关资料,需要的朋友可以参考下
    2021-11-11
  • 利用Swift如何计算文本的size示例详解

    利用Swift如何计算文本的size示例详解

    这篇文章主要给大家介绍了关于利用Swift如何计算文本的size的相关资料，文中通过示例代码介绍的非常详细，对各位iOS开发者们的工作或者学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • swift中AnyObject和Any的介绍与区别详解

    swift中AnyObject和Any的介绍与区别详解

    虽然使用swift开发了一段时间，但是感觉对一些基础的东西了解不是比较透彻，在查询了许多资料以后还是打算自己动手记录一下，下面这篇文章主要给大家介绍了关于swift中AnyObject和Any的介绍与区别的相关资料，需要的朋友可以参考下。
    2017-12-12
  • 在 Swift 中编写Git Hooks脚本的方法

    在 Swift 中编写Git Hooks脚本的方法

    在本例中，我使用了 commit-msg 钩子，它能够在当前提交信息生效前修改此信息，钩子由一个参数调用，该参数是指向包含用户输入的提交消息的文件的路径，这意味着，为了改变提交消息，我们只需要从文件中读取、修改其内容，然后写回调用挂钩的文件
    2022-06-06
  • 详解Swift中enum枚举类型的用法

    详解Swift中enum枚举类型的用法

    Swift中通过enum关键字可以直接创建出枚举对象,而且可以使用switch和case语句来进行流程控制,十分强大和灵活,这里我们就来详解Swift中enum枚举类型的用法
    2016-06-06
  • Swift中添加双击手势识别器

    Swift中添加双击手势识别器

    在这次IOS应用开发教程中，我们打算实现手势识别。正如你所知道的，IOS支持大量的手势操作，它们能提供了很好的应用控制和出色用户体验。
    2019-08-08
  • 浅析Swift中struct与class的区别(汇编角度底层分析)

    浅析Swift中struct与class的区别(汇编角度底层分析)

    这篇文章主要介绍了Swift中struct与class的区别 ,本文从汇编角度分析struct与class的区别，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-03-03

最新评论