UICollectionView를 이용한 LvUpTodo List 리팩토링

안녕하세요 Pingu입니다🐧

 

오늘은 개인앱을 리팩토링하는 글을 써보려고합니다.

iOS앱개발을 처음 공부하며 만든 앱이라 그런지 정말 부족한 부분이 많네요 ㅠ.ㅠ

앞으로는 꾸준히 리팩토링 글과 새로운 기능을 추가하는 글도 써보려고 하는데 재밌을거 같아요^~^

 

기존 코드의 문제점

LvUpTodo앱의 Todo List는 원래 UITableView로 구현되어 있었습니다. 처음에는 그냥 할 일을 보여주고 완료하면 완료 버튼을 눌러서 표시하고, UITableViewDelegate의 cellDidSelected를 통해 수정을 할 수 있게 만들었습니다.

문제는 Cell의 높이를 모두 일정하게 정해놔서 Label의 Text길이가 길어지게 되면 위와 같이 뒷부분이 생략되는 문제가 있었습니다. 그리고 개인적으로 디자인을 바꾸고 싶은 부분도 있고 해서 디자인 요소를 쉽게 추가하고 셀 높이 계산을 쉽게 하기 위해서 UICollectionView로 수정하기로 마음먹었습니다.

수정 사항

결과적으론 위와 같이 UICollectionView로 수정했고 그 동안 넣고 싶었던 Todo Cell의 디자인도 조금 수정했습니다. 물론 색은 잠깐 임의로 넣은 색입니다. 지금 보니 널디라는 브랜드의 운동복 색 조합이랑 비슷하네요.

어려웠던 점

일단 UITableView를 사용할 때는 Cell의 높이를 고정크기로 만들어서 문제가 발생했기 때문에 이를 고치고 싶었습니다. 그러려면 셀의 높이를 직접 계산해줘야했는데요, 이 부분이 어려웠습니다.

처음에는 위와 같이 현재 indexPath의 Cell을 불러와서 해당 Cell의 Label의 높이를 더해서 적용하려고 했습니다. 하지만 Cell의 Size는 UICollectionViewDataSource에서 Cell을 구성하기 전에 설정되어 위와 같은 방식에서는 실제 데이터에 맞는 높이를 설정할 수 없었습니다. ViewDidAppear에서 reloadData()를 사용하여 이를 수정할 수 있었지만 화면이 나온 뒤에 수정되는 것이 보기 싫었습니다.

 

그래서 위와 같이 데이터를 가지고 Cell의 데이터가 구성되기 전에 미리 해당 데이터를 적용했을 때의 높이를 계산하여 적용했더니 원하는 결과를 얻을 수 있었습니다.

느낀 점

비교적 간단한 리팩토링이었지만 Cell이 구성되는 시점을 확실히 알게 되었으며 Cell의 높이를 계산하는 방법을 고민해보며 문제를 해결할 수 있었습니다.