iOS 基于 SnapKit 纯代码实现 TableViewCe

2019-06-09  本文已影响0人  ImWiki

SnapKit 是非常强大的纯代码布局框架,可以做出非常复杂的UI,本文介绍如何通过SnapKit实现TableViewCell,并自适应高度,实现有2个关键点:

  1. 修改TableView的高度自适应,tableView.rowHeight = UITableView.automaticDimension。
  2. 布局代码的最后一个子视图需要设,make.bottom.equalTo()。
创建 UITableViewCell
class MomentTableViewCell:UITableViewCell{
    lazy var contentLabel: UILabel = {
        let label = UILabel()
        // 设置高度自动适配
        label.numberOfLines = 0
        label.lineBreakMode  = .byCharWrapping
        return label
    }()
    lazy var uernameLabel: UILabel = {
        let label = UILabel()
        return label
    }()
    func snpLayoutSubview(){
        self.contentView.addSubview(uernameLabel)
        self.contentView.addSubview(contentLabel)
        uernameLabel.snp.makeConstraints { make in
            make.top.equalTo(10)
            make.left.equalTo(10)
        }
        contentLabel.snp.makeConstraints { make in
            make.top.equalTo(uernameLabel.snp.bottom)
            make.left.equalTo(10)
            make.right.equalTo(-10)
            // 关键代码,最后一个子视图必须设置bottom.equalTo,不然无法自动计算高度
            make.bottom.equalTo(-10)
        }
    }
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        snpLayoutSubview()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    static let identifier = "MomentTableViewCell"
    static func dequeueReusable(with tableView:UITableView) -> MomentTableViewCell {
        let reusableCell = tableView.dequeueReusableCell(withIdentifier: MomentTableViewCell.identifier)
        if  let cell = reusableCell as? MomentTableViewCell {
            return cell
        }else{
            return MomentTableViewCell.init(style: .default, reuseIdentifier: MomentTableViewCell.identifier)
        }
    }
}
创建 UITableViewController
class TableViewController: UITableViewController {
    var data = [[String]]()
    override func viewDidLoad() {
        super.viewDidLoad()
        data.append(["宋茜","美食玩出新花样,好吃也要颜值在线!轩尼诗干邑特饮搭配酥脆大虾,你馋了吗?戳这里了解一下同款搭配哦!"])
        data.append(["吃喝实验室","​​每当夏季来临,烧烤作为大排挡的必选美食,用它那独有的芬芳占据着每一个吃货的味蕾,让辛苦一天的人儿能够在美食当中,放飞自我。"])
        data.append(["姚晨","上个月回了趟家,担任了“福建省旅游形象大使”。从今往后,将持续为家乡美景美食打call。跟姐来,带你坐上“全福游”,好吃好玩没理由!"])
        data.append(["天天美食推荐","吃了几十年蒸水蛋,原来这才是最正确的做法,孩子抢着吃!"])
        // 关键代码,设置行高自动适配
        tableView.rowHeight = UITableView.automaticDimension
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = MomentTableViewCell.dequeueReusable(with: tableView)
        let item = data[indexPath.row]
        cell.uernameLabel.text = item[0]
        cell.contentLabel.text = item[1]
        return cell
    }
}
image.png
上一篇下一篇

猜你喜欢

热点阅读