我为此制作了非常基本的示例,它将给出创建带有示例边框和填充 png 文件的评级栏的基本想法。
@Composable
private fun RatingBar(
modifier: Modifier = Modifier,
rating: Float,
spaceBetween: Dp = 0.dp
) {
val image = ImageBitmap.imageResource(id = R.drawable.star)
val imageFull = ImageBitmap.imageResource(id = R.drawable.star_full)
val totalCount = 5
val height = LocalDensity.current.run { image.height.toDp() }
val width = LocalDensity.current.run { image.width.toDp() }
val space = LocalDensity.current.run { spaceBetween.toPx() }
val totalWidth = width * totalCount + spaceBetween * (totalCount - 1)
Box(
modifier
.width(totalWidth)
.height(height)
.drawBehind {
drawRating(rating, image, imageFull, space)
})
}
private fun DrawScope.drawRating(
rating: Float,
image: ImageBitmap,
imageFull: ImageBitmap,
space: Float
) {
val totalCount = 5
val imageWidth = image.width.toFloat()
val imageHeight = size.height
val reminder = rating - rating.toInt()
val ratingInt = (rating - reminder).toInt()
for (i in 0 until totalCount) {
val start = imageWidth * i + space * i
drawImage(
image = image,
topLeft = Offset(start, 0f)
)
}
drawWithLayer {
for (i in 0 until totalCount) {
val start = imageWidth * i + space * i
// Destination
drawImage(
image = imageFull,
topLeft = Offset(start, 0f)
)
}
val end = imageWidth * totalCount + space * (totalCount - 1)
val start = rating * imageWidth + ratingInt * space
val size = end - start
// Source
drawRect(
Color.Transparent,
topLeft = Offset(start, 0f),
size = Size(size, height = imageHeight),
blendMode = BlendMode.SrcIn
)
}
}
private fun DrawScope.drawWithLayer(block: DrawScope.() -> Unit) {
with(drawContext.canvas.nativeCanvas) {
val checkPoint = saveLayer(null, null)
block()
restoreToCount(checkPoint)
}
}
Usage
Column {
RatingBar(rating = 3.7f, spaceBetween = 3.dp)
RatingBar(rating = 2.5f, spaceBetween = 2.dp)
RatingBar(rating = 4.5f, spaceBetween = 2.dp)
RatingBar(rating = 1.3f, spaceBetween = 4.dp)
}
Result
还创建了一个使用手势、其他 png 文件和矢量作为评级项目的库here https://github.com/SmartToolFactory/Compose-RatingBar.
@Composable
fun RatingBar(
modifier: Modifier = Modifier,
rating: Float,
painterEmpty: Painter,
painterFilled: Painter,
tintEmpty: Color? = DefaultColor,
tintFilled: Color? = null,
itemSize: Dp = Dp.Unspecified,
rateChangeMode: RateChangeMode = RateChangeMode.AnimatedChange(),
gestureMode: GestureMode = GestureMode.DragAndTouch,
shimmer: Shimmer? = null,
itemCount: Int = 5,
space: Dp = 0.dp,
ratingInterval: RatingInterval = RatingInterval.Unconstrained,
allowZeroRating: Boolean = true,
onRatingChangeFinished: ((Float) -> Unit)? = null,
onRatingChange: (Float) -> Unit
)