Constraint Layout 이미지 가운데 텍스트 배치하기

이미지 중앙에 텍스트를 배치한 화면이 있는데, 글자 수가 많아지면 UI가 제대로 나오지 않아. 해결 방법을 찾기 위해 작성.

이미지 배치

constraintLayout에 이미지를 하나 배치한 코드

ConstraintLayout {
        Image(painter = painterResource(R.mipmap.ic_info), contentDescription = null)
    }

 

이미지와 텍스트 배치

단순 이미지에 텍스트를 추가. 이미지와 텍스트가 겹친다. Column, Row와 다르고 Box와 비슷하다.

@Preview(showBackground = true)
@Composable
fun AlignTextCenterOfImage() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        Image(painter = painterResource(R.mipmap.ic_info), contentDescription = null)
        Text("abcdefg")
    }
}

 

텍스트를 이미지 중앙에 배치

Text의 likeTo를 사용한 것을 참조. 텍스트를 single line을 사용한다면 이렇게만 구현해도 된다.

@Preview(showBackground = true)
@Composable
fun AlignTextCenterOfImage() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (img, text) = createRefs()

        Image(modifier = Modifier.constrainAs(img) {

        }, painter = painterResource(R.mipmap.ic_info), contentDescription = null)
        Text(modifier = Modifier.constrainAs(text) {
            start.linkTo(img.end, 10.dp)
            top.linkTo(img.top)
            bottom.linkTo(img.bottom)
        }, text = "abcdefg")

    }
}

텍스트가 많아지면 UI가 망가짐

현재 발생하고 있는 문제점이다. 이걸 어떻게 해결해야 할지 고민이 많아진다.

@Preview(showBackground = true)
@Composable
fun AlignTextCenterOfImage() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (img, text) = createRefs()

        Image(modifier = Modifier.constrainAs(img) {

        }, painter = painterResource(R.mipmap.ic_info), contentDescription = null)
        Text(modifier = Modifier.constrainAs(text) {
            start.linkTo(img.end, 10.dp)
            top.linkTo(img.top)
            bottom.linkTo(img.bottom)
        }, text = "abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg")

    }

}

이미지 중앙에 가이드를 두고 약간의 편법으로 수정

이미지 중앙에 가이드를 주고, 가이드 아래 텍스트가 배치되도록 했다.
하지만 이렇게 하면 텍스트가 중앙 바로 아래 배치가 되어 마이너스 마진을 주어 텍스트를 위로 살짝 올렸다.

@Preview(showBackground = true)
@Composable
fun AlignTextCenterOfImage() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (img, text, guide) = createRefs()

        HorizontalDivider(modifier = Modifier.constrainAs(guide) {
            top.linkTo(img.top)
            bottom.linkTo(img.bottom)
        })

        Image(modifier = Modifier.constrainAs(img) {

        }, painter = painterResource(R.mipmap.ic_info), contentDescription = null)
        Text(
            modifier = Modifier.constrainAs(text) {
                top.linkTo(guide.top, (-9).dp) // 폰트 크기에 따른 조절 필요
                start.linkTo(img.end, 10.dp)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints

            },
            text = "abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcd"
        )

    }
}

 

이미지가 커져도 어느 정도 중앙을 잘 유지해 주는 것을 확인하고 이렇게 수정 하기로 결정.