[Android Compose Modifier] 7. padding과 border을 조합하여 중첩 테두리 만들기(Multiple Border)

이번 글에서는 하나의 modifier에서 여러개의 border을 만드는 방법을 살펴본다.

 

Modifier에 중첩 border만들기

하나의 Modifier에 여러개의 border을 적용시키는 방법은 간단하다. border사이에 padding을 주면 border을 여러개 중첩해서 만들 수 있다.

*내부 로직은 너무 깊은 내용이므로 이 글에서 다루지 않는다.

 

자 바깥부터 5dp씩 파란색, 빨간색, 초록색 순서로 border을 만들어보자.  border 사이에 padding을 주면 중첩해서 border을 만들 수 있다. 

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldColor() {
    Column(
        modifier = Modifier
            .border(
                width = 5.dp,
                color = Color.Blue
            )
            .padding(5.dp)
            .border(
                width = 5.dp,
                color = Color.Red
            )
            .padding(5.dp)
            .border(
                width = 5.dp,
                color = Color.Green
            )
    ) { }
}

그림3. multiple border