NTP-8837 | LinearProgressIndicator | Flat Right Edges (#631)

This commit is contained in:
Shivam Goyal
2024-11-19 23:09:58 +05:30
committed by GitHub
parent a3b55a9e98
commit 797a28e1f6

View File

@@ -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,
}
}