[iOS] Day 17 - CollectionView

 

tableView를 다 이해했다면,

CollectionView..? 할만하다 

 

---

tableView vs collectionView

tableView의 row는 collectionView에서 item이다

-> numberOfItemSection, cellForItemAt

 

tableView는 셀 간 간격을 띌 수 없지만 collectionView는 셀 간 간격을 띌 수 있다

collectionView의 크기를 계속 늘리게 된다면 어느 순간 셀이 중앙에 놓인다

-> 셀이 한개만 들어갈 수 있으므로 중앙으로 옮겨진다 (View의 크기를 넘어섰기 때문에 2개 이상이 못 들어온다고 판단)

---

UICollectionViewFlowLayout

collectionView에서 Layout을 변경하려면 필요한 타입

 override func viewDidLoad() {
        super.viewDidLoad()
        
        //3. 값 전달 - 프로퍼티 값을 뷰에 표현
        title = movieData?.title
        
        //화면 뜨기전에 컬렉션뷰의 셀 크기 셀 사이 간격 등 설정
        let layout = UICollectionViewFlowLayout()
        //간격 8 공통적인 숫자는 상수에 넣는게 좋음 타입어노테이션 활용
        // 셀과 셀 사이의 간격
        let spacing : CGFloat = 8
        //디바이스 넓이 / 3
        let width = UIScreen.main.bounds.width / 3 - (spacing * 4)
        //셀이 가지고 있는 사이즈
        // 몇 개 넣고 싶은지에 따라 크기 달라짐
        layout.itemSize = CGSize(width: width , height: (width * 1.2))
        //수평? 수직?
        layout.scrollDirection = .vertical
        // 여백
        layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
        // 셀 사이 간격 셀 마다마다 크기가 다르게 설정되어 있을수도 있어서 최소한 간격
        // 셀이 작아지면 간격이 넓어질 수 있기 때문에
        layout.minimumLineSpacing = spacing
        layout.minimumInteritemSpacing = spacing
        //collectionView에서 layout 쓸거야 선언
        collectionView.collectionViewLayout = layout
        
    }

우선 Layout을 설정하기 위해서 collectionViewFlowLayout을 초기화한다

spacing은 간격으로 8을 주었고

넓이는 UIScreen의 넓이의 1/3 의 spacing은 4개 주었다 왜?

가상의 공간에 상자 3개를 놓는다면 상자 사이의 공간은 몇개일까? 

4개이다. 이래서 그림을 그려야 한다.. humanError 방지

itemSize는 Cg사이즈 타입으로 collectionView의 cell 크기를 정한다

scrollDirection -> 화면 옆으로 넘길래? -> .horizontal

                          -> 화면 수직으로 내릴래? -> .vertical

sectionInset -> 여백이다  위 아래 오른쪽 왼쪽 여백을 의미

minimumLineSpacing -> 줄 간 거리

minimumInteritemSpacing -> item 간 거리(양 옆 간격)

아까 spacing 준다며? 왜 minimum을 또 주나..?

셀마다 크기가 다를 경우도 있기 때문에 최소한의 간격을 두는 것

collectionView.collectionViewLayout = layout

-> collectionView에서 layout을 쓸거다 선언

---

storyboard에서 Estimate Size는 None으로 설정 -> 자동 사이즈 설정 방지