Swift 教程之TableView使用03自定义Cell

• 请点击，免费订阅《学Swift挣美元》专栏

之前系列课程

• Swift 教程之TableView使用01基础代码
• Swift 教程之TableView使用02显示图片
• Swift 教程之TableView使用03自定义Cell

效果图

Jietu20190506-081028@2x.jpg

1. 修改cell高度

 override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 240
    }

2. 配置一下数据

import UIKit

struct SectionData{
    var open:Bool
    var data:[CellData]
}

struct CellData {
    var title: String
    var featureImage: UIImage
    var info: String
}

3. 配置一下图片视图

  fileprivate var featureImage: UIImageView = {
        let iv = UIImageView()
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.contentMode = .scaleAspectFill
        iv.layer.masksToBounds = true
        iv.layer.cornerRadius = 2
        return iv
    }()

我们给图片设置个圆角， iv.layer.cornerRadius = 2，这样可以让图片显得不会生硬。

4. 配置一下图片标题

 fileprivate var titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

我们设置图片标题为黑色，适当加重字体，显得字体突出

5. 配置一下图片简介

  fileprivate var infoText:UITextView = {
       let infoText = UITextView()
        infoText.font = UIFont.systemFont(ofSize: 12, weight: .light)
        infoText.textColor = .black
        infoText.isEditable = false
        infoText.translatesAutoresizingMaskIntoConstraints = false
        
        return infoText
    }()
    

图片简介要和标题有个区分，我们将他的字体调小，并让字体显得更轻快一些。

6. 配置一下图片、标题和简介的位置关系

 fileprivate func setupConstraints(){
    
        contentView.addSubview(featureImage)
        contentView.addSubview(titleLabel)
        contentView.addSubview(infoText)
        
        featureImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8).isActive = true
        featureImage.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true
        featureImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8).isActive = true
        featureImage.heightAnchor.constraint(equalToConstant: 140).isActive = true
        titleLabel.topAnchor.constraint(equalTo: featureImage.bottomAnchor, constant: 8).isActive = true
        titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8).isActive = true
        
        infoText.topAnchor.constraint(equalTo: titleLabel.bottomAnchor).isActive = true
        infoText.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true
        infoText.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8).isActive = true
        infoText.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8).isActive = true
        
    }

7. 配置一下Cell，突出一下卡片风格

  override func layoutSubviews() {
        super.layoutSubviews()
        
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 30, bottom: 10, right: 30))
    }

好了，一个开篇式风格的Cell就做成了。