Image
Android Jetpack Compose/Compose Modifier

[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

 

반응형

 

이 글의 저작권은 '조세영의 Kotlin World' 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com