時刻選択ツールは、ダイアログによく表示されます。比較的汎用性の高い最小限のダイアログの実装を使用するか、より柔軟なカスタム ダイアログを実装できます。
時刻選択ツールの状態の使用方法など、ダイアログ全般の詳細については、時刻選択ツールのガイドをご覧ください。
基本的な例
時刻選択ツールのダイアログを作成する最も簡単な方法は、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コンポーザブルは、カスタマイズ可能な時刻選択ツールのダイアログを作成します。Dialogコンポーザブルを使用するため、AlertDialogよりも柔軟性があります。- ダイアログには、カスタマイズ可能なタイトルと、ダイヤルモードと入力モードを切り替える切り替えボタンがあります。
Surfaceは、幅と高さの両方にIntrinsicSize.Minを指定して、ダイアログに形状とエレベーションを適用します。ColumnレイアウトとRowレイアウトは、ダイアログの構造コンポーネントを提供します。- この例では、
showDialを使用して選択ツールのモードを追跡します。IconButtonはモードを切り替え、それに応じてアイコンを更新します。- ダイアログ コンテンツは、
showDialの状態に基づいてTimePickerとTimeInputを切り替えます。
この高度な実装では、アプリのさまざまなユースケースに適応できる、高度にカスタマイズ可能で再利用可能な時間選択ツールのダイアログが提供されます。
これを実装すると次のようになります。
