【Jetpack Compose】コピペで作れる設定画面

意外と面倒な設定画面が数分でできます。

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

このライブラリは、開発者がボイラープレートなしで複雑な設定画面を構成できるアイテム詰め合わせです。

👉 alorma/Compose-Settings: Android #JetpackCompose Settings library

以下、 @Composable 内にコピペですぐに表示できます。

implementation 'com.github.alorma:compose-settings-ui:$version'

SettingsMenuLink(
  icon = { Icon(imageVector = Icons.Default.Wifi, contentDescription = "Wifi") },
  title = { Text(text = "Link") },
  subtitle = { Text(text = "This is a longer text") },
  onClick = {},
)
Divider()
SettingsSwitch(
  icon = { Icon(imageVector = Icons.Default.Wifi, contentDescription = "Wifi") },
  title = { Text(text = "Switch") },
  subtitle = { Text(text = "This is a longer text") },
  onCheckedChange = { },
)
Divider()
SettingsCheckbox(
  icon = { Icon(imageVector = Icons.Default.Wifi, contentDescription = "Wifi") },
  title = { Text(text = "Checkbox") },
  subtitle = { Text(text = "This is a longer text") },
  onCheckedChange = { },
)
Divider()
SettingsSlider(
  icon = {
    Icon(
      imageVector = Icons.Default.BrightnessMedium,
      contentDescription = "Brightness Medium"
    )
  },
  title = { Text(text = "Slider") },
)
Divider()
SettingsList(
  title = { Text(text = "List") },
  subtitle = { Text(text = "Select a fruit") },
  items = listOf("Banana", "Kiwi", "Pineapple"),
  action = {
    IconButton(onClick = {  }) {
      Icon(
        imageVector = Icons.Default.Clear,
        contentDescription = "Clear",
      )
    }
  },
)

UIだけでなく Preferences への読み書きも用意されています。
👉 【Jetpack Compose】Compose Settings で数分で設定画面を作る