Timer를 사용해 남은 시간인 분, 초, 밀리초 단위로 포매팅을 해 화면의 Text로 띄워주는 작업을 진행중이였습니다.
시간 부분이 심하게 꿈틀 꿈틀 거리는 현상 발생...
Text(viewStore.state.walkTimer.formatWalkTime)
.padding(??)패딩을 적용하면 되지 않을까 싶은데 텍스트 길이에서, 그러니까 무작위로 커지고 작아지는 텍스트 길이에서의 패딩이 적용되는 것이기 때문에 근본적인 해결책은 될 수 없었습니다.
Text(viewStore.state.walkTimer.formatWalkTime)
.frame(maxWidth: 150)frame의 영역을 지정하는 것 또한 방법이 될 수 없습니다. 영역만 커질 뿐 텍스트는 그대로입니다. 마찬가지로 alignment의 center, leading 또한 해결되지 않습니다.
해결
생각보다 간단히 해결되었습니다.
RoundedRectangle(cornerRadius: 16)
.stroke(Color(dstopColor: .disabledLight), lineWidth: 1)
.overlay {
ZStack {
RoundedRectangle(cornerRadius: 16)
.foregroundColor(Color(dstopColor: .gray))
HStack {
Image(.flat_video)
Text("이완훈련 설정 가이드")
.dStopFont(.subtitle2)
}
}
}저는 테두리의 색과 배경색이 존재하는 RoundedRectangle을 만들 때 다음과 같이 사용합니다.
- 테두리 색이 존재하는 Rectangle을 우선적으로 생성합니다.
- 이를 overlay를 통해 생성한 영역을 내부를 그대로 사용해줍니다.
- 해당 영역 내에서 ZStack으로 배경색을 지정 할 Rectangle을 하나 생성합니다.
- 이를 배경으로 사용해 원하는 컨텐츠들을 추가합니다.
그 결과 크기가 동일한 2개의 Rectangle이 존재하지만 테두리만 선언한 최상단 뷰와 내부의 배경색만 존재하는 child view가 공존할 수 있습니다.
이에 영감받아 Timer Area도 수정했습니다.
ZStack(alignment: .leading) {
Text("00:00:00")
.background(.red)
.opacity(0.0)
Text(viewStore.state.walkTimer.formatWalkTime)
.background(.green)
}0으로 모든 글꼴에서 가장 넓은 숫자입니다. 따라서 배경으로 둘 00:00:00 Text는 타이머에서 사용 할 가장 넓은 영역을 가지게 됩니다. 이에 따라 ZStack이 그려지고 alignment를 leading으로 설정해두어 커지는 영역을 밀리초로 한정할 수 있습니다.
색깔을 지정한 결과물은 다음과 같습니다.
alignment를 leading으로 설정해주었기 때문에 영역이 바뀌는 무브먼트가 우측으로 제한됩니다.
마치며
사실 해결하는데 여러 시간이 소요된 문제점이였습니다. 이미 저는 비슷한 방식으로 사용하고 있었음에도 불구하고 문제 해결방법을 떠올리는 데 어려움이 있었습니다. 등잔 밑이 어둡다는 걸 이번 문제를 해결함으로써 알게 되었습니다.
