動的トップ アプリバーを作成する

このガイドでは、Compose で動的なトップ アプリバーを作成し、リストからアイテムを選択したときにオプションを変更する方法について説明します。選択状態に応じて、トップ アプリバーのタイトルとアクションを変更できます。

動的なトップ アプリバーの動作を実装する

このコードでは、アイテムの選択に応じて変化するトップ アプリバーのコンポーズ可能な関数を定義します。

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

コードに関する主なポイント

  • AppBarSelectionActions は、選択したアイテムのインデックスの Set を受け取ります。
  • topBarText は、アイテムを選択するかどうかによって変化します。
    • アイテムを選択すると、選択したアイテムの数を表すテキストが TopAppBarに表示されます。
    • アイテムを選択しない場合、topBarText は「List of items」になります。
  • actions ブロックは、トップ アプリバーに表示するアクションを定義します。hasSelection が true の場合、テキストの後に共有アイコンが表示されます。
  • onClick ラムダは、IconButton がアイコンをクリックしたときに共有アクションを処理します。

結果

動的なトップ アプリバーに「3 個のアイテムを選択しました」というテキストと共有アイコンが表示されています。このテキストとアイコンは、アイテムが選択されている場合にのみ表示されます
図 1.アイテムを選択したときにのみテキストと共有アイコンが表示される動的なトップ アプリバー。

選択可能なリストを動的なトップ アプリバーに統合する

この例では、選択可能なリストを動的なトップ アプリバーに追加する方法を示します。

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

コードに関する主なポイント

  • 選択したリストアイテムの数に応じて、トップバーが更新されます。
  • selectedItems には、選択したアイテムのインデックスのセットが格納されます。
  • AppBarMultiSelectionExample は、Scaffold を使用して 画面を構成します。
    • topBar = { AppBarSelectionActions(selectedItems) } は、 AppBarSelectionActions コンポーザブルをトップ アプリバーとして設定します。 AppBarSelectionActions は selectedItems 状態を受け取ります。
  • LazyColumn は、アイテムを縦方向のリストに表示し、画面に表示されているアイテムのみをレンダリングします。
  • ListItemSelectable は、選択可能なリストアイテムを表します。
    • combinedClickable を使用すると、アイテムの選択でクリックと長押しを処理できます。クリックするとアクションが実行され、アイテムを長押しすると選択状態が切り替わります。

結果

動的なトップ アプリバーに「3 個のアイテムを選択しました」というテキストと共有アイコンが表示されています。以下に、複数の項目がリスト表示され、選択されている 3 つの項目の横にチェックマークが表示されている様子を示します。
図 2.特定のアイテムが選択された動的なトップ アプリバーに統合されたリスト。

参考情報