Open6
Jetpack Compose逆引き辞典
はるはじめに
このスクラップは、Jetpack Composeで効率良く開発することを目的としています。
様々なUIの書き方を、サクッと見つけるために、ここに色々まとめます。
目次
はるアプリバーを作る（TopAppBar/BottomAppBar）
※コードは公式から引用しています。
TopAppBarの基本の書き方
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SmallTopAppBarExample() {
Scaffold(
topBar = {
TopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text("Small Top App Bar")
}
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
※他にも、CenterAlignedTopAppBar、MediumTopAppBar、LargeTopAppBarなどがあります。
BottomAppBarの基本の書き方
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomAppBarExample() {
Scaffold(
bottomBar = {
BottomAppBar(
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(Icons.Filled.Check, contentDescription = "Localized description")
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Mic,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Image,
contentDescription = "Localized description",
)
}
},
floatingActionButton = {
FloatingActionButton(
onClick = { /* do something */ },
containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
) {
Icon(Icons.Filled.Add, "Localized description")
}
}
)
},
) { innerPadding ->
Text(
modifier = Modifier.padding(innerPadding),
text = "Example of a scaffold with a bottom app bar."
)
}
}
注意点
ドキュメント
はるタップ可能なアイコンを作る（IconButton）
※コードは公式から引用しています。
基本の書き方
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
IconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}
公式ドキュメント
はるScrollできる縦リスト（LazyColumn）
※コードは公式から引用しています。
基本の書き方
LazyColumn {
// Add a single item
item {
Text(text = "First item")
}
// Add 5 items
items(5) { index ->
Text(text = "Item: $index")
}
// Add another single item
item {
Text(text = "Last item")
}
}
/**
* import androidx.compose.foundation.lazy.items
*/
LazyColumn {
items(messages) { message ->
MessageRow(message)
}
}
LazyColumnのまわりに余白
LazyColumn(contentPadding = PaddingValues(24.dp))
アイテムの間に余白
LazyColumn(verticalArrangement = Arrangement.spacedBy(16.dp))
公式ドキュメント
はるカード（Card）
コードは公式から引用しています。
基本の書き方
シンプル
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
塗りつぶしカード
@Composable
fun FilledCardExample() {
Card(
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant,
),
modifier = Modifier
.size(width = 240.dp, height = 100.dp)
) {
Text(
text = "Filled",
modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center,
)
}
}
立体カード
@Composable
fun ElevatedCardExample() {
ElevatedCard(
elevation = CardDefaults.cardElevation(
defaultElevation = 6.dp
),
modifier = Modifier
.size(width = 240.dp, height = 100.dp)
) {
Text(
text = "Elevated",
modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center,
)
}
}
枠線付きカード
@Composable
fun OutlinedCardExample() {
OutlinedCard(
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
),
border = BorderStroke(1.dp, Color.Black),
modifier = Modifier
.size(width = 240.dp, height = 100.dp)
) {
Text(
text = "Outlined",
modifier = Modifier
.padding(16.dp),
textAlign = TextAlign.Center,
)
}
}
公式ドキュメント
はる画面遷移したい（Navigation）
基本の使い方
- build.gradle.ktsに以下を書く
公式ドキュメントより引用しています。
dependencies {
val nav_version = "2.8.0"
implementation("androidx.navigation:navigation-compose:$nav_version")
}
- 以下のようなコードを書く
以下のコードは、Jetpack Composeで画面遷移をするより引用。
// どこのページへ移動するかnavControllerに定義する @Composable fun DisplayNav() { // navControllerを作成 val navController = rememberNavController() // NavHostを作成 // startDestinationは最初に表示するページ NavHost(navController = navController, startDestination = "First Screen") { // 最初に表示するページ composable(route = "First Screen") { FirstScreen(navController = navController) } // 2番目に表示するページ composable(route = "Second Screen") { SecondScreen(navController = navController) } } } // ボタンを押すと、画面遷移できるようにパラメーターを追加 @Composable fun FirstScreen(navController: NavController) { Button(onClick = { navController.navigate("Second Screen") }) { Text(text = "Go to 2nd Screen") } } @Composable fun SecondScreen(navController: NavController) { Button(onClick = { navController.navigate("First Screen")}) { Text(text = "Go to 1st Screen") } }
公式ドキュメント