JETPACK COMPOSE: Border에 대해 알아보자

Jetpack Compose 내에서 view를 장식할 때 일부 구성 요소는 Border reference를 사용하여 주어진 구성요소의 윤곽을 표시하도록 허용합니다.

 

현재 Border reference의 사용은 너무 광범위하지 않으며 사용하는데 최소한의 노력이 필요합니다.

 

Border reference를 인스턴스화하는 두 가지 방법이 있습니다. 

첫 번째는 Border 클래스를 통해 직접적으로:

@Immutable
data class BorderStroke(val width: Dp, val brush: Brush)

Border 클래스를 직접 사용하는 경우 두가지 속성을 전달해야 합니다. (BorderStroke)

• width - border의 두께 (required)
• brush - border 스타일 지정에 사용되는 Brush 인스턴스에 대한 참조 (required)

Border를 만드는 두 번째 방법은 제공된 함수를 사용하는 것입니다.

제공된 색상을 사용하여 Border 클래스의 새 인스턴스를 만듭니다.

fun BorderStroke(width: Dp, color: Color) = Border(size, SolidColor(color))

Border 함수를 부를 때 필요한 2가지 속성이 있습니다.

• width - border의 두께 (required)
• color - border를 위해 사용될 색깔 (required)

Border를 적용할 때 위에서 함수를 사용하여 적용하는 방법을 살펴보겠습니다.

여기에서 새 Border reference를 만들고 이를 Box 구성 요소의 border 속성으로 설정합니다.

Box(
    modifier = Modifier.border(BorderStroke(2.dp, Color.Black))
)

https://joebirch.co/android/exploring-jetpack-compose-border/

Border 함수를 사용하는 것 외에도 현재 Border 클래스에 직접 액세스할 수 있습니다.

위에서 볼 수 있듯이 이 클래스는 Brush 구현에 대한 참조를 사용합니다.

 

다른 게시물에서 Brush에 대해 더 자세히 살펴보겠지만 이 예제에서는 SolidColor 클래스를 사용하여 제공된 색상에서 Brush를 만듭니다. 

 

여기에서 새로운 Border reference를 만들고 이를 Box의 구성 요소의 Border 속성으로 설정하는 데 사용할 것입니다.

Box(
    modifier = Modifier.border(BorderStroke(2.dp, SolidColor(Color.Red))
)

https://joebirch.co/android/exploring-jetpack-compose-border/

 

https://joebirch.co/android/exploring-jetpack-compose-border/