DEV Community

myougaTheAxo
myougaTheAxo

Posted on

TabLayout完全ガイド — TabRow/ScrollableTabRow/Pager連携/バッジ

#android #kotlin #jetpackcompose #mobile

この記事で学べること

TabLayout（TabRow、ScrollableTabRow、HorizontalPager連携、バッジ付きタブ）を解説します。

基本TabRow 

@Composable
fun TabRowExample() {
    var selectedTab by remember { mutableIntStateOf(0) }
    val tabs = listOf("ホーム", "検索", "設定")

    Column {
        TabRow(selectedTabIndex = selectedTab) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    selected = selectedTab == index,
                    onClick = { selectedTab = index },
                    text = { Text(title) },
                    icon = {
                        Icon(
                            when (index) {
                                0 -> Icons.Default.Home
                                1 -> Icons.Default.Search
                                else -> Icons.Default.Settings
                            }, null
                        )
                    }
                )
            }
        }

        when (selectedTab) {
            0 -> HomeContent()
            1 -> SearchContent()
            2 -> SettingsContent()
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

HorizontalPager連携 

@Composable
fun TabPagerExample() {
    val tabs = listOf("記事", "動画", "ブックマーク")
    val pagerState = rememberPagerState(pageCount = { tabs.size })
    val scope = rememberCoroutineScope()

    Column {
        ScrollableTabRow(
            selectedTabIndex = pagerState.currentPage,
            edgePadding = 16.dp
        ) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = { scope.launch { pagerState.animateScrollToPage(index) } },
                    text = { Text(title) }
                )
            }
        }

        HorizontalPager(state = pagerState) { page ->
            Box(Modifier.fillMaxSize().padding(16.dp)) {
                Text("${tabs[page]}のコンテンツ", style = MaterialTheme.typography.headlineMedium)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

バッジ付きタブ 

@Composable
fun BadgeTabExample() {
    var selectedTab by remember { mutableIntStateOf(0) }
    val badges = listOf(3, 0, 1) // 未読数

    TabRow(selectedTabIndex = selectedTab) {
        listOf("通知", "メッセージ", "更新").forEachIndexed { index, title ->
            Tab(
                selected = selectedTab == index,
                onClick = { selectedTab = index },
                text = { Text(title) },
                icon = {
                    BadgedBox(
                        badge = {
                            if (badges[index] > 0) {
                                Badge { Text("${badges[index]}") }
                            }
                        }
                    ) {
                        Icon(
                            when (index) {
                                0 -> Icons.Default.Notifications
                                1 -> Icons.Default.Email
                                else -> Icons.Default.Update
                            }, null
                        )
                    }
                }
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

API 用途
TabRow 固定タブ
ScrollableTabRow スクロール可能タブ
HorizontalPager スワイプ切り替え
BadgedBox バッジ表示
  • TabRowで固定数タブ、ScrollableTabRowで多数タブ
  • HorizontalPagerでスワイプによるタブ切り替え
  • BadgedBoxで未読数バッジ表示
  • animateScrollToPageでプログラム的にページ遷移

8種類のAndroidアプリテンプレート（ナビゲーション対応）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)