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

Saat seçiciler genellikle iletişim kutularında görünür. İletişim kutusunun nispeten genel ve minimal bir uygulamasını kullanabilir veya daha fazla esneklik sunan özel bir iletişim kutusu uygulayabilirsiniz.

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

Temel örnek

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

@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() }
    )
}

Bu snippet'teki önemli noktalara dikkat edin:

  1. DialWithDialogExample composable'ı, TimePicker'ı bir iletişim kutusuna sarmalar.
  2. TimePickerDialog, aşağıdaki parametrelerle AlertDialog oluşturan özel bir composable'dır:
    • onDismiss: Kullanıcı iletişim kutusunu kapattığında (kapat düğmesi veya geri düğmesi aracılığıyla) çağrılan bir işlev.
    • onConfirm: Kullanıcı "Tamam" düğmesini tıkladığında çağrılan bir işlev.
    • content: İletişim kutusunda saat seçiciyi gösteren bir composable.
  3. AlertDialog şunları içerir:
    • "Kapat" etiketli bir kapatma düğmesi.
    • "Tamam" etiketli bir onay düğmesi.
    • text parametresi olarak iletilen zaman seçici içeriği.
  4. DialWithDialogExample, TimePickerState değerini geçerli saatle başlatır ve hem TimePicker hem de onConfirm işlevine iletir.
AlertDialog'da başlık, mod açma/kapatma düğmesi, kapatma ve onaylama düğmeleri içeren bir zaman seçici.
Şekil 1. AlertDialog'da saat seçici

İleri düzey örnek

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

@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") }
                }
            }
        }
    }
}

Bu snippet'teki önemli noktalara dikkat edin:

  1. AdvancedTimePickerExample composable, özelleştirilebilir bir saat seçici iletişim kutusu oluşturur.
  2. AlertDialog yerine daha fazla esneklik için Dialog composable'ını kullanır.
  3. İletişim kutusunda özelleştirilebilir bir başlık ve çevirme 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 uygular. Genişlik ve yükseklik için IntrinsicSize.Min kullanılır.
  5. Column ve Row düzeni, iletişim kutusunun yapı bileşenlerini sağlar.
  6. Örnekte, seçici modu showDial kullanılarak izlenir.
    • IconButton, modlar arasında geçiş yaparak simgeyi buna göre günceller.
    • İletişim kutusu içeriği, showDial durumuna göre TimePicker ve TimeInput arasında geçiş yapar.

Bu gelişmiş uygulama, uygulamanızdaki farklı kullanım alanlarına uyum sağlayabilen, son derece özelleştirilebilir ve yeniden kullanılabilir bir saat seçici iletişim kutusu sağlar.

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

Başlık, mod açma/kapatma düğmesi, kapatma ve onaylama düğmeleri içeren özel bir iletişim kutusundaki zaman seçici.
Şekil 2. Özel bir iletişim kutusundaki saat seçici.

Ek kaynaklar