[iOS | Swift] UICollectionView를 이용하여 리스트 & 그리드 구현하기

UIKit에서 리스트와 그리드를 구현하는 방법에는 UICollectionView와 UITableView 두가지가 있다.
그 중, UICollectionView를 이용하는 방법을 알아보자!

⭐️ UICollectionView를 이용해서 리스트 및 그리드를 개발할때 핵심 3가지 ⭐️

✔️ Data
: 어떤 데이터 쓸지
✔️ Presentation
: 셀을 어떻게 표현할건지
✔️ Layout
: 셀들의 레이아웃을 어떻게 할건지

🤖 프로젝트 예시 (주식리스트)

1. 새로운 Cocoa Touch Class 만들기

상위 Class: UIViewController
Class명: StockRankViewController

2. Main Storyboard에 View Controller 연결하기

방금 만든 class 명을 복사해놓고,
Identity Insepctor에 들어간 후,

• Custom Class의 Class
• Identity의 Storyboard ID
  두 군데에 복사한 class 명을 붙여넣는다.
  

3. UICollectionView 추가 & AutoLayout 설정

AutoLayout은 부모 View와 연결하여
Leading, Top, Trailing, Bottom Space to Safe Area를 모두 0으로 설정하였다.

4. StockRankController: collectionView 연결

👇🏻 연결 결과

5. Custom Cell 만들기

6. Data

7. dataSource & delegate

Data, Presentation, Layout 을 알려줄 누군가가 필요하다..!
아래 코드를 viewDidLoad() 메소드 안에 작성한다.
(*delegate: 프로토콜의 일종)

// Data, Presentation 을 알려줌
collectionView.dataSource = self
        
// Layout 을 알려줌
collectionView.delegate = self

8. Custom Cell 표현하는 파일 만들기

상위 Class: UICollectionViewCell
Class명: StockRankCollectionViewCell

2번 과정과 마찬가지로 Main Storyboard와 연결해 준다.

• Identity Inspector > Custom Class > Class
  
• Attribute Inspector > Collection Reusable View > Identifier
  

9. StockRankCollectionViewCell

① 업데이트 되어야 하는 ui component 연결

② ui compenent에 데이터 업데이트

10. StockRankViewController class 하단에 추가

• UICollectionViewDataSource

extension StockRankViewController: UICollectionViewDataSource {
    
    // 섹션에 넣을 아이템의 개수
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return stockList.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        // 재사용 가능한 셀을 가져옴 (indexPath 번째)
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "StockRankCollectionViewCell", for: indexPath) as? StockRankCollectionViewCell else {
            // casting 실패 시
            return UICollectionViewCell()
        }
        
        let stock = stockList[indexPath.item]
        // indexPath 안에는 섹션에 대한 정보, 섹션에 들어가는 데이터 정보 등이 있다
        cell.configure(stock)
        return cell
    }
}

• UICollectionViewDelegateFlowLayout
  : 셀의 배치를 어떻게 할지 설정 (셀의 사이즈, 셀 간의 간격 등)

extension StockRankViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        // collectionView width와 동일하게 설정
        return CGSize(width: collectionView.bounds.width, height: 80)
    }
}

11. stock price 세자리씩 끊어 표현하기

StockRankCollectionViewCell에
convertToCurrencyFormat라는 메소드를 추가하고, configure 메소드에 적용하였다.

    func configure(_ stock: StockModel) {
        rankLabel.text = "\(stock.rank)"
        companyIconImageView.image = UIImage(named: stock.imageName)
        companyNameLabel.text = stock.name
        companyPriceLabel.text = "\(convertToCurrencyFormat(price: stock.price)) 원"
        diffLabel.text = "\(stock.diff) %"
    }
    
    func convertToCurrencyFormat(price: Int) -> String {
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        numberFormatter.maximumFractionDigits = 0   // 소수점 몇째자리까지 보여줄지
        let result = numberFormatter.string(from: NSNumber(value: price))!
        return result
    }

12. 주식 등가폭이 +/-일 때, 글씨색 구분하기

StockRankCollectionViewCell의
configure 메소드에 아래 코드를 추가하면,
등가폭이 +일때는 빨간색 글씨, -일때는 파란색 글씨로 표현할 수 있다.

diffLabel.textColor = stock.diff > 0 ? UIColor.systemRed : UIColor.systemBlue

🏝 프로젝트 결과화면