구분선

구분선은 목록이나 다른 컨테이너의 항목을 구분하는 가는 선입니다. HorizontalDivider 및 VerticalDivider 컴포저블을 사용하여 앱에 구분선을 구현할 수 있습니다.

API 노출 영역

두 구성요소 모두 모양을 수정하기 위한 매개변수를 제공합니다.

  • thickness: 이 매개변수를 사용하여 구분선의 두께를 지정합니다.
  • color: 이 매개변수를 사용하여 구분선의 색상을 지정합니다.

가로 구분선 예

다음 예는 HorizontalDivider 구성요소의 구현을 보여줍니다. thickness 매개변수를 사용하여 선의 높이를 제어합니다.

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}
Divider.kt

이 구현은 두 텍스트 구성요소 사이에 얇은 가로 선을 렌더링합니다.

'목록의 첫 번째 항목'과 '목록의 두 번째 항목'이라는 두 개의 텍스트 항목이 얇은 가로선으로 구분된 Android 앱 화면입니다.
그림 1. 두 개의 텍스트 구성요소를 구분하는 가로 구분선

세로 구분선 예

다음 예는 VerticalDivider 구성요소의 구현을 보여줍니다. color 매개변수를 사용하여 선에 맞춤 색상을 제공합니다.

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}
Divider.kt

이 구현은 두 텍스트 구성요소 사이에 가는 수직선을 렌더링합니다.

'행의 첫 번째 항목'과 '행의 두 번째 항목'이라는 2개의 텍스트 항목이 얇은 세로선으로 구분된 Android 앱 화면입니다.
그림 2. 두 개의 텍스트 구성요소를 구분하는 세로 구분선

추가 리소스