時間選択ツールのダイアログ

時刻選択ツールは、ダイアログによく表示されます。比較的汎用的で、 ダイアログを最小限の実装で実装できます。また、Terraform で実装した 柔軟性が高まります

時間選択ツールの使用方法など、ダイアログ全般に関する詳細情報 時刻選択ツールのガイドをご覧ください。

基本的な例

時間選択ツールのダイアログを作成する最も簡単な方法は、 AlertDialog を実装するコンポーザブルを作成します。次のスニペットは、このアプローチを使用した比較的最小限のダイアログの例を示しています。

@Composable
fun DialWithDialogExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

このスニペットの要点に留意してください。

  1. DialWithDialogExample コンポーザブルは、ダイアログ内の TimePicker をラップします。
  2. TimePickerDialog は、AlertDialog を作成するカスタム コンポーザブルです。 次のパラメータを指定します。 <ph type="x-smartling-placeholder">
      </ph>
    • onDismiss: ユーザーがダイアログを閉じたときに呼び出される関数（閉じるボタンまたは戻るナビゲーションによる）。
    • onConfirm: ユーザーが [OK] ボタンをクリックしたときに呼び出される関数。
    • content: ダイアログ内に時刻選択ツールを表示するコンポーザブル。
  3. AlertDialog には次のものが含まれます。
    • 「閉じる」というラベルの閉じるボタン。
    • [OK] というラベルの確認ボタン。
    • text パラメータとして渡される時間選択ツールのコンテンツ。
  4. DialWithDialogExample は、TimePickerState を 現在の時刻を TimePicker と onConfirm の両方に渡します。 使用します。
タイトル、モード切り替え、閉じるボタン、確認ボタンを実装した AlertDialog 内の時間選択ツール。
図 1. AlertDialog の時間選択ツール。

高度な例

このスニペットは、Jetpack Compose でカスタマイズ可能な時間選択ツールのダイアログを高度に実装する方法を示しています。

@Composable
fun AdvancedTimePickerExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {

    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

このスニペットの主なポイントは次のとおりです。

  1. AdvancedTimePickerExample コンポーザブルは、カスタマイズ可能な時刻選択ツールのダイアログを作成します。
  2. AlertDialog よりも柔軟性を高めるために、Dialog コンポーザブルを使用しています。
  3. ダイアログには、カスタマイズ可能なタイトルと、ダイヤルモードと入力モードを切り替える切り替えボタンが含まれています。
  4. Surface は、幅と高さの両方に IntrinsicSize.Min を指定して、ダイアログに形状とエレベーションを適用します。
  5. Column レイアウトと Row レイアウトは、ダイアログの構造コンポーネントを提供します。
  6. この例では、showDial を使用して選択ツールのモードを追跡します。
    • IconButton はモードを切り替え、それに応じてアイコンを更新します。
    • ダイアログのコンテンツは、以下に基づいて TimePicker と TimeInput を切り替えています。 showDial 状態を生成します。

この高度な実装により、高度にカスタマイズ可能で再利用可能な時刻が提供されます。 アプリのさまざまなユースケースに適応できる選択ツール ダイアログです。

これを実装すると次のようになります。

タイトル、モード切り替えボタン、閉じるボタン、確認ボタンを実装したカスタム ダイアログ内の時間選択ツール。
図 2. カスタム ダイアログ内の時間選択ツール

参考情報