分割線

分割線は、リストやその他のコンテナ内のアイテムを区切る細い線です。アプリに分割線を実装するには、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

この実装では、2 つのテキスト コンポーネントの間に細い水平線が描画されます。

2 つのテキスト アイテム（「リスト内の最初のアイテム」と「リスト内の 2 番目のアイテム」）が細い横線で区切られて表示されている Android アプリの画面。
図 1. 2 つのテキスト コンポーネントを分割する横方向のデバイダー。

縦方向の分割線の例

次の例は、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 つのテキスト コンポーネントの間に細い縦線が表示されます。

2 つのテキスト アイテム（「行内の最初のアイテム」と「行内の 2 番目のアイテム」）が細い縦線で区切られて表示されている Android アプリ画面。
図 2. 2 つのテキスト コンポーネントを分割する縦方向の分割線。

参考情報