[Swift] 태그 리스트 만들기 (UICollectionView)

안녕하세요! 오랫만의 개발 포스팅 입니다 ㅠㅠㅠ... 최근에 했던 개발 하면서 새롭게 구현해본 뷰를 포스팅해보려 해요. 태그 리스트인데,

예전에 오픈톡방에서 한 분이 '태그 리스트는 어떻게 만들어야 할까요?' 라고 물어보셨을때 제가 '스택뷰로 구현하면 되지 않을까요?' 라고 했었는데, 생각해보니 스택뷰로 구현하면 갯수에따라 구현하기가 애매할 것 같더라구요 (생각이 짧았어요 ㅠㅠ)

최근에 태그 리스트를 만들 일이 있었는데 컬렉션뷰로 만들면 갯수 상관없이 구현할 수 있을 것 같아서 컬렉션뷰로 접근하게 됬습니다.

오늘 만들어볼 뷰는 요렇게 생긴 태그 리스트를 만들어 볼거에요! 단 티스토리의 태그는 최대 크기가 고정되어 있는 것 같은데, 저는 유동적으로 한번 만들어보겠습니당 ㅇ_ㅇ

쉽게 사용하기 위해 SnapKit, Then, ReusableKit 프레임워크를 사용하도록 하겠습니당

스토리보드 없이 코드로 진행할게요.

스토리보드 없이 개발하기

우선 UICollectionView를 사용할 것이기 때문에 필수적으로 준비해줘야 하는부분들을 작성해보겠습니다.

준비물

• collectionView
• UICollectionViewDataSource: cell갯수, cell 선언
• UICollectionViewDelegateFlowLayout: 셀 크기설정
• 뿌려줄 Data

• collectionViewCell

그리고 collectionView 제약사항을 걸어주면 요렇게 빌드가 됩니다.

cell 크기를 임의로 아무값이나 넣어서 이렇게 떳어요

일반적인 collectionViewCell이죠.. 여기서 태그리스트 처럼 만들려면 각 Cell의 Size가 String 값에 따라 달라지도록 작업을 해줘야 해요.

하지만 String값의 Size를 구하는 메소드가 없자나요..?

그래서 이 부분을 해결해주기 위해서 임의로 UILabel에 String값을 넣어서 UILabel의 Size값을 구하는..? 방법을 사용할거에요

비슷하게 더미셀..? 이란 말을 들어봤던 것 같은데 저는 안쓰는 라벨을 만드니 더미라벨..? =_= ㅋㅋ 아무튼간..

요렇게 사용하지 않는 라벨의 size를 구해주는 식으로 String의 Size크기를 구해줍니다.

width에 +16, height에 +10을 추가로 더해준 이유는 여백 때문입니다. 대략적으로 줘봤습니다.

collectionView의 delegate를 사용할것이기 때문에 추가해줍시다.

// viewDidload
self.collectionView.delegate = self

그러면 요렇게 나옵니다.

이쁘게 꾸며주기 위해 cell의 radius값을 추가해줍시당

이렇게보면 끝난 것 같지만.. 문제가 있습니다.. 만약 갯수가 많다면.. collectionView 특성상 cell 크기가 정확하게 계산이 안 될 경우 여백이 생기는 문제점이 있죠.. 이렇게..?

뭔가 붕 뜬 느낌이죠..? 이를 수정해주기 위해 collectionView를 왼쪽정렬시켜주는 layout을 추가시켜주겠습니다.

파일을 하나 추가해서 선언해줍시당.

그리고 사용한 collectionView에 요런식으로 layout을 적용시켜 주면..

요렇게 깔끔하게 왼쪽정렬이 된걸 볼 수 있습니당.

왼쪽으로 정렬을 해주는 layout을 알아보자면..

지정된 cell(표현된 Cell이라고 이해했어요)에 대한 layout속성을 검색한다고 하네요. 검색이 된다는건 접근이 된다는 거겠죠..?

매개변수 및 리턴값

매개변수로 CGRect를 받아서

cell및 뷰에 대한 layout정보들을 return하는 [UICollectionViewLayoutAttributes]? 를 반환합니다.

중간 상식

CGRect이란?

은 좌표값인 CGPoint, 사이즈인 CGSize를 가지고 있는 Struct 값입니다.

Frame vs Bounds

frame은 superView 기준 좌표.

bounds는 내가 보고있는 뷰(앵글..이라고 해야하나..보는 시야)의 좌표. bounds의 x좌표를 10 올렸다면 내가 보는 위치에서 +10만큼 해줬다고 해야하나..?

링크

그럼 코드를 분석해보면..

요런식으로.. 각 cell의 width크기, height를 비교해가며 값을 변경시켜준 layout 정보를 return 해주는식으로 작업을 진행했습니다.

오늘은 궁금했었던 태그 리스트를 UICollectionView를 사용해서 만드는 과정을 포스팅해보았습니다. 저도 새롭게 알게 된 내용이기 때문에 정리를 해보았는데, 도움이 되셧으면 좋겠네용.

요즘.. 취업준비 때문에.. 밤도 많이 세고.. 그러다보니 몸이 많이 안좋아졌더라구요.. 최근에 병원다니면서 휴식의 시간을 가지고 있었어요 ㅠㅠ.. 건강이 최고인 것 같습니다. 다들 개발도 좋지만 건 강 관 리!! 꼭 하시고.. 몸 안좋아지면 자기만 손해니.. 잠도 잘 주무시고.. 너무 늦게까지 하지 마시고 건강관리 잘 하시길 바래요.

다음 포스팅은 아마 Viper 아키텍처에 대해 공부해볼까 해요. RxSwift나..?

그럼 코로나 조심하시고.. 마스크는 필수..

예제 프로젝트

https://github.com/kbw2204/TagList

참고자료

• 애플 개발자 문서 - layoutAttributesForElements
• qiita - katafuchix
• Zedd님 블로그 - CGSize
• Zedd님 블로그 - Frame

추가로 혹시 iOS 앱 개발이 아직 미숙하다고 느끼시고 이 강의를 안들어 보신 분은 edWith - 부스트코스 iOS 강의를 꼭 들어보시는걸 추천드려요. 카카오톡 오픈톡방에 iOS 부스트코스 오픈톡방도 있으니 한번쯤 들어오셔서 swift 질문도 하고 정보도 공유하면 좋을 것 같아요.

• Naver - Edwith - 부스트코스 iOS

• 부스트코스 iOS 카카오톡 오픈톡방