【Jetpack Compose】メールアプリを最も簡単に開く方法

指定したURLでWEBブラウザを開くならこう書けます。


@Composable
fun OpenLinkButton(
  urlHandler: UriHandler = LocalUriHandler.current
) {
  Button(
    onClick = {
      urlHandler.openUri("https://android.benigumo.com/")
    }
  ) {
    Text("Open Web link")
  }
}

では、

指定した宛先メールアドレスでメールアプリを開く場合。


@Composable
fun OpenMailAppButton(
  urlHandler: UriHandler = LocalUriHandler.current
) {
  Button(
    onClick = {
      urlHandler.openUri("mailto:[email protected]")
    }
  ) {
    Text("Open Mail App")
  }
}

旧来の Intent は Jetpack Compose では使わないことが多くなってきました!

👉 顔文字 (かおもじ) パック - Google Play のアプリ

Jetpack Compose 「Modifierは子１つ目だけに適用する」の考え方

実際のコード例で考えてみる。


Column {
  Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
  )
  Text(
    text = "World",
    modifier = Modifier.padding(16.dp)
  )
}




val modifier = Modifier.padding(16.dp)

Column {
  Text(text = "Hello", modifier = modifier)
  Text(text = "World", modifier = modifier)
}




Column(
  modifier = Modifier.padding(16.dp)
) {
  Text(text = "Hello")
  Text(text = "World")
}




@Composable
fun ParentLayout() {
  Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
  ) {
    for (i in 1..10) {
      ListItem(
        text = "Item $i",
        modifier = Modifier.padding(8.dp)
      )
    }
  }
}

@Composable
fun ListItem(modifier: Modifier, text: String) {
  Text(
    text = text,
    modifier = modifier.background(Color.LightGray)
  )
}

共有することの意味は「統一性」だろうけども、

見通しが悪くなるので「1つ目まで」としているのだろう。

「まずは個別につけてから共通部分をホイストしていく。」

「親から渡すときは子まで影響。孫は個別に。」

そんな考え方の順番が簡単で自然だと思います。

Jetpack Compose Material3 の ListItem で設定画面を秒でつくる

実際、秒、ってことないけども。

まあまあ簡単で見た目も綺麗にできます。

Jetpack Compose Material3 の ListItem を使います。


@Composable
fun ListItem(
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    colors: ListItemColors = ListItemDefaults.colors(),
    tonalElevation: Dp = ListItemDefaults.Elevation,
    shadowElevation: Dp = ListItemDefaults.Elevation
): Unit


👉 androidx.compose.material3  |  Android Developers

Card を利用して、設定項目をグループ分けします。

👉 Card  |  Jetpack Compose  |  Android Developers

以下のようなレイアウト構成。


SettingScreen
  LazyColumn
    Card - Group
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    Card
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    ...

こう書けました。

こんな感じです。

Material3 って、今では結構使えるんですね!