iOS/UIKIT

minimumInteritemSpacing과 minimumLineSpacing 설정 및 위치

밤새는 탐험가89 2024. 9. 3. 12:44

1. minimumInteritemSpacing

  • 역할: 동일한 행(row)에서 열(column) 사이의 간격을 설정합니다.
  • 적용: 여러 열이 있는 경우, 각 열 사이의 간격을 설정합니다.
  • 컨텍스트:
    • UICollectionView가 수평 스크롤(horizontal scroll)일 때, 같은 행에 있는 항목들 간의 간격입니다.
    • UICollectionView가 수직 스크롤(vertical scroll)일 때, 같은 열에 있는 항목들 간의 간격입니다.

2. minimumLineSpacing

  • 역할: 행(row) 간의 간격을 설정합니다.
  • 적용: 여러 행이 있는 경우, 각 행 사이의 간격을 설정합니다.
  • 컨텍스트:
    • UICollectionView가 수평 스크롤(horizontal scroll)일 때, 각 열 간의 간격입니다.
    • UICollectionView가 수직 스크롤(vertical scroll)일 때, 각 행 간의 간격입니다.

차이점 요약

  • 수직 스크롤일 때 (scrollDirection = .vertical):
    • minimumInteritemSpacing: 같은 행에 있는 셀들 간의 가로 간격을 조정합니다.
    • minimumLineSpacing: 다른 행들 사이의 세로 간격을 조정합니다.
  • 수평 스크롤일 때 (scrollDirection = .horizontal):
    • minimumInteritemSpacing: 같은 열에 있는 셀들 간의 세로 간격을 조정합니다.
    • minimumLineSpacing: 다른 열들 사이의 가로 간격을 조정합니다.

코드에서의 차이

  1. UICollectionViewDelegateFlowLayout 프로토콜 메서드:
    • 이 메서드는 UICollectionViewFlowLayout의 레이아웃을 동적으로 조정할 수 있게 해줍니다.
    • 이를 사용하면 컬렉션 뷰가 레이아웃을 설정할 때 더 구체적인 간격 조정을 할 수 있습니다.
  2.  콜렉션 뷰 초기화 시:
    • 이 설정은 기본 레이아웃에서의 간격을 설정합니다.
    • 이 값은 UICollectionViewFlowLayout의 속성에 직접 설정되며, 나중에 필요에 따라 UICollectionViewDelegateFlowLayout 메서드를 통해 재정의할 수 있습니다.
    • 초기화할 때 기본값을 설정합니다. 이 값들은 컬렉션 뷰 전체에 걸쳐 적용됩니다.
    • 이 방식은 대부분의 경우에 충분하며, 간단하게 설정할 수 있습니다.

 

결론

일반적으로, 간격이 컬렉션 뷰 전체에 동일하게 적용된다면 UICollectionViewFlowLayout의 속성으로 설정하는 것만으로 충분합니다.

하지만, 특정 섹션이나 특정 상황에 따라 간격을 다르게 설정해야 한다면 UICollectionViewDelegateFlowLayout의 메서드를 사용하는 것이 좋습니다. 이 방식으로 필요할 때만 재정의하여 사용할 수 있습니다.

 

 

 

 

    // UICollectionViewDelegateFlowLayout
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let numberOfItemsPerRow: CGFloat = 4
        let spacing: CGFloat = 5
        let totalSpacing = (2 * spacing) + ((numberOfItemsPerRow - 1) * spacing) // 양쪽 패딩 + 셀 간 간격
        
        let width = (collectionView.bounds.width - totalSpacing) / numberOfItemsPerRow
        return CGSize(width: width, height: collectionView.bounds.height)
    }