android 编写：创建具有圆形背景的文本

5us2dqdw 于 2023-01-24 发布在 Android

关注(0)|答案(4)|浏览(144)

来自SwiftUI，我想创建一个Text的视图，它有一个圆形的背景，圆形的宽度/高度随着Text内文本的变长而增长。
由于Compose中没有SwifUI中的Circle()，我只创建了一个Spacer并裁剪了它。下面的代码使用ConstraintLayout，因为我不知道如何获得Text的宽度，以便将Circle可组合文件的大小设置为相同：

@Composable
fun CircleDemo() {
    ConstraintLayout {
        val (circle, text) = createRefs()

        Spacer(
            modifier = Modifier
                .background(Color.Black)
                .constrainAs(circle) {
                    centerTo(text)
                }
        )

        Text(
            text = "Hello",
            color = Color.White,
            modifier = Modifier
                .constrainAs(text) {
                    centerTo(parent)
                }
        )
    }
}

我可以使用一个mutableStateOf { 0 }，我在附加到Text的onGloballyPositioned修改器中更新它，然后将其设置为Spacer的requiredSize，但是1。这似乎很愚蠢，2。Spacer现在绘制在ConstraintLayout的边界之外。
从视觉上看，我希望实现这一点：

我该怎么做呢？谢谢：）

android

来源：https://stackoverflow.com/questions/67134006/compose-create-text-with-circle-background

4条答案

按热度按时间

w9apscun1#

您必须根据文本的尺寸计算背景圆的尺寸。
可以使用基于**Modifier.layout**的自定义修改器：

fun Modifier.circleLayout() =
    layout { measurable, constraints ->
        // Measure the composable
        val placeable = measurable.measure(constraints)

        //get the current max dimension to assign width=height
        val currentHeight = placeable.height
        val currentWidth = placeable.width
        val newDiameter = maxOf(currentHeight, currentWidth)

        //assign the dimension and the center position
        layout(newDiameter, newDiameter) {
            // Where the composable gets placed
            placeable.placeRelative((newDiameter-currentWidth)/2, (newDiameter-currentHeight)/2)
        }
    }

然后将其应用于Text，背景为**CircleShape**：

Text(
        text = "Hello World",
        textAlign = TextAlign.Center,
        color = Color.White,
        modifier = Modifier
            .background(Color.Black, shape = CircleShape)
            .circleLayout()
            .padding(8.dp)
    )

赞(0）回复(0）举报 2023-01-24

wgmfuz8q2#

也可以从textView本身的修饰符使用drawBehind，如下所示：

Text(
     modifier = Modifier
         .padding(16.dp)
         .drawBehind {
               drawCircle(
                    color = red,
                    radius = this.size.maxDimension
               )
          },
     text = "Hello",
)

当然，你可以进一步自定义半径和其他属性，因为你想！

赞(0）回复(0）举报 2023-01-24

pgx2nnw83#

@Composable
fun Avatar(color: Color) {
    Box(
        modifier = Modifier
            .size(size.Dp)
            .clip(CircleShape)
            .background(color = color),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Hello World")
    }
}

赞(0）回复(0）举报 2023-01-24

rvpgvaaj4#

使用一个透明色内的黑色圆圈作为背景。背景可以拉伸以填充视图，圆圈应该拉伸得很好而没有伪像。

赞(0）回复(0）举报 2023-01-24