snapkit(8)

테이블 이미지 상단 뷰

기본 테이블

- 이미지 -

이미지 | 제목

| 날짜

- seperate -

1.테이블 뷰를 생성한다.

테이블뷰의 estimatedRowHeight는 예상되는 높이(나중에 동적으로 변경되기때문에 어림잡아 세팅하면 됨)

테이블뷰의 rowHeight는 반드시 UITableViewAutomaticDimension로 설정해야된다.

이미지 비율을 폰크기 마다 변경하고 싶다면 폰의 비율에 따라 이미지 높이를 동적으로 잡아주면 된다.

rowHeight가 UITableViewAutomaticDimension이기때문에 자동으로 이미지 높이가 수정된다.

import UIKit

class TableView3Controller: UIViewController {

  var didSetupConstraints = false

  let cellName = "tableview3cell"

  let tableView: UITableView = {
    let tableView = UITableView()
    return tableView
  }()

  let dummyList: [TableView3Model] = [
    TableView3Model(name: "test1", imageUrl: "https://lorempixel.com/100/101/", date: "2017-01-12 12:12:11", userImageUrl: "https://lorempixel.com/50/50/"),
    TableView3Model(name: "test2", imageUrl: "https://lorempixel.com/100/102/", date: "2017-01-12 12:12:11", userImageUrl: "https://lorempixel.com/51/50/"),
    TableView3Model(name: "test3", imageUrl: "https://lorempixel.com/100/103/", date: "2017-01-12 12:12:11", userImageUrl: "https://lorempixel.com/50/52/"),
    TableView3Model(name: "test4", imageUrl: "https://lorempixel.com/100/104/", date: "2017-01-12 12:12:11", userImageUrl: "https://lorempixel.com/52/50/"),
  ]


  override func viewDidLoad() {
    super.viewDidLoad()

    self.initUI()

    self.initTableView()

    // Do any additional setup after loading the view.
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }

  static func instance() -> TableView3Controller {
    let vc = TableView3Controller ()
    return vc
  }
}


extension TableView3Controller: UITableViewDelegate, UITableViewDataSource {
  public func initTableView() {
    self.tableView.dataSource = self
    self.tableView.delegate = self
    self.tableView.separatorStyle = .none
    self.tableView.estimatedRowHeight = 212.0
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.register(TableView3Cell.self, forCellReuseIdentifier: self.cellName)
  }

  public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.dummyList.count
  }

  public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
      -> UITableViewCell {
    let cell: TableView3Cell = tableView.dequeueReusableCell(withIdentifier: self
      .cellName) as! TableView3Cell
    cell.bind(model: self.dummyList[indexPath.row])
    return cell
  }

  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
  }
}


//snapkit

extension TableView3Controller {
  func initUI() {
    self.view.addSubview(self.tableView)
    view.setNeedsUpdateConstraints()
  }

  override func updateViewConstraints() {
    if (!didSetupConstraints) {
      tableView.snp.makeConstraints { make in
        make.edges.equalToSuperview()
      }
      didSetupConstraints = true
    }

    super.updateViewConstraints()
  }
}

2.모델은 단순하게 생성한다.

import Foundation

struct TableView3Model{
  var name:String?
  var imageUrl:String?;
  var date:String?;
  var userImageUrl:String?;

  init(name:String,imageUrl:String,date:String,userImageUrl:String) {
    self.name = name
    self.imageUrl = imageUrl
    self.date = date
    self.userImageUrl = userImageUrl
  }
}

3.가장 중요한 UITableviewCell을 생성한다.

import UIKit
import SnapKit
import Kingfisher

class TableView3Cell: UITableViewCell {
  var userView: UIView = {
    let view = UIView()
    return view
  }()

  var seperateView:UIView = {
    let view = UIView()
    view.backgroundColor = UIColor.gray
    return view
  }()


  let imageUrl: UIImageView = {
    let imgView = UIImageView()
    imgView.layer.borderColor = UIColor.gray.cgColor
    imgView.layer.borderWidth = 0.0
    return imgView
  }()


  let userImage: UIImageView = {
    let imgView = UIImageView()
    imgView.layer.borderColor = UIColor.gray.cgColor
    imgView.layer.borderWidth = 1.0
    return imgView
  }()

  var userName: UILabel = {
    let label = UILabel()
    label.font = .systemFont(ofSize: 15)
    label.textColor = .red
    return label
  }()
  var date: UILabel = {
    let label = UILabel()
    label.font = .systemFont(ofSize: 14)
    label.textColor = .black
    label.numberOfLines = 1
    return label
  }()


  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupUI()
  }

  override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    setupUI()
  }

  func bind(model: TableView3Model) {
    self.userName.text = model.name
    self.date.text = model.date
    self.userImage.kf.setImage(with:URL(string: model.userImageUrl!))
    self.imageUrl.kf.setImage(with:URL(string: model.imageUrl!))

  }
}

extension TableView3Cell {
  func setupUI() {

    self.contentView.backgroundColor = UIColor.gray

    self.addSubview(self.seperateView)
    self.addSubview(self.imageUrl)
    self.addSubview(self.userView)

    self.userView.backgroundColor = UIColor.white
    self.userView.addSubview(self.userName)
    self.userView.addSubview(self.userImage)
    self.userView.addSubview(self.date)

    //imageurl
    imageUrl.snp.makeConstraints({ (make) in
      make.top.equalTo(0)
      make.left.right.equalTo(0)
      make.height.equalTo(150)
      make.bottom.equalTo(userView.snp.top)
    })

    //userview
    userView.snp.makeConstraints({ (make) in
      make.top.equalTo(imageUrl.snp.bottom)
      make.left.right.equalTo(0)
      make.bottom.equalTo(seperateView.snp.top)
      make.height.equalTo(52)
    })

    //seperateView
    seperateView.snp.makeConstraints({ (make) in
      make.top.equalTo(userView.snp.bottom)
      make.left.right.equalTo(0)
      make.bottom.equalTo(0)
      make.height.equalTo(10)
    })

    //userimage
    userImage.snp.makeConstraints({ (make) in
      make.top.left.equalTo(6)
      make.width.height.equalTo(40)
    })

    //username
    userName.snp.makeConstraints { (make) in
      make.top.equalTo(5)
      make.left.equalTo(userImage.snp.right).offset(10)
      make.right.equalTo(-10)
      make.height.equalTo(19)
    }

    //date
    date.snp.makeConstraints { (make) in
      make.top.equalTo(userName.snp.bottom).offset(5)
      make.left.equalTo(userImage.snp.right).offset(10)
      make.right.equalTo(-10)
      make.bottom.equalTo(-5)
      make.height.equalTo(18)
    }
  }
}

setupUI 에서 엘리먼트의 위치와 크기를 잡아둔다.

결과화면