[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또한 만들 수 있다.