안녕하세요! Apple Garden 팀의 S044 이정원 캠퍼입니다. 이번 포스트에서는 저희 Mate Runner에서 어떻게 외부 라이브러리 없이 달력을 구현하였는지 이야기해보려 합니다.

우선 Mate Runner 기록탭에 있는 달력은 다음과 같은데요

달력은 각각의 날짜가 collection으로 이루어져 있는 형태이기 때문에 자연스럽게 CollectionView로 구현해야겠다는 생각이 들었습니다. 그러면서 어떻게 Layout을 잡아줄지 고민해보았는데요

화면 크기에 상관없이 7개의 열을 보여줘야 하기 때문에 fractionalWidth를 사용할 수 있는 CompositionalLayout으로 구현하는 것이 편할 것 같다는 생각이 들었고, 가로 한 줄에 해당하는 7개의 cell들을 하나의 group으로 지정하여 다음과 같이 layout을 구성하였습니다.

만약 1일이 토요일부터 시작하는 경우에는 총 행의 개수가 6개가 되는 경우가 있어 이를 고려하여 group의 heigtDimension은 .fractionalHeight( 1 / 6.0)으로 계산하였습니다.

그 다음으로는 cell에 대한 디자인을 해주었는데요, UICollectionViewCell을 상속받는 CalendarCell을 정의하여 그 안에 달리기 기록의 유무를 나타내는 markView와 날짜를 표시하는 dayLabel을 갖고 있도록 하였습니다.

하지만 1일이 항상 일요일부터 시작하는 것은 아니죠 ㅎㅎ 전체 CollectionView를 봤을 때 적절하게 여백을 표시하는 것이 중요하였는데 먼저 마지막 날짜 이후의 여백을 생각해보았습니다. CollectionView의 DataSource에 해당하는 Model이 Array의 형태로 존재한다면 Layout이 잡혀 있는 상태에서 정해진 개수만큼 cell을 그리기 때문에 마지막에 대한 여백은 따로 고려해주지 않아도 됐습니다.