시배's Android
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에 포함되는 것들의 사이즈를 비율에 맞게 설정합니다.
이러한 접근 방식을 통해 위 사진처럼 가로 세로 방향과 크기에 민감하게 대응하는 반응형 디자인을 쉽게 구현할 수 있었습니다.
'Android > TiTi Side Project' 카테고리의 다른 글
TiTi Side Project | SwipeDismiss + Animate ListItem 컴포넌트 구현하기 (0) | 2023.10.09 |
---|---|
TiTi Side Project | TdsDialog 컴포넌트 구현하기 (1) | 2023.10.09 |
TiTi Side Project | TdsText 컴포넌트 구현하기 (0) | 2023.10.04 |
TiTi Side Project | Theme Typography 세팅 (0) | 2023.10.03 |
TiTi Side Project | Animate Counter Timer 만들기 (0) | 2023.09.27 |