Jetpack Compose 中的用户在线指示器

Question

我需要实现下面的指示器，该指示器显示用户在线，并且图像和实际指示器之间有空边框。

我怎样才能实现它？

也许canva是关键，但我不知道如何。请帮我制作指标。

Answer 1

如果您想使用 Canvas 而不是向图像添加白色边框的解决方法，您可以查看以下代码：

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp


Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            val imageWidth = 50.dp.toPx()
            val radius = imageWidth / 2f
            val overlapAmount = radius / 3f
            val iconSize = overlapAmount * 2f
            val iconCenterX = (size.width / 2f) + (imageWidth / 2f) - overlapAmount
            val iconCenterY = (size.height / 2f) + (imageWidth / 2f) - overlapAmount
            val arcStartAngle = 135f // Start angle for the arc in degrees
            val arcSweepAngle = 180f // Sweep angle for the arc in degrees
            val arcRect = Rect(
                left = (iconCenterX - iconSize / 2f),
                top = (iconCenterY - iconSize / 2f),
                right = (iconCenterX + iconSize / 2f),
                bottom = (iconCenterY + iconSize / 2f)
            )
            drawCircle(
                color = Color.Gray,
                radius = radius,
                center = Offset(size.width / 2f, size.height / 2f)
            )
            drawArc(
                color = Color.White,
                startAngle = arcStartAngle,
                sweepAngle = arcSweepAngle,
                useCenter = false,
                topLeft = arcRect.topLeft,
                size = Size(arcRect.width, arcRect.height),
                style = Stroke(width = 10f)
            )
            drawCircle(
                color = Color.Green,
                radius = iconSize / 2f,
                center = Offset(iconCenterX, iconCenterY)
            )
        }
        Image(
            painter = painterResource(id = R.drawable.alerter_ic_notifications), // Replace with your profile image resource
            contentDescription = "Profile Image",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(20.dp)
                .align(Alignment.Center)
        )
    }

这是示例输出：

Answer 2

您可以轻松地将修饰符的边框属性添加到蓝点，并添加一些边框 dp 使其看起来像这样，希望您发现这有帮助。

编辑：-您可以使用徽章可组合功能使 UI 看起来像这样，这里是link

示例：-

@Composable
fun DrawUser(users: List<User>) {
    LazyRow(verticalAlignment = Alignment.CenterVertically) {
        items(users) {
            Box {
                Image(
                    bitmap = it.image.asImageBitmap(),
                    contentDescription = "user",
                    modifier = Modifier.clip(
                        CircleShape
                    )
                )
                Image(
                    painter = painterResource(id = R.drawable.dot),
                    contentDescription = "dot",
                    modifier = Modifier
                        .clip(
                            CircleShape
                        )
                        .border(5.dp, color = Color.Black, shape = CircleShape)
                        .align(Alignment.BottomEnd)
                )
            }
        }
    }
}

data class User(val image: Bitmap)

我有我的博客这里