SwiftUI ZStack 활용

SwiftUI의 ZStack을 이용해 현재 용량에 대한 정보를 표시하는 ProgressView를 구현해 보았다.

일단 완성된 View는 아래 그림이다.

지원하는 라이브러리나, 오픈소스가 있는 지 찾아보았지만, 찾을 수 없어 직접 만들어 보았다.

먼저 View 스택구조는 맨 밑의 배경을 담당하는 View 1개, 그리고 타입별 용량을 나타내는 View 한개씩 해서 총 6개의 View로 되어있다.

문제

만드는 과정에 문제점이 있었는데, ZStack으로 아무런 설정없이 구성하게 되면, View가 겹치기 떄문에, value 값을 어떻게 넣어야 되고, 또한 타입 별 value가 순서대로 보여지게 끔 되어야 했다.(순서가 보장되어야 한다. ex) 텍스트, 사진, 동영상 이러한 순서대로...)

정리하자면 2가지의 문제점이다.

1. View 겹침현상 -> ZStack이기에 당연 하지만 value값 넣을 시 값이 적다면 안보임.
2. 순서대로 보여줘여함

해결과정

먼저 문제2부터 해결해보자.

ZStack에서는 .zIndex를 사용해 겹치는 View의 순서를 정할 수 있다.

그래서 텍스트: 1, 사진: 0.9, 동영상: 0.8로 설정하여 해결하였다.

이제 문제1을 해결해보자

ex) 텍스트(보라): 0.2, 사진(초록): 0.1, 동영상(노랑): 0.3

ex 데이터 값을 넣게 된다면, ZStack의 특성상 View가 겹치기 떄문에, 동영상(노랑)만 보여지게 된다.

그래서 value에 이전 값을 더하고 보여주었다.

텍스트: 0.2, 사진: 0.2 + 0.1, 사진: 0.2 + 0.1 + 0.3

value에 이전 값을 넣고 그리게 되면, 실제로 그려지게 되는 것은 실제 value보단 길어지게 되지만, 보여지는 것은 원래 원본 value에 대한 것을 표현한 것처럼 보인다.

정리

나름대로 해결해보았지만, 맞는 방법인지 모르겠다. 만약 타입이 계속 늘어나게 된다면 복잡해질수도 있고, 리소스가 많이 들 것 같지만, 다른 한편으로는 막상 표현하는 타입이 많지 않을 것 같다.(텍스트, 사진, 동영상, 오디오, 파일... 또 무엇이 있을까)