[iOS] CollectionView Cell 너비 동적으로 조절하기

CollectionView Cell Dynamic Width, 컬렉션 뷰 셀 너비 동적으로 조절하기

 

💭 들어가며

모든 UI 요소의 크기가 동일하면 얼마나 좋을까요? 하지만 그렇지 않기 때문에 우리는 방법을 찾게 되죠 🥲 특히나 컨텐츠의 사이즈에 따라서 UI 컴포넌트의 사이즈를 동적으로 조절해주는 상황은 꽤나 자주 등장합니다. 그 중에서도 CollectionView는 단골 손님입니다. CollectionView 자체의 높이를 동적으로 조절하는 상황이나, CollectionView Cell의 너비나 높이를 조절하는 상황을 예로 들 수 있겠네요!

✨ 오늘은 CollectionView Cell의 너비를 동적으로 조절하는 방법을 알아보도록 하겠습니다 〰

 

---

📺 요구사항

우리가 구현해야할 상황은 다음과 같아요. 빨간색 박스 영역을 구현해야 하는데 각 카테고리 영역이 텍스트 길이에 맞게 동적으로 조절되어야 합니다. 스크롤 뷰에 버튼으로 넣는 방법도 있겠지만 우리는 컬렉션 뷰를 이용해보도록 하죠!

Youtube 구독 탭

 

---

 

🔍 검색

일단 모르겠으면 스택오버플로우(stackoverflow) 가보는거죠~ 다음과 같이 검색해보겠습니다. 그러니까 링크가 하나 나오네요!

dynamic width cell swift

Dynamic cell width of UICollectionView depending on label width

 

---

 

🍕 적용할 코드

적용할 코드는 되게 간단해요. UICollectionViewDelegateFlowLayout를 채택하고 Cell Size를 결정해주는 델리게이트 메서드에서 사용해주면 됩니다.

---

 

🤖 코드 뜯어보기

CGSize란

CGSize는 크기 값(너비와 높이 값)을 포함하는 구조체입니다.CGSize.width는 너비를 의미하고, CGSize.height는 높이를 의미합니다.

 

size(withAttributes:) 메서드를 이용해보자

요구사항이 텍스트 크기에 맞춰서 셀의 너비를 동적으로 조절해주자는 것이었는데, 고민이 되는 부분은 '텍스트 크기, 길이를 어떻게 알지?' 이 부분일 것 같습니다~ 텍스트도 size를 구할 수 있을까요? size 인스턴스 메서드를 이용하면 구해볼 수 있을 것 같습니다.

// 다음 메서드는 String 타입(정확히 NSString 객체) 뒤에 붙여서 사용합니다. size(withAttributes: _)

 

size(withAttributes:) 메서드 사용 예시

실제로 적용하기 전에 간단하게 사용해보도록 할게요. Text(String)를 둘러싼 하나의 사각형을 생각하고 size를 구해주는 것이라고 이해해도 괜찮을 것 같습니다.

 

 

텍스트 사이즈 만큼 셀의 너비를 지정해주면 되겠다!

텍스트의 사이즈를 알았다면 그 사이즈만큼 컬렉션 뷰 셀의 너비를 지정해주면 되겠죠? 셀의 좌우에 여백을 주고 싶다면 적절하게 수치를 더해주면 됩니다. 아래처럼요.

// 다음은 정확한 코드는 아닙니다. 이해를 돕기 위한 수도코드입니다. // 이어서 시청하기 텍스트 사이즈의 너비 + 20(여백)을 구하겠다. "이어서 시청하기".size(withAttributes: _).width + 20

 

---

🌈 마무리

다음에는 CollectionView 자체의 높이를 동적으로 조절하는 방법과 셀의 높이를 동적으로 조절하는 방법을 소개하도록 하겠습니다. 분명 한 번 쯤은 쓰이는 상황이 나오거든요~ 글이 꽤나 길어졌는데 읽어주셔서 감사합니다 :-) 잘못된 내용 지적이나 피드백, 조언, 질문 등 언제나 환영입니다!

---

🗒 링크

Dynamic width cell

Dynamic cell width of UICollectionView depending on label width

Apple Developer Documentation