시배's Android

현재 TiTi에서는 Task를 선택하기 위해 BottomSheet에서 Task를 선택, 수정, 추가, 삭제 등 다양한 작업을 할 수 있는 화면이 있습니다. 이 화면에 요구사항으로는 다음과 같습니다. Edit 모드에 진입하면 좌우측에서 삭제와 드래그할 수 있는 아이콘이 Animate 하게 등장한다. SwipeDismiss를 통해 삭제가 가능하다. LongClick을 통해 Task명을 수정하는 Dialog가 등장한다. 이러한 요구사항을 만족하기 위해 아래와 같은 Compose의 API를 이용하여 쉽게 구현할 수 있습니다. AnimateVisibility SwipeToDismiss combinedClickable AnimateVisiblity AnimatedVisibility(visible = editMode..

TdsDialogInfo 일반적으로 Dialog에는 Alert Dialog와 Confirm Dialog가 있습니다. Alert Dialog는 사용자에게 특정 메시지를 전달해주는 경우, Confirm Dialog는 사용자에게 특정 메시지 전달과 동시에 해당 메시지에 응답할 것인지 여부를 확인하는 Dialog로 볼 수 있습니다. sealed interface TdsDialogInfo { val title: String val message: String val cancelable: Boolean val onDismiss: (() -> Unit)? data class Confirm( override val title: String, override val message: String, override val ..

반응형 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 = outCircularSiz..

TdsText 컴포넌트 @Composable fun TdsText( modifier: Modifier = Modifier, text: String? = null, textStyle: TdsTextStyle, fontSize: TextUnit, textDecoration: TextDecoration? = null, color: TdsColor, textAlign: TextAlign? = null, overflow: TextOverflow = TextOverflow.Clip, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, onTextLayout: (TextLayoutResult) -> Unit = {}, ) { Text( text = text ?: "", modif..

폰트 설정 FontFamily를 사용하여 여러 가지 글꼴을 정의하고 있습니다. 예를 들어, hgggothicssiProFontFamily에는 여러 가지 두께의 글꼴이 포함되어 있습니다. 이를 사용하여 텍스트 스타일에서 해당 글꼴을 참조할 수 있습니다. val hgggothicssiProFontFamily = FontFamily( Font(R.font.hgggothicssi_pro_00g, FontWeight.Thin), Font(R.font.hgggothicssi_pro_20g, FontWeight.ExtraLight), Font(R.font.hgggothicssi_pro_40g, FontWeight.Normal), Font(R.font.hgggothicssi_pro_60g, FontWeight.Semi..

TiTi 프로젝트에서는 Timer와 StopWatch 기능을 구현하기 위해, 실제 시간이 흐르는 듯한 Animate Counter Timer를 구현해야 합니다. 이 과정은 앱의 핵심 부분 중 하나이며, 사용자에게 시간 경과를 시각적으로 제공하는 중요한 요소입니다. 블로그 글에서는 이 Animate Counter Timer의 구현 방법을 자세히 알아보겠습니다. 실제로 시, 분, 초가 흐르는 것처럼 보이는 놀라운 효과를 어떻게 만들 수 있는지, 코드와 함께 상세히 살펴보겠습니다. AnimatedCounter @Composable fun TdsAnimatedCounter( modifier: Modifier = Modifier, count: Int, ) { var oldCount by remember { mut..

Compose를 활용한 커스텀 테마 및 다크 모드 / 라이트 모드 대응 Jetpack Compose를 사용하면 Android 앱의 사용자 인터페이스를 구축할 때 커스텀 테마를 설정하고 다크 모드와 라이트 모드 간에 전환하는 기능을 쉽게 구현할 수 있습니다. 이 글에서는 커스텀 테마를 설정하고 다크 모드와 라이트 모드를 대응하는 방법을 알아보겠습니다. 커스텀 컬러 팔레트 정의 @Immutable data class CustomColorsPalette( val d1: Color = Color.Unspecified, val d2: Color = Color.Unspecified, // 다른 컬러들도 포함... val clearColor: Color = Color.Unspecified ) 먼저, 앱에서 사용할 커..