시배's Android

문제 TiTi에는 사용자가 자신의 공부 시간을 확인할 수 있는 TimeTable 기능이 있습니다. 어느 날 우연히 Layout Inspector를 사용하던 중, TimeTable에서 지속적으로 Recomposition 발생하고 있다는 사실을 발견했습니다.문제의 원인@Composablefun TdsTimeTable( modifier: Modifier = Modifier, timeTableData: List, colors: List,) { var hour by remember { mutableStateOf("0") } var fontSize by remember { mutableStateOf(7.sp) } val textStyle = Tds..

문제 Timer TiTi를 개발하며 겪었던 흥미로운 이슈와 그 해결 과정을 공유하려 합니다. 개발 과정 중 데이터는 정상적으로 업데이트되었지만, 특정 그래프가 화면에 표시되지 않는 문제에 직면했습니다. 문제의 원인 @Composable private fun TdsPieChart( modifier: Modifier = Modifier, taskData: List, colors: List, progress: Float, containsDonut: Boolean, totalTimeString: String?, ) { var startAngle = 270f val density = LocalDensity.current BoxWithConstraints( modifier = modifier, contentAlig..

TiTi Side Project | Composable 함수를 Bitmap으로 변환하기 Timer TiTi 프로젝트에서는 Card를 이미지로 변환하여 갤러리에 저장하거나 인스타그램에 공유하는 기능을 추가하려고 합니다. 이를 위해서는 Composable 함수로 구현된 View를 Bitmap으로 변환하는 로직 si8ae.tistory.com 갤러리 저장 먼저, 비트맵 객체를 PNG 포맷의 이미지 파일로 저장하는 과정을 살펴봅시다. 이를 위해 저는 먼저 저장할 파일의 위치와 이름을 정의해야 합니다. 여기서는 Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES)를 사용하여 공용 사진 디렉토리에 파일을 저장하고, 파일 이름은 "..

Timer TiTi 프로젝트에서는 Card를 이미지로 변환하여 갤러리에 저장하거나 인스타그램에 공유하는 기능을 추가하려고 합니다. 이를 위해서는 Composable 함수로 구현된 View를 Bitmap으로 변환하는 로직이 필요합니다. fun Modifier.createCaptureImageModifier(picture: Picture): Modifier = this.drawWithCache { val width = this.size.width.toInt() val height = this.size.height.toInt() onDrawWithContent { val pictureCanvas = Canvas( picture.beginRecording( width, height, ), ) draw(this,..

위 사진을 보면 TiTi 프로젝트에서 TimeTable의 격자가 제대로 그려지지 않는 상황이 발생하고 있습니다. Compose의 Preview에서는 잘 나오지만 실제 runtime에서는 위와 같이 이슈가 발생하고 있습니다. fun DrawScope.drawGrid() { val itemWidth = size.width / 7 val itemHeight = size.height / 24 var startX = 0f var startY = 0f repeat(7 * 24) { idx -> drawRect( color = Color(0x80626262), topLeft = Offset( x = startX, y = startY, ), size = Size(itemWidth, itemHeight), style =..

TdsTimeTable은 TiTI 프로젝트에서 사용되는 커스텀한 컴포넌트입니다. 이 컴포넌트는 사용자가 진행한 task에 대한 시간을 한눈에 파악할 수 있도록 도와주며, 각 시간대별로 진행한 task를 시각적으로 표현합니다. Canvas( modifier = modifier .drawWithContent { drawContent() drawGrid() }, ) { fun DrawScope.drawGrid() { val itemWidth = size.width / 7 val itemHeight = size.height / 24 var startX = 0f var startY = 0f repeat(7 * 24) { idx -> drawRect( color = Color(0x80626262), topLeft ..

TdsTimeLineBar는 TiTI 프로젝트에서 사용되는 커스텀한 타임라인 막대 그래프입니다. 이 그래프는 사용자가 하루 동안의 공부 시간을 쉽게 시각화할 수 있도록 도와줍니다. 각 시간대에 할당된 공부 시간을 백분율로 나타내며, 막대 그래프의 배경으로 Gradient 컬러가 들어가고 있습니다. @Composable fun TdsTimeLineChart( modifier: Modifier = Modifier, times: List, startColor: Color, endColor: Color, ) { require(times.size == 24) { "The times list must be 24 in size" } BoxWithConstraints(modifier = modifier) { val i..

TdsPieChart는 TiTI 프로젝트에서 사용되는 커스텀한 Pie Chart입니다. 각각의 task에 대한 누적시간을 퍼센트로 나타내며, 각 task 사이에는 1도의 여백으로 검은색을 화면에 표시합니다. 또한 애니메이션 효과를 지원하여 사용자에게 부드러운 시각적 효과를 제공합니다. @Composable fun TdsPieChart( modifier: Modifier = Modifier, taskData: List, colors: List, containsDonut: Boolean = false, animationSpec: AnimationSpec = TweenSpec(durationMillis = 500), ) { val transitionProgress = remember(taskData) { An..