DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Divider完全ガイド — HorizontalDivider/VerticalDivider/カスタム区切り線

#android #kotlin #jetpackcompose #mobile

この記事で学べること

Divider（HorizontalDivider、VerticalDivider、カスタム区切り線、インセット）を解説します。

HorizontalDivider 

@Composable
fun DividerExamples() {
    Column(Modifier.padding(16.dp)) {
        Text("セクション1", style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(8.dp))
        Text("コンテンツ1")

        HorizontalDivider(Modifier.padding(vertical = 16.dp))

        Text("セクション2", style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(8.dp))
        Text("コンテンツ2")

        // カスタムDivider
        HorizontalDivider(
            modifier = Modifier.padding(vertical = 16.dp),
            thickness = 2.dp,
            color = MaterialTheme.colorScheme.primary
        )

        Text("セクション3")
    }
}
Enter fullscreen mode Exit fullscreen mode

VerticalDivider 

@Composable
fun VerticalDividerExample() {
    Row(
        Modifier.height(IntrinsicSize.Min).padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Column(Modifier.weight(1f)) {
            Text("左カラム", fontWeight = FontWeight.Bold)
            Text("左のコンテンツ")
        }

        VerticalDivider(
            modifier = Modifier.fillMaxHeight(),
            thickness = 1.dp,
            color = MaterialTheme.colorScheme.outline
        )

        Column(Modifier.weight(1f)) {
            Text("右カラム", fontWeight = FontWeight.Bold)
            Text("右のコンテンツ")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

リスト内Divider 

@Composable
fun ListWithDividers(items: List<String>) {
    LazyColumn {
        itemsIndexed(items) { index, item ->
            ListItem(
                headlineContent = { Text(item) },
                leadingContent = { Icon(Icons.Default.Article, null) }
            )
            if (index < items.lastIndex) {
                HorizontalDivider(
                    modifier = Modifier.padding(start = 56.dp), // インセット
                    color = MaterialTheme.colorScheme.outlineVariant
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

API 用途
HorizontalDivider 水平区切り線
VerticalDivider 垂直区切り線
thickness 線の太さ
color 線の色
  • HorizontalDividerでセクション間の区切り
  • VerticalDividerでカラム間の区切り
  • padding(start = 56.dp)でインセット付きDivider
  • outlineVariant色で目立ちすぎない区切り

8種類のAndroidアプリテンプレート（Material3 UI対応）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)