[CollectionView] 따라해봅시다

만들고 싶은 CollectionView 가 어려워요...
하지만 해봅시다.
[완성본]

+ CellDataStruct

+ Cell

+ CollectionViewFlowLayout

+ CollectionView

---

[Cell Data Struct ]

일단.

cell안에는 text 말고도 담아줘야 할 data들이 있습니다.
[완성본]에서 본것같이 선택된 cell은 위에 뷰로 옮겨줘야 해요.
이미 선택되서 위에 있는 셀을 눌렀을때는 동작을 막아줘야 하겠죠?
예를들어,
그렇담 isSelect 변수로 선택이 됐는지 안됐는지 체크를 해줘야하겠죠?

//Token.swift
import Foundation

struct Token {
    var title: String
    var id: Int
    var selected = false
}

cell에 들어갈 데이터구조를 짰으니 이제 cell을 만들어 봅시다.

[Cell]

1.BaseCollectionViewCell
2.TokenMainCell, TokenListCell

음... BaseCollectionViewCell을 만들거에요.
이건 뭐랄까... 제가 본 깃헙에 한해서는 CollectionViewCell을 만들때는 다 이걸 만들어서 Delegate시키더라고요.

왜인지는 모르겠어요. 나중에 알게 되면 또 적을게요.
이제부터 import UIKit은 생략할게요

• 1 BaseCollectionViewCell

//BaseCollectionViewCell.swift
class BaseCollectionViewCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupViews()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setupViews()
    }
    
    func setupViews() {
   
    }
}

• 2 TokenMainCell, TokenListCell

//TokenMainCell.swift
class TokenMainCell: BaseCollectionViewCell {
  
  static let identifier = "TokenMainCell"
  
  var token: Token? {
    didSet{
      guard let sender = self.token else { return }
      self.titleLabel.text = sender.title
    }
  }
  
  var titleLabel: UILabel = {
    
    let lbl = UILabel()
    lbl.translatesAutoresizingMaskIntoConstraints = false
    lbl.textAlignment = .center
    lbl.font = UIFont.systemFont(ofSize: 16)
    lbl.textColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    return lbl
  }()
  
  var cancelButton: UIButton = {
    
    let btn = UIButton()
    btn.translatesAutoresizingMaskIntoConstraints = false
    btn.setTitle("x", for: .normal)
    btn.setTitleColor(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1), for: .normal)
    btn.setContentHuggingPriority(.init(900), for: .horizontal)
    btn.isUserInteractionEnabled = false
    return btn
  }()
  
  override func setupViews() {
    
    self.titleLabel.text = nil
    self.backgroundColor = #colorLiteral(red: 0.4039215686, green: 0.4666666667, blue: 0.7215686275, alpha: 1)
    self.layer.cornerRadius = 4.0

    let stack = UIStackView(arrangedSubviews: [titleLabel, cancelButton])
    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.distribution = .fillProportionally
    stack.spacing = 8
    
    addSubview(stack)
    self.addConstraints([
      stack.centerXAnchor.constraint(equalTo: self.centerXAnchor),
      stack.centerYAnchor.constraint(equalTo: self.centerYAnchor),
      stack.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.9),
      ])
  }
}
//TokenListCell.swift

class TokenListCell: BaseCollectionViewCell {
  
  static let identifier = "TokenListCell"
  
  var token: Token? {
    didSet{
      guard let sender = self.token else { return }
      self.titleLabel.text = sender.title
    }
  }
  
  var titleLabel: UILabel = {
    
    let lbl = UILabel()
    lbl.translatesAutoresizingMaskIntoConstraints = false
    lbl.textAlignment = .center
    lbl.font = UIFont.systemFont(ofSize: 16)
    lbl.lineBreakMode = .byTruncatingMiddle
    lbl.textColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    return lbl
  }()
  
  override func setupViews() {
    
    self.titleLabel.text = nil
    self.layer.cornerRadius = 4.0

    
    addSubview(titleLabel)
    self.addConstraints([
      titleLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
      titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor),
      titleLabel.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.9),
      ])
  }
}