diff --git a/navi-uitron/src/main/java/com/navi/uitron/render/LinearProgressIndicatorWithThumbRenderer.kt b/navi-uitron/src/main/java/com/navi/uitron/render/LinearProgressIndicatorWithThumbRenderer.kt index 40427fd..4b02f76 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/render/LinearProgressIndicatorWithThumbRenderer.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/render/LinearProgressIndicatorWithThumbRenderer.kt @@ -15,8 +15,14 @@ import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.geometry.CornerRadius +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Rect +import androidx.compose.ui.geometry.RoundRect +import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Path import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.graphics.drawscope.clipPath import androidx.compose.ui.layout.Layout import androidx.compose.ui.layout.layoutId import androidx.compose.ui.platform.LocalView @@ -147,16 +153,16 @@ class LinearProgressIndicatorWithThumbRenderer(private val uiTronRenderer: UiTro Layout( { Box(modifier = Modifier.wrapContentHeight().layoutId(Components.THUMB)) { - Thumb(thumb) + Thumb(thumb = thumb) } Box(modifier = Modifier.wrapContentHeight().layoutId(Components.TRACK)) { Track( - trackWidth, - trackHeight, - trackColor, - cornerRadius, - progress, - progressBarColor + trackWidth = trackWidth, + trackHeight = trackHeight, + trackColor = trackColor, + cornerRadius = cornerRadius, + progress = progress, + progressBarColor = progressBarColor, ) } }, @@ -195,32 +201,78 @@ class LinearProgressIndicatorWithThumbRenderer(private val uiTronRenderer: UiTro trackColor: Color, cornerRadius: Dp, progress: Float, - progressBarColor: Color + progressBarColor: Color, ) { Canvas(Modifier.setWidth(trackWidth).setHeight(trackHeight)) { - drawLinearIndicatorBackground(trackColor, cornerRadius) - drawLinearIndicator(progress, progressBarColor, cornerRadius) + drawLinearIndicatorBackground( + color = trackColor, + cornerRadius = cornerRadius, + ) + + drawLinearIndicatorClipped( + color = progressBarColor, + cornerRadius = cornerRadius, + progress = progress, + ) } } - private fun DrawScope.drawLinearIndicatorBackground(color: Color, cornerRadius: Dp) { - drawLinearIndicator(1f, color, cornerRadius) - } - - private fun DrawScope.drawLinearIndicator( - widthFraction: Float, + private fun DrawScope.drawLinearIndicatorBackground( color: Color, cornerRadius: Dp, ) { drawRoundRect( color = color, - size = drawContext.size.copy(width = size.width * widthFraction), + size = size, cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx()) ) } + private fun DrawScope.drawLinearIndicatorClipped( + color: Color, + cornerRadius: Dp, + progress: Float, + ) { + val radiusPx = cornerRadius.toPx() + + val trackPath = + Path().apply { + addRoundRect( + RoundRect( + rect = Rect(Offset.Zero, size), + cornerRadius = CornerRadius(radiusPx, radiusPx) + ) + ) + } + + clipPath(trackPath) { + val progressPath = + Path().apply { + addRoundRect( + RoundRect( + rect = + Rect( + offset = Offset.Zero, + size = + Size( + width = size.width * progress, + height = size.height, + ) + ), + topLeft = CornerRadius(radiusPx, radiusPx), + bottomLeft = CornerRadius(radiusPx, radiusPx), + topRight = CornerRadius.Zero, + bottomRight = CornerRadius.Zero, + ) + ) + } + + drawPath(path = progressPath, color = color) + } + } + private enum class Components { THUMB, - TRACK + TRACK, } }