https://kotlinlang.org logo
#compose
Title
# compose
k

kotlinforandroid

06/12/2022, 9:42 AM
Is it possible to someone draw into the bounding of of a neighboring composable? For example I want to draw something centered on top of box 2. But using a column doesn't work since it would use the largest width, which is the one of the top content. There would be a empty space left and right of box 2.
j

Joseph Hawkes-Cates

06/12/2022, 4:12 PM
You can put
.wrapContentSize(unbounded = true)
modifier on the dotted line composable and it'll allow it to exceed the bounds of the column.
k

kotlinforandroid

06/12/2022, 4:33 PM
thank you very much!
@Joseph Hawkes-Cates that did actually not work. Not sure why. This is the code I've used:
Copy code
@Composable
fun RubyText(
    text: String,
    ruby: String? = null,
    rubyVisible: Boolean = true,
    style: TextStyle = TextStyle.Default,
) {
    val rubyFontSize = LocalTextStyle.current.fontSize / 2
    val boxHeight = rubyFontSize.toDp()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Box(modifier = Modifier.requiredHeight(boxHeight + 3.dp).wrapContentSize(unbounded=true)) {
            ruby?.let {
                if (rubyVisible) {
                    Text(modifier = Modifier.wrapContentSize(unbounded=true), text = it, style = TextStyle(fontSize = rubyFontSize))
                }
            }
        }
        Text(text = text, style = style)
    }
}

// This renders the second image (nside of the thread).
fun example2() {
        RubyText(text = "このルールを")
        RubyText(text = "守", ruby = "まも")
        RubyText(text = "るらない")
        RubyText(text = "人", ruby = "ひと")
        RubyText(text = "は")
        RubyText(text = "旅行", ruby = "りょこう")
        RubyText(text = "ができなくなることもあります。")
}
21 Views