[220720] TIL

[Taehyeon-Kim]

TableViewCell 데이터 설정

Cell에 데이터를 넣어줘야 하는 경우가 있다. 간단하게 생각을 해보면 CellForRowAt 메서드 단계에서 Cell의 프로퍼티에 접근하여 데이터를 하나씩 넣어줄 수 있을 것이다. 그런데 넣어줘야 하는 데이터가 여러 개인 경우 하나씩 다 넣어주기가 정말 번거롭고 비효율적인 작업이 될 것이다.

이 작업을 Cell에게 대신 부여해서 데이터만 통째로 넘겨주면 Cell이 알아서 UI 요소에 데이터를 넣어주도록 하면 깔끔해질 것이다. 데이터 역시 인자로 하나씩 넘겨줄 수 있겠지만 그 수가 많다면 힘들 것이다. 그래서 구조체 형태로 여러 타입의 데이터를 한 묶음으로 생각해서 데이터를 넘겨주면 편할 것이다.

// Model Struct

struct Movie {
    var title: String
    var releaseDate: String
    var description: String
    var runtime: Int
    var rate: Double
}

extension Movie {
    static let sampleData: [Movie] = [
        Movie(title: "암살", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "괴물", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "관상", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "탑건", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "마녀", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "기생충", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "광해", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "명량", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8),
        Movie(title: "위대한 쇼맨", releaseDate: "22.22.22", description: "줄거리", runtime: 150, rate: 8.8)
    ]
}

// Cell

import UIKit

final class MovieCell: UITableViewCell {
    @IBOutlet weak var posterImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var releaseLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    func configureCell(data: Movie) {
        self.titleLabel.text = data.title
        self.releaseLabel.text = data.releaseDate
        self.descriptionLabel.text = data.description
    }
}

// Cell For Row At

private var movieList: [Movie] = Movie.sampleData

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MovieCell") as! MovieCell
    cell.configureCell(data: movieList[indexPath.row])
    return cell
}

CollectionView

테이블 뷰를 구성하는 것과 너무 동일하다. 차이는 테이블 뷰와 달리 여러 개의 열에 아이템을 집어 넣을 수 있기 때문에 하나의 셀(아이템)의 너비와 높이, 즉 아이템의 사이즈를 결정해주는 작업이 필요하다.

• 수평 스크롤은 아이템을 수직(세로) 방향으로 먼저 셀을 채운다.
• 수직 스크롤은 아이템을 수평(가로) 방향으로 먼저 셀을 채운다.

let layout = UICollectionViewFlowLayout()
let spacing: CGFloat = 8
let width = UIScreen.main.bounds.width - (spacing * 4)
layout.itemSize = CGSize(width: width / 3, height: 150)
layout.scrollDirection = .vertical
layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
layout.minimumLineSpacing = spacing
layout.minimumInteritemSpacing = spacing
collectionView.collectionViewLayout = layout

라이브러리 소개

1. Kingfisher
2. ToastSwift