UICollectionView Spacing이 헷갈리는 사건에 대하여...

lnnae·2021년 5월 24일
4
post-thumbnail

오늘은 UICollectionView 선배님의 minimumLineSpacing, minimumInteritemSpacing 프로퍼티. 함 알아보도록 하겠습니다!
저는 이 두 선배님이 너무 헷갈려요 🥺

CollectionView를 사용할 때 우리는 delegate 함수를 사용해서 셀의 간격과 사이즈를 정할 수 있습니다. (FlowLayout 클래스로도 지정할 수 있어요) 이때 전체 그리드에서 셀 사이의 간격을 조정하기 위해서 두개의 프로퍼티를 사용할 수 있는데요.

위에서 말씀드렸 듯,minimumLineSpacingminimumInteritemSpacing 프로퍼티를 사용해서 셀 사이의 간격을 적용할 수 있습니다.

Spacing 적용해보기

ViewController에 collectionView 하나만 레이아웃을 잡아주고, UICollectionViewDelegateFlowLayout를 사용해 셀의 사이즈와 간격을 지정해줬어요.
그리고 UICollectionViewDataSource 이 delegate를 이용해서 cell을 띄워주세요.

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 80, height: 80)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        20
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        60
    }
}

line은 20, inter는 60으로 적용되는 방향을 알기 쉽게 값의 차이를 줘봤습니다요.

vertical

lineSpacing을 20, interSpacing을 60을 줬는데 어떤 값이 어디로 적용된건지 아시겠나요? line은 왠지 위아래.. inter는 좌우로 적용된 걸로 보이네요.

그렇다면 horizontal은 . . . ?

horizontal

우왓.. 바뀐거 보이시죠 제가 이래서 헷갈렸다니까요 선배님들 ㅠㅠ!!!!!!!!! 일단 요 느낌만 기억하시고 프로퍼티에 대해 알아봐요..

minimumLineSpacing

이 선배님은 연속되는 행 또는 열의 간격을 조정할 수 있는 프로퍼티입니다.
vertically한 collectionView에서는 이 값이 연속되는 사이의 최소 간격을, horizontally한 collectionView에서는 연속되는 사이의 최소 간격을 나타낸다고 합니다!

minimumInterSpacing

이 선배님은 행 또는 열에 있는 연속되는 cell사이의 간격을 조정할 수 있는 프로퍼티입니다.
vertically한 collectionView에서는 이 값이 연속되는 행에 있는 아이템 사이의 최소 간격을, horizontally한 collectionView에서는 연속되는 열에 있는 아이템 사이의 최소 간격...!
이 간격은 한 라인에 얼마나 많은 셀이 들어가는지를 계산하는데 사용되지만, 항목의 수가 결정된 후에는 실제 간격이 더 큰 값으로 조정될 수도 있습니다. 그래서 최소 간격이라고 표현하는 것 같네요.

아니 근데 여기서 또 헷갈리는 이유가
vertical은 약간 아래로.. 길어지는 느낌인데 그러면 열을 기준으로 해야하는 게 아닌가..
그런 느낌이 드는데요

collectionView의 셀 방향


사실은 이 셀 선배들이 생각처럼 띄워지는 게 아니라 의외로 순서가 있었습니다.
알아보기 쉽게 띄워지는 indexPath의 순서대로 label을 붙여봤어요
vertical의 경우 행을 기준으로 먼저 채워지고 그 아래(세로)로 내려가고
horizontal은 열을 기준으로 아래로 채워진 후에 옆(가로)으로 진행되는 모습을 볼 수 있습니다.

이래서 spacing의 간격 또한 기준이 되는 행이나 열이 존재하는 거라고 이해하면 쉬울 것 같아요!

뭐 하여튼

그래서 기준이 되는 행이나 열이 달라지니, 그에 맞게 line과 interSpacing 둘 다 다른 방향으로 적용이 되는 거에요 🥺
간단히 말하면 vertical에서는 inter가 가로지만 horizontal에서는 세로방향의 spacing으로 적용된다는.. 고 느낌이죠

요약

CollectionView의 scrollDirection

  • vertical: 행이 기준
  • horizontal: 열이 기준

Spacing property

  • lineSpacing: 기준 행 또는 열 사이의 간격
  • interSpacing: 기준 행 또는 열 사이에 들어가는 아이템 사이의 간격

틀린 내용 있으면 알려주시면 감사하겠습니다 .. (_ _)

profile
이내임니당 :>

0개의 댓글