TiTi Side Project | 반응형 TdsTimer 컴포넌트 구현하기

반응형 Timer와 StopWatch 구현하기

TiTi 프로젝트에서는 Timer와 StopWatch를 구현해야 했으며, 기기의 가로 세로 방향에 상관 없이 반응형으로 동작해야 하는 요구사항이 있었습니다. 더불어, 화면 크기의 약 80% 정도를 차지하도록 구현해야 했습니다. 이를 위해 Compose의 BoxWithConstraints를 활용한 방법을 소개합니다.

 BoxWithConstraints(modifier = modifier) {
    val minSize = min(maxHeight, maxWidth)
    val outCircularSize = minSize * 0.8
    val outCircularTrackWidth = minSize * 0.05
    val inCircularSize = outCircularSize - outCircularTrackWidth * 2
    val inCircularTrackWidth = outCircularTrackWidth * 0.4
    val contentSize = inCircularSize - inCircularTrackWidth * 2

    val subTextSize = minSize.value * 0.03
    val subTimerTextSize = minSize.value * 0.08
    val mainTextSize = minSize.value * 0.04
    val mainTimerTextSize = minSize.value * 0.175

	// ... 내용 
 }

위의 코드는 BoxWithConstraints를 사용한 예제입니다. BoxWithConstraints가 가지는 최대높이, 최대너비 중 작은것을 구합니다. 이렇게 구한 값을 바탕으로 Component에 포함되는 것들의 사이즈를 비율에 맞게 설정합니다. 

이러한 접근 방식을 통해 위 사진처럼 가로 세로 방향과 크기에 민감하게 대응하는 반응형 디자인을 쉽게 구현할 수 있었습니다.