[iOS : Toy Project] Apple Framework List (1)

📌 다섯번째 프로젝트 (1)

Apple Framework List 앱을 만들어보자

 

 

 

1️⃣ Data 확인 및 FrameworkViewController 만들기

- 이전 프로젝트들과 마찬가지로 패캠에서 제공해준 데이터들을 사용

- "FrameworkViewController" 이름의 UIViewController을 만들어서, Main storyboard와 연결까지 완료

 

 

2️⃣ Auto Layout

CollectionView와 View 사이의 관계

ImageView와 ContentView 사이의 관계 (Leading, Top 모두 0으로 해주기)

ImageView의 aspect ratio를 1:1로 해주기

Label과 ImageView 사이의 관계

Label과 ContentView사이의 관계

Label의 Lines를 0으로 두면 표현할 수 있는 글자까지 모두 다 표현됨

 

 

3️⃣ UICollectionViewCell 만들기

Cell 연결

재사용 ID도 지정

//
//  FrameworkCell.swift
//  AppleFrameWork
//
//  Created by 오예진 on 2022/05/27.
//

import UIKit

class FrameworkCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnailImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    
    // cell을 업데이트 해줄 수 있는 method 추가
    func configure(_ framework: AppleFramework){
        thumbnailImageView.image = UIImage(named: framework.imageName)
        nameLabel.text = framework.name
    }
}

 

 

 

4️⃣ ViewController에 CollectionView 세팅

- DataSource와 Delegate 설정

//
//  FrameworkListViewController.swift
//  AppleFrameWork
//
//  Created by 오예진 on 2022/05/27.
//

import UIKit

class FrameworkListViewController: UIViewController {
    
    // CollectionView 자체를 연결
    @IBOutlet weak var collectionView: UICollectionView!
    
    // 데이터를 일단 가져오기
    let list: [AppleFramework] = AppleFramework.list
    
    // Data, Presentation, Layout
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // DataSource는 ViewController 자신에게 물어보기(self)
        collectionView.dataSource = self
        
        // delegate를 통해서 Layout도 잘 위임
        collectionView.delegate = self
    }
    
}

// dataSource 프로토콜 준수 과정
extension FrameworkListViewController:
    UICollectionViewDataSource {
    
    // 몇개나 cell에 보여줄 건지?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return list.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FrameworkCell", for: indexPath) as? FrameworkCell else{
            return UICollectionViewCell()
        }
        return cell
    }
}

// delegate 프로토콜 준수 과정
extension FrameworkListViewController: UICollectionViewDelegateFlowLayout {
    
    // collectionView size를 automatic -> none 으로 바꿔주기
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        // item들간의 간격
        let interItemSpacing: CGFloat = 10
        
        let width = (collectionView.bounds.width - interItemSpacing * 2) / 3
        let height = width * 1.5
        return CGSize(width: width, height: height)
    }
}

 

 

 

5️⃣ Data 업데이트 : 캐스팅!

//
//  FrameworkListViewController.swift
//  AppleFrameWork
//
//  Created by 오예진 on 2022/05/27.
//

import UIKit

class FrameworkListViewController: UIViewController {
    
    // CollectionView 자체를 연결
    @IBOutlet weak var collectionView: UICollectionView!
    
    // 데이터를 일단 가져오기
    let list: [AppleFramework] = AppleFramework.list
    
    // Data, Presentation, Layout
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // DataSource는 ViewController 자신에게 물어보기(self)
        collectionView.dataSource = self
        
        // delegate를 통해서 Layout도 잘 위임
        collectionView.delegate = self
    }
    
}

// dataSource 프로토콜 준수 과정
extension FrameworkListViewController:
    UICollectionViewDataSource {
    
    // 몇개나 cell에 보여줄 건지?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return list.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FrameworkCell", for: indexPath) as? FrameworkCell else{
            return UICollectionViewCell()
        }
        
        let framework = list[indexPath.item] // 몇번째 아이템을 가져올건지는 index.item을 통해 가져올 수 있다.
        cell.configure(framework)
        return cell
    }
}

// delegate 프로토콜 준수 과정
extension FrameworkListViewController: UICollectionViewDelegateFlowLayout {
    
    // collectionView size를 automatic -> none 으로 바꿔주기
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        // item들간의 간격
        let interItemSpacing: CGFloat = 10
        
        let width = (collectionView.bounds.width - interItemSpacing * 2) / 3
        let height = width * 1.5
        return CGSize(width: width, height: height)
    }
    
    // cell 사이의 간격
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    
    // 윗줄과 아랫줄 (line spacing) 간의 간격
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
}

데이터 업데이트 완료

command + shift + a (-> 다크모드)

 

 

6️⃣ 네비게이션 바

- storyboard > Editor > Embed In > Navigation Controller

Title : Prefers Large Titles 적용

Title Custom

 

 

 

7️⃣ 보완

- 윗부분 블러처리 및 둥근 엣지따라 items가 다 보이게 하기

CollectionView의 Bottom을 Safe Area가 아닌 Superview에 맞추기

0 으로!

-> top도 bottom과 마찬가지로 설정해주기

 

 

엣지에 따라 잘! 

 

 

 

- contentInset을 통해 콘텐츠의 안쪽 여백 주기

override func viewDidLoad() {
    super.viewDidLoad()

    // DataSource는 ViewController 자신에게 물어보기(self)
    collectionView.dataSource = self

    // delegate를 통해서 Layout도 잘 위임
    collectionView.delegate = self

    // contentInset = Content의 안쪽 여백 주기
    collectionView.contentInset = UIEdgeInsets(top: 20, left: 16, bottom: 0, right: 16)
}

- width 조절까지 다시 마무리

// 좌우로 들어가는 16짜리 padding
let padding: CGFloat = 16

let width = (collectionView.bounds.width - interItemSpacing * 2 - padding * 2) / 3

 

 

- collectionView의 Estimate Size를 None으로 해줬던 것을 코드로 구현해보기 : collectionViewLayout 프로퍼티 -> 캐스팅!

override func viewDidLoad() {
    super.viewDidLoad()

    collectionView.dataSource = self
    collectionView.delegate = self

    // collectionView의 estimate size를 none으로 설정하는 코드
    if let flowlayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout{
        flowlayout.estimatedItemSize = .zero    // .zero 는 none으로 설정해준것과 같다.
    }
    
    collectionView.contentInset = UIEdgeInsets(top: 20, left: 16, bottom: 0, right: 16)
}

 

🚀 구현 완료!

 

 

 

 

 

---

📌 정리,

• item들 간의 간격과 안쪽 padding을 고려하여 cell의 width 계산
• contentInset 프로퍼티를 통한 Content의 안쪽 여백 할당
• minimumInteritemSpacingForSectionAt : cell 사이의 간격
• minimumLineSpacingForSectionAt : 윗줄과 아랫줄 간의 간격 (line spacing)
• 네비게이션 바 추가❗️

 

 

---

Reference

패스트캠퍼스 온라인 강의