[ TIL ] 본격적으로 팀플을 시작해보죠! / Collection View / 24년 4월 1일

 

 

안녕하세요! 오늘부터 본격적인 팀플이 시작되었습니다🏁

팀원들과 카페 앱을 만들어 보기로 했어요~!

 

팀원들과 아침부터 UI를 짜고, 어떤 기능을 구현할 지에 대한 이야기를 나눈 후에

역할을 나누고 본격적인 구현에 들어갔습니다.

 

저는 한번도 사용해보지 않은 CollectionView를 만져보고 싶어서

적극적으로 하고 싶다는 의견을 내었어요!!

감사하게도 다른 팀원분이 양보를 해주셔서 CollectionView 파트를 맡게 되었습니다~!

 

 

CollectionView

CollectionView는 아래의 그림과 같이 여러 개의 View들을 카드형식으로 나열할 수 있는 뷰입니다.

출처 : 인스타그램 공차 공식 계정

 

TableView와 비슷하게 Delegate와 DataSouce를 채택하여 CollectionView Cell과 CollectionView가 서로 소통을 하는 형식으로 이루어져 있더라구요!

 

 

UICollectionViewDataSource 프로토콜

은 CollectionView 데이터를 제공하는 메서드와 해당 데이터를 CollectionView에 표시하는 메서드들을 다룹니다.

 

[ 관련된 함수 ]

• collectionView(_:numberOfItemsInSection: ) : CollectionView에 표시한 Section에 속한 cell의 개수 반환
• collectionView(_:cellForItemAt: ) : 특정 위치에 표시한 cell 반환 ( cell을 초기화하고 data를 설정함 ) 

 

 

UICollectionViewDelegate 프로토콜

은 사용자 인터페이스와 관련된 작업을 수행하는 메서드를 다뤄요. 예를 들면, CollectionView의 레이아웃 설정이나 cell이 선택된 후의 동작, scroll이나 animation 관리 등이 있죠.

 

[ 관련된 함수 ]

• collectionView(_:didSelectItemAt:) : 특정 cell을 선택했을 때 호출
• collectionView(_:didDeselectItemAt:) : 선택한 cell을 선택해제했을 때 호출
• collectionView(_:willDisplay:forItemAt:) : 특정 cell을 표시하기 전에 호출
• collectionView(_:didEndDisplaying:forItemAt:) : 특정 cell이 화면에서 사라진 후 호출

 

 

CollectionView를 사용하기 위해서는 위 두 프로토콜을 반드시 채택하여야 합니다.

또한 필수 채택은 아니지만, 구현에 있어서 필요한 프로토콜도 소개해 드릴게요!

 

 

UICollectionViewDelegateFlowLayout 프로토콜

은 CollectionView의 레이아웃과 관련된 부분들을 제어할 수 있어요. cell의 크기나 간격 또는 그리드의 크기나 간격 등을 조절할 수 있습니다.

 

[ 관련된 함수 ]

• collectionView(_:layout:sizeForItemAt:) : 개별 셀의 크기를 반환하는 메서드
• collectionView(_:layout:insetForSectionAt:) : Section의 여백을 반환하는 메서드
• collectionView(_:layout:minimumLineSpacingForSectionAt:) : Section의 줄 간격을 반환
• collectionView(_:layout:minimumInteritemSpacingForSectionAt:) : Section의 항목 간격을 반환
• collectionView(_:layout:referenceSizeForHeaderInSection:) : Header의 크기를 반환
• collectionView(_:layout:referenceSizeForFooterInSection:) : Footer의 크기를 반환

 

 

 

저는 오늘 여기서 4가지 함수를 사용하여 구현해주었습니다.

 

CollectionView 구현

 

[ ViewController ]

1. 스토리 보드에서 CollectinoView 오토레이아웃 잡기

 

2. CollectionViewCell 파일 생성하여 CollectionCell와 연결하기

 

3. 프로토콜 채택

extension MenuListViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

}

 

4. delegate와 datasource 목적지 자기 자신으로 설정

    // collectionView setting
    func setCollectionView() {
        menuCollectionView.dataSource = self
        menuCollectionView.delegate = self
    }

위의 함수는 viewDidLoad에 넣어주었습니다!

 

5. collectionView에 반환할 cell의 개수 리턴하기

    // collectionView cell 개수
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        return menuData.count
    }

 

6. collectionView와 cell 연결하고, Data 전달하기

    // collectionView와 cell 연결 / menuData 전달
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MenuCell", for: indexPath) as? MenuListCollectionViewCell else {
            return UICollectionViewCell()
        }
        
        cell.setConfigue(menuData[indexPath.row])
        
        return cell
    }

 

7. collectionView 특정 cell 선택시 cart에 데이터 추가하기

    // collectionView 선택시 cart에 추가
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
        cartDataManager.addCartData(name: menuData[indexPath.row].name)
    }

 

8. collectionView의 view 사이즈 설정하기

    // collectionView의 view 사이즈 설정
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 170, height: 170)
    }

 

9. collectionView의 행 간격 설정하기

    // collectionView의 행 간격 설정
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 17
    }

 

 

[ CollectionViewCell ]

1. cell의 스토리보드와 @IBOutlet 연결하기

    @IBOutlet weak var menuImageView: UIImageView!
    @IBOutlet weak var menuPriceLabel: UILabel!
    @IBOutlet weak var menuNameLabel: UILabel!

 

2. 받은 데이터로 메뉴 이미지, 메뉴 가격, 메뉴 이름 설정하기

    func setConfigue(_ data: MenuData){
        
        // 이미지가 있다면 설정
        if let image = data.image {
            menuImageView.image = image
        }else {
            menuImageView.image = UIImage(named: "mug")
            menuImageView.tintColor = .black
        }
        
        // 메뉴 가격 설정
        menuPriceLabel.text = String(data.price) + "원"
        
        // 메뉴 이름 설정
        menuNameLabel.text = data.name
   }

 

3. contentView의 테두리 설정하기

// 테두리 설정
// 둥근 모서리
contentView.layer.cornerRadius = 16
contentView.clipsToBounds = true
// 경계선 크기
contentView.layer.borderWidth = 1
// 경계선 색깔
contentView.layer.borderColor = UIColor(red: 128/255, green: 202/255, blue: 255/255, alpha: 1.0).cgColor

 

구현 화면

 

우선 저에게 주어진 임무는 완료한 것 같습니다!!ㅎㅎ

 

컬렉션 뷰 쏘 이지 합니다! 라고 말하고 싶지만, 오늘 크나큰 오류에 막혔었어요..

오류 해결 과정

Thread 1: "[<UICollectionViewCell 0x105c08420> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key menuBackgroundView."

 

해석해보니 이 클래스 ( UICollectionViewCell )은 menuBackgroundView 에 대한 key value Colding-compliant가 아니래요..

 

 

1시간정도의 삽질 후에 이것 저것 다 만져보다가 알아낸 사실은 제가 저 Module값을 삭제했더라구요.. Class를 변경하다가 잘못 눌러서 원래 비어있는 부분이라고 생각하고 지우고 빠져나왔는데,, 알고보니 저 Module은 이 Class가 존재하는 위치를 이야기하고 있는 거더라구요! 그렇게 해결했습니다.. 후.. 이번에 삽질했으니 다음번엔 바로 알 수 있겠죠?!ㅎ 

 

Module은 프레임워크가 앱의 독립적인 부분을 나타냅니다. Class의 이름이 무수히 많지만 해당 Module에 속한 class는 단 한 개이므로 Xcode가 어디 MenuListCollectionView인지 잘 구분해낼 수 있겠죠! "Inherit Module From Target" 라는 옵션은 해당 클래스가 속한 모듈이나 타겟을 상속한다는 의미입니다. 그러니 저걸 체크하면 지금 현재 속해있는 Module 안에서의 Class를 의미하는 것이므로 체크해제했다면 당연히 오류가 나겠죠..!