android 如何在Jetpack合成中使用线圈制作首字母图标

c3frrgcw  于 2023-01-15  发布在  Android
关注(0)|答案(3)|浏览(149)

因此,我使用线圈库为我们的图像处理,我注意到在保持器,它只需要一个整数。我想然而,如果一个用户没有一个化身或任何错误的情况下显示首字母显示,如这张图片见下文。问题是,我是新的喷气背包组成,不知道我如何才能实现这一点。见我的代码如下。

我有这张卡,有图标,和一些详细信息我的个人资料卡

ProfileCard( 
    personName = String.format("%s %s", e.firstName, e.lastName),
    personC = entity.program ?: "", 
    painter = rememberAsyncImagePainter(model = getProfileAvatar(entity.id)),
    onCardClick = {})

我的getProfileAvatar()

private fun getProfileAvatar(id: String) : ImageRequest {
    val url = ServiceAPI.photoUrl(id) 
    return ImageRequest.Builder(requireContext()) 
        .data(url) 
        .addHeader() ) 
        .build() }

感谢反馈,我确实看到了一些帖子,但没有提到Jetpack部分。

olhwl3o2

olhwl3o21#

你可以使用coil的SubcomposeAsyncImage来实现,它允许你使用任何可组合的函数作为占位符/错误状态:

SubcomposeAsyncImage(
    model = getProfileAvatar()
) {
    val state = painter.state
    if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {
        Text(text = "NG")
    } else {
        SubcomposeAsyncImageContent()
    }
}
shstlldc

shstlldc2#

示例:

val personName by remember{ mutableStateOf(String.format("%s %s", entity.firstName, entity.lastName)) }
val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .allowHardware(false)
        .data("https://xxxx.xxxx.user_avatar.jpg")
        .size(Size.ORIGINAL)
        .build()
)
val isErrorState = painter.state is AsyncImagePainter.State.Error
val textMeasure = rememberTextMeasurer()
val textLayoutResult = textMeasure.measure(text = buildAnnotatedString { append(personName) }, style = TextStyle(color = Color.White, fontSize = 16.sp))

ProfileCard(
    modifier = Modifier.drawBehind {
        if(isErrorState) {
            drawText(textLayoutResult = textLayoutResult)
        }
    },
    personName = personName,
    personC = entity.program ?: "",
    painter = rememberAsyncImagePainter(model = getProfileAvatar(entity.id)),
    onCardClick = {}
)
sr4lhrrt

sr4lhrrt3#

Coil没有内置的可组合占位符支持。
但是你有不同的选择。
可以使用SubcomposeAsyncImage定义不同的合成物:

SubcomposeAsyncImage(
    model = url,
    contentDescription = "contentDescription",
    contentScale = ContentScale.Crop,
    modifier = Modifier.clip(CircleShape)
) {
    val state = painter.state
    if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {

        //text with a background circle
        Text(
            modifier = Modifier
                .padding(16.dp)
                .drawBehind {
                    drawCircle(
                        color = Teal200,
                        radius = this.size.maxDimension
                    )
                },
            text = "NG",
            style = TextStyle(color = Color.White, fontSize = 20.sp)
        )
    } else {
        SubcomposeAsyncImageContent()
    }

此外,AsyncImage中的placeholder参数接受Painter

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(url)
        .build(),
    placeholder = TextPainter(
        circleColor= Teal200,
        textMeasurer = rememberTextMeasurer(),
        text="NG",
        circleSize = Size(200f, 200f)
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.padding(16.dp)
)

其中:

class TextPainter(val circleColor: Color,
                  val circleSize : Size,
                  val textMeasurer: TextMeasurer,
                  val text : String,
) : Painter() {

    val textLayoutResult: TextLayoutResult =
        textMeasurer.measure(
            text = AnnotatedString(text),
            style = TextStyle(color = Color.White, fontSize = 20.sp)
        )

    override val intrinsicSize: Size get() = circleSize

    override fun DrawScope.onDraw() {
        //the circle background
        drawCircle(
            color = circleColor,
            radius = size.maxDimension/2
        )
        
        val textSize = textLayoutResult.size
        //The text
        drawText(
            textLayoutResult = textLayoutResult,
            topLeft = Offset(
                (this.size.width - textSize.width) / 2f,
                (this.size.height - textSize.height) / 2f
            )
        )
    }
}

相关问题