UICollectionViewFlowLayout 설정으로 같은 줄의 셀 높이를 동일하게 맞추기

 

UICollectionViewFlowLayout에는 prepare() 메소드와 layoutAttributesForElement(in rect: CGRect) → [UICollectionViewLayoutAttributes]? 라는 메소드가 있어 이것을 오버라이드할 수 있다.

• prepare : 현재 레이아웃을 업데이트하도록 레이아웃 객체에게 지시
  • 레이아웃 업데이트는 콜렉션뷰가 처음 콘텐츠를 보여줄 때와 뷰 변경으로 인해 레이아웃이 명시/암시적으로 유효성을 잃을 때 발생
  • 매 레이아웃 업데이트 동안 콜렉션뷰는 prepare()을 먼저 호출해 레이아웃 객체에게 다음 레이아웃 수행을 위한 준비를 하도록 함
• layoutAttributesForElement : 특정 직사각형 영역 내의 모든 셀과 뷰의 레이아웃 attributes를 가져온다.

 

실제로 레이아웃 배치를 하는 코드가 길긴 하지만 일부 발췌해서 올린다.

셀을 하단으로 배치시키는 방법은 여러 가지가 있겠으나, 여기서 내가 사용한 트릭은 한 줄의 셀 중 가장 높은 셀로 높이를 통일시키고, 실제 이미지뷰 높이가 적은 경우에는 top constriant를 0보다 크도록 잡아서 그만큼 위로부터 띄우는 것이다.

 

// 가로의 아이템들(=같은 높이에 있는)의 높이를 가장 높은 것으로 맞춰준다.
    if rect.count > 2, let lastRect = array.last?.frame {
        let sameLineRects = array.filter { $0.frame.origin.y == lastRect.origin.y }
        let maxHeight = sameLineRects.map { $0.size.height }.max() ?? 0
                            
        sameLineRects.forEach { rect in
            array.frame.size.height = maxHeight
        }
    }

 

간단한 아이디어로, 같은 높이에 있는(frame.origin.y가 같은 것으로 판단) 셀들을 모아서 그 중 가장 높은 높이로 frame height를 재조정하면 된다.