[TIL] 2022 / 07 / 20

UICollectionViewController

 

 

테이블뷰와 비슷하지만 훨씬 더 자유로움.

 

테이블뷰에서는 셀을 Row라고 했지만 컬렉션뷰에서는 Item이라고함.

 

컬렉션뷰에서는 heightForRowAt이 없음.

-> CollectionViewFlowLayout()을 사용하기 때문

 

스토리보드에서 셀의 크기를 키우면 가운데로 옮겨짐

-> 셀이 너무 커지면 한 개 이상 들어갈 수 없으므로 자동으로 가운데로 옮겨지는 것.

 

컬렉션뷰의 사이즈 인스펙터에서 Estimate Size를 None으로 바꿔줘야 스토리보드에서 정한 크기나 코드에서 작성한 크기가 적용됨.

 

테이블뷰는 셀과 셀 사이를 띄울 수 없지만 컬렉션뷰는 가능함.

 

 

UICollectionViewFlowLayout

 

 

컬렉션뷰 레이아웃의 한 타입.

-> 공식문서에 따르면 컬렉션뷰의 한 열 또는 행에서 다음으로 flow한다해서 붙여진 이름같음.

 

셀의 사이즈를 아래와 같이 설정하고 UICollectionViewFlowLayout의 프로퍼티들이 어떤 것을 의미하는지 확인해봄.

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = UICollectionViewFlowLayout()
    let width = UIScreen.main.bounds.width
        
    layout.itemSize = CGSize(width: width / 5, height: 100)
        
    collectionView.collectionViewLayout = layout
        
}

 

Scroll Direction

 

 

verical
-> 세로로 스크롤

horizontal
-> 가로로 스크롤

 

위의 vertical 상태를 이용해 다양한 레이아웃을 확인해봄.

 

 

Item Spacing

 

 

minimumLineSpacing

 

아래의 코드를 추가.

layout.minimumLineSpacing = 40

전

후

줄과 줄 사이의 간격과 관련된 레이아웃.

 

 

minimumInterItemSpacing

 

        layout.minimumInteritemSpacing = 40

후

셀과 셀 사이(양옆)의 간격과 관련된 레이아웃

 

 

itemSize

 

셀의 사이즈와 관련된 레이아웃.

 

 

sectionInset

 

        layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

섹션을 두 개로 나누고 확인해봄.

 

섹션의 인셋을 설정해주는 것 같음.

셀이 아닌 섹션 자체의 바깥 여백을 줌.

 

 

 

예약어를 변수명으로 사용하고 싶으면 ``를 사용

 

 

도서 프로젝트

 

 

컬렉션뷰셀 클래스 안에 함수를 선언해서 컬렉션뷰 컨트롤러 코드를 줄임.

비율로 설정하니 기기가 달라져도 원하는대로 나왔음.