Zenn
Open3

【Compose】TabRow

たけのこたけのこ

Material 3のTabRowはCompose 1.1.0-alpha01から導入されました。以下はMaterial 3のTabRowを使用した例です。

まず、build.gradle.ktsにMaterialコンポーネントの依存関係を追加します。

implementation("com.google.android.material:compose-material3:1.1.0-alpha01")

次に、Material 3のTabRowとTabを使ってタブを作成します。

import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color

@Composable
fun MyScreen() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    Surface(color = Color.White) {
        Column {
            TabRow(
                selectedTabIndex = selectedTabIndex,
                contentColor = Color.Red,
                containerColor = Color.Yellow,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        color = Color.Black,
                        modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
                    )
                },
                modifier = Modifier.fillMaxWidth()
            ) {
                Tab(
                    selected = selectedTabIndex == 0,
                    onClick = { selectedTabIndex = 0 },
                    text = { Text("Tab 1") }
                )
                Tab(
                    selected = selectedTabIndex == 1,
                    onClick = { selectedTabIndex = 1 },
                    text = { Text("Tab 2") }
                )
                // Add more tabs as needed
            }

            // Content for each tab
            when (selectedTabIndex) {
                0 -> {
                    // Content for Tab 1
                    Text("Content for Tab 1")
                }
                1 -> {
                    // Content for Tab 2
                    Text("Content for Tab 2")
                }
                // Add more cases for additional tabs
            }
        }
    }
}

このコードでは、Material 3のTabRowとTabを使用して、2つのタブを作成しています。selectedTabIndex変数を使用して、選択されたタブのインデックスを追跡し、それに基づいて表示するコンテンツを切り替えています。

必要に応じて、TabRowやTabのプロパティを変更して、デザインをカスタマイズすることができます。