이동식 저장소

커스텀 뷰에 익숙하지 않은 사람은 먼저 이 글을 읽어보자.

목표

위 사진처럼 $N$개의 요소를 가로 방향이 아닌 세로 방향으로 배치하는 그리드를 만들어 보자. 행(column)의 수 $col$, 가로방향 간격, 세로방향 간격은 주어진다고 가정한다.

해야 할 일

Measure Children

모든 measurable를 measure하여 placeable을 얻는다.

Decide own size

완성된 뷰의 너비와 높이를 알아야 한다. 먼저 너비부터 구해 보자.

열의 수를 $R$이라고 하면 $R=ceil(\frac{N}{col})$이다. 여기서 $ceil$은 천장 함수를 의미한다. 완성된 뷰의 너비는 모든 열의 너비와 가로 간격$\times R$의 합과 같다. 이제 각 열의 너비를 알아야 하는데, 이 값은 각 열에서 가장 길이가 긴 child의 너비와 같다. 따라서 placeable을 $col$개씩 끊어 너비가 가장 긴 요소를 찾으면 된다.

이제 높이를 구해 보자. 완성된 뷰의 높이는 각 열의 높이 중 가장 큰 값과 같다. placeable을 $col$개씩 끊어 계산하면 각 열의 높이를 구할 수 있고, 그 중 가장 큰 값이 뷰의 높이이다.

Place Children

이제 각 요소를 배치하자. 각 열의 $x$좌표는 같고, $y$좌표에 각 요소의 높이를 계속 더해주면 된다. 하나의 열을 모두 배치한 후에는 다음 열로 이동해야 하는데, $x$좌표에는 이전 열의 너비와 가로 방향 간격의 합을 더해주고, $y$좌표는 0으로 할당하면 된다.

코드 (Github)

요소가 너무 많으면 뷰가 너무 길어질 수 있는데, modifier에 horizontalScroll()을 추가하여 문제를 해결하였다.

완성된 뷰