分割線とは、リストなどのコンテナ内のアイテムを区切る細い線です。HorizontalDivider
コンポーザブルと VerticalDivider
コンポーザブルを使用して、アプリに分割線を実装できます。
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") } }
この実装では、2 つのテキスト コンポーネントの間に細い水平線がレンダリングされます。
![「リスト内の最初のアイテム」と「リストの 2 番目のアイテム」が細い横線で区切られた 2 つのテキスト アイテムが表示されている Android アプリの画面。](https://developer.android.google.cn/static/develop/ui/compose/images/components/divider-horizontal.png?hl=ja)
縦方向の分割線の例
次の例は、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") } }
この実装では、2 つのテキスト コンポーネントの間に細い縦線がレンダリングされます。
![「First item in row」と「Second item in row」という 2 つのテキスト アイテムが細い縦線で区切られた Android アプリの画面。](https://developer.android.google.cn/static/develop/ui/compose/images/components/divider-vertical.png?hl=ja)