Image
Android Jetpack Compose/Compose Modifier

[Android Compose Modifier] 6. border을 이용해 테두리 만들기

border

border은 border의 너비(width) 색상(color) 모양(shape)을 설정함으로써 설정 가능하다.

fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape) =
    border(width, SolidColor(color), shape)

 

 

border의 구성요소

  • width : 너비(dp)
  • color :색상
  • shape :모양

 

네모 border만들기

예를 들어 아래와 같이 너비가 5dp이고 파란색 색상의 네모 모양 border을 만들어보자. 

 

width에 5.dp를 color에는 Color.Blue를 shape에는 RectangleShape을 넘김으로써 네모 모양 border을 만들 수 있다.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldColor() {
    Column(
        modifier = Modifier
            .border(
                width = 5.dp, // 너비 5dp
                color = Color.Blue, // 색상 파란색
                shape = RectangleShape // 네모 모양
            )
    ) { }
}

 

그림1. border with 5dp blue rectangle

 

여기서 Shape은 앞서 [Android Compose Modifier] 3. Modifier.background로 배경색 설정하고 라운딩 처리하기 의 shape과 같다. 

 

원형 border만들기

따라서 Circle shape을 가진 border 또한 shape에 CircleShape을 넘김으로써 만들 수 있다.

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

그림2. border with circle shape

 

마찬가지 방법으로 border가 Rounded되거나 Cut된 Border또한 만들 수 있다.

 

 

반응형

 

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

 

 

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

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

open.kakao.com