我需要实现下面的指标,显示用户是在线的,并有图像和实际指标之间的空边界.

我怎样才能做到这一点?

也许Canva是关键,但我不知道怎么做.请帮我拿出指示器.

enter image description here

推荐答案

如果您想使用画布而不是在图像中添加白色边框,您可以签出以下代码:

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)
        )
    }

以下是示例输出:

Profile image using canvas

Android相关问答推荐

了解数据加载在Kotlin中的工作原理

用于小部件泄漏警告的伙伴对象中的Kotlin Lateinit

ERR_SSL_VERSION_OR_CIPHER_MISMATCH - Android Webview

OutlinedTextField仅显示一次

判断文本视图是否为单行

找不到com.android.tools.build:gradle:8.0

更改选定的切换轨道 colored颜色

需要 java 17 而不是 java 11:Android CI-CD GitHub Actions

可从 Play store 下载链接访问未发布的应用

当 EditText 用于在 android studio 中将字符串发送到 firebase 时,仅允许安全调用错误

为什么@PrimaryKey val id: Int? = null 在创建 Room 实体时有效吗?

Jetpack Compose 中带有权重的行和 AnimatedVisibility 会 destruct UI

Kotlin Multiplatform Mobile targetSdk 已弃用

Google Play 控制台您的应用是否使用广告 ID?

在jetpack compose中看不到圆角

Android Compose webview 被拉伸

任何 IRCTC 的公共 API 来判断 PNR 状态和座位可用性?

Android检测屏幕键盘的完成按键

Android Room Database:如何处理实体中的 Arraylist?

如何更改工具栏主页图标 colored颜色