Zaman seçiciler için iletişim kutuları

Saat seçiciler genellikle iletişim kutularında görünür. Göreceli olarak genel ve minimum bir iletişim kutusu uygulaması kullanabilir veya daha fazla esneklik sunan özel bir iletişim kutusu uygulayabilirsiniz.

Zaman seçici durumunun nasıl kullanılacağı da dahil olmak üzere, genel olarak iletişim kutuları hakkında daha fazla bilgi için Zaman seçiciler kılavuzuna bakın.

Temel örnek

Zaman seçiciniz için iletişim kutusu oluşturmanın en basit yolu AlertDialog uygulayan bir composable oluşturmaktır. Aşağıdaki snippet'te, bu yaklaşımın kullanıldığı nispeten minimal bir iletişim kutusu örneği verilmiştir:

@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

Bu snippet'teki önemli noktaları not edin:

1. DialWithDialogExample bileşeni, TimePicker öğesini bir iletişim kutusuna sarar.
2. TimePickerDialog, aşağıdaki parametrelerle bir AlertDialog oluşturan özel bir derleyicidir:
   • onDismiss: Kullanıcı iletişim kutusunu kapattığında (kapatma düğmesi veya geri düğmesi aracılığıyla) çağrılan bir işlevdir.
   • onConfirm: Kullanıcı "Tamam" düğmesini tıkladığında çağrılan bir işlevdir.
   • content: İletişim kutusunda saat seçiciyi gösteren bir kompozisyon.
3. AlertDialog şunları içerir:
   • "Kapat" etiketli bir kapat düğmesi.
   • "Tamam" etiketli bir onay düğmesi.
   • text parametresi olarak iletilen zaman seçici içeriği.
4. DialWithDialogExample, TimePickerState işlevini geçerli saatle başlatır ve hem TimePicker hem de onConfirm işlevine iletir.

Şekil 1. AlertDialog'da bir zaman seçici.

Gelişmiş Örnek

Bu snippet'te, Jetpack Compose'da özelleştirilebilir bir zaman seçici iletişim kutusunun gelişmiş bir uygulaması gösterilmektedir.

@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

Bu snippet'teki önemli noktalara dikkat edin:

1. AdvancedTimePickerExample bileşeni, özelleştirilebilir bir zaman seçici iletişim kutusu oluşturur.
2. AlertDialog'a kıyasla daha fazla esneklik için Dialog bileşeni kullanır.
3. İletişim kutusunda özelleştirilebilir bir başlık ve kadran ile giriş modları arasında geçiş yapmak için bir açma/kapatma düğmesi bulunur.
4. Surface, iletişim kutusuna şekil ve yükseklik uygularken (hem genişlik hem de yükseklik için IntrinsicSize.Min) uygular.
5. Column ve Row düzeni, iletişim kutusunun yapı bileşenlerini sağlar.
6. Örnekte, showDial kullanılarak seçici modu izlenmektedir.
   • IconButton, modlar arasında geçiş yapar ve simgeyi buna göre günceller.
   • İletişim içeriği, showDial durumuna bağlı olarak TimePicker ve TimeInput arasında geçiş yapar.

Bu gelişmiş uygulama, uygulamanızdaki farklı kullanım alanlarına uyarlanabilen, son derece özelleştirilebilir ve yeniden kullanılabilir bir zaman seçici iletişim kutusu sunar.

Bu uygulama aşağıdaki gibi görünür:

Şekil 2. Özel bir iletişim kutusunda saat seçici.

Ek kaynaklar

• Saat seçicileri rehberi
• Materyal Tasarım - Zaman Seçiciler