多くの場合、時刻選択ツールがダイアログに表示されます。比較的汎用的で、 ダイアログを最小限の実装で実装することも、カスタム ダイアログを 柔軟性が高まります
時間選択ツールの使用方法など、ダイアログ全般に関する詳細情報 時刻選択ツールのガイドをご覧ください。
基本的な例
時間選択ツールのダイアログを作成する最も簡単な方法は、
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() }
)
}
このスニペットの要点に留意してください。
DialWithDialogExampleコンポーザブルは、ダイアログ内のTimePickerをラップします。TimePickerDialogは、AlertDialogを作成するカスタム コンポーザブルです。 次のパラメータを指定します。onDismiss: ユーザーがダイアログを閉じると呼び出される関数（ 閉じるボタンや戻るボタンなどのボタンです。onConfirm: ユーザーが「OK」をクリックしたときに呼び出される関数] ボタンを離します。content: ダイアログ内に時間選択ツールを表示するコンポーザブル。
AlertDialogには以下が含まれます。- 「閉じる」というラベルの閉じるボタン。
- [OK] と表示された確認ボタン。
textパラメータとして渡される時間選択ツールのコンテンツ。
DialWithDialogExampleは、TimePickerStateを 現在の時刻をTimePickerとonConfirmの両方に渡します。 使用します。
高度な例
このスニペットは、カスタマイズ可能な時刻の高度な実装を示しています。 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") }
}
}
}
}
}
このスニペットの要点に留意してください。
AdvancedTimePickerExampleコンポーザブルはカスタマイズ可能な時刻を作成する 選択ダイアログ。AlertDialogよりも柔軟性を高めるために、Dialogコンポーザブルを使用しています。- ダイアログには、カスタマイズ可能なタイトルと切り替えボタンがあります ダイヤルモードと入力モードの切り替えができます。
Surfaceは、ダイアログにシェイプと高度を適用します。 幅と高さはどちらもIntrinsicSize.Minです。ColumnレイアウトとRowレイアウトは、ダイアログの構造コンポーネントを提供します。- この例では、
showDialを使用して選択ツールモードをトラッキングしています。IconButtonはモードを切り替えて、それに応じてアイコンを更新します。- ダイアログのコンテンツは、以下に基づいて
TimePickerとTimeInputを切り替えています。showDial状態を生成します。
この高度な実装により、高度にカスタマイズ可能で再利用可能な時刻が提供されます。 アプリのさまざまなユースケースに適応できる選択ツール ダイアログです。
これを実装すると次のようになります。
