Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看280 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 280|回复: 1
收起左侧

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下

[复制链接]
jswift 发表于 2016-10-12 21:50:05 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码


1、前言

大部分APP里面都会用到UITableView去展示一些列表,列表高度有固定和根据内容确定的。

之前做过很多高度不固定cell都是通过代码去计算,经常会遇到东西做完之后产品或者设计觉得不好又要改的,那之前写的计算高度的代码又要改很多,感觉很麻烦。

这篇文章主要介绍怎样利用autolayout帮我们计算不固定cell的高度,再也不用担心改动很多了。




2、最终效果

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 1

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下 - 敏捷大拇指 - Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 1





3、步骤



3.1、创建自定义cell

新建一个继承UITableViewCell的自定义cell,我一般喜欢用xib来搭建UI,可以少写很多代码。

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 2

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下 - 敏捷大拇指 - Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 2




3.2、拖控件设置添加约束,拖线

这里就不详细介绍怎么添加约束了,实际工作中可以按照设计给的标注添加约束。将图片距离父view最右边的约束拖出来。

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 3

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下 - 敏捷大拇指 - Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 3


基本上UI相关的都完成了,剩下的就是赋值和一些逻辑处理了。



3.3、cell赋值和计算逻辑

[Swift] 纯文本查看 复制代码
var isCalculateHeight = false // 用来标记是否是计算高度的cell


[Swift] 纯文本查看 复制代码
var news : CellModel? { // model
        didSet { // 这里做一些赋值和计算操作
            lbTitle.text = news?.title
            lbDesc.text = news?.desc
            lbTime.text = news?.time
            var showImg = false
            if (news?.imageUrl?.characters.count)! == 0 {
                conImgRight.constant = -80 //如果没有图片则不显示图片 -80可以理解为图片的maxX - 80 = 父试图的最右边(也就是宽度)
            }else {
                conImgRight.constant = 15
                showImg = true
            }
            layoutIfNeeded() // 当内容或者约束发生改变时会重新布局
            if isCalculateHeight == true {  // 只有需要计算高度时才执行以下代码
                var cellHeight = CGFloat(lbTime.frame.maxY + 12) // 时间label的底部 + 设计要求的高度
                if showImg == true { // 如果不需要显示图片的话就不用管是图片距离底部最近还是时间距离底部最近了
                    if imgCover.frame.maxY > lbTime.frame.maxY {
                        cellHeight = CGFloat(imgCover.frame.maxY + 12)
                    }
                }
                news?.cellHeight = cellHeight
            }
        }
    }




3.4、利用cell自身去计算高度


3.4.1、创建计算cell方法:

[Swift] 纯文本查看 复制代码
 static func createCalculateCell(maxHeight:CGFloat) -> TableViewCell{
        let cell = TableViewCell.createCell()
        cell.isCalculateHeight = true // 这里要标记为true
        var newFrame = cell.frame
        newFrame.size.width = UIScreen.main.bounds.width // 这里注意一定要把cell宽度改为屏幕的宽度或者自己想要的宽度
        newFrame.size.height = maxHeight // ios7对autolayout的支持不是很好所以最好给一个最大高度
        cell.frame = newFrame
        return cell
    }


这里需要注意的是,从xib中加载出来的view的大小就是xib里面设置的大小,所以计算高度的cell宽度一定要和屏幕一样大不然计算出来的高度会不准确。


3.4.2、创建Cell方法

[Swift] 纯文本查看 复制代码
static func createCell()->TableViewCell {
        /* 注意,这里有个坑。如果在cell里面又加了手势的话,那就不能取数组的最后一个了。因为最后一个是手势不是cell
         */
        if let newCell = Bundle.main.loadNibNamed(ID, owner: nil, options: nil)?.last as? TableViewCell {
            return newCell;
        }else {
            let cell = TableViewCell(style: .default, reuseIdentifier: ID)
            cell.textLabel?.text = "error"
            return cell;
        }
    }



3.4.3、可循环利用cell的创建

[Swift] 纯文本查看 复制代码
static func cell(tableView:UITableView!) -> TableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: ID)
        if cell == nil {
            cell = TableViewCell.createCell()
        }
        return cell as! TableViewCell
    }




3.5、外部使用

提供一个专门用来计算高度的cell,最好用懒加载的方式。如果一个页面有很多种样式的话,有些cell可能根本就没有出现过所以就没必要创建了。

[Swift] 纯文本查看 复制代码
lazy var dataArray = Array<CellModel>() 
lazy var calculateCell = TableViewCell.createCalculateCell(maxHeight: 999)


重写tableView cell高度的代理方法:

[Swift] 纯文本查看 复制代码
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row < dataArray.count {
            let news = dataArray[indexPath.row]
            if news.cellHeight <= 0 { // 只有当没有高度时才需要计算
                calculateCell.calculate(model: news)
            }
            return news.cellHeight
        }
        return 0
    }


取模型的时候最好是判断一下数组越界的问题。




4、横屏效果

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 4

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下 - 敏捷大拇指 - Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 4





5、屏幕旋转处理

[Swift] 纯文本查看 复制代码
/*
 *首先注册屏幕旋转通知
 */
func initListener() {
        NotificationCenter.default.addObserver(self, selector: #selector(TableViewController.orientationDidChange(noti:)), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
 }
 deinit {
        NotificationCenter.default.removeObserver(self)
  }
/*
 *屏幕宽度改变时也要改变计算cell的宽度,把已经算好的高度改为0(也可以多增加一个属性这样横竖屏算一次高度就可以了)
 */
 func orientationDidChange(noti:Notification) {
        dataArray.foreach { (news) in
            news.cellHeight = 0
        }
        calculateCell.updateWidth(maxHeight: 999)
        tableView.reloadData()
    }





6、源代码下载

点击这里下载源代码

Swift 3.0实现的利用autolayout计算自定义cell高度,源代码免费下载 CalculateCellHei.zip (288.24 KB, 下载次数: 4)

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

本帖被以下淘专辑推荐:

firefighter 发表于 2016-10-13 09:13:39 | 显示全部楼层
回复看看。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表