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

Saat seçicileri 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.

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çici kılavuzu başlıklı makaleyi inceleyin.

Temel örnek

Zaman seçiciniz için iletişim kutusu oluşturmanın en kolay yolu, AlertDialog'yi uygulayan bir kompozisyon 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.
Bir AlertDialog'da başlık, mod açma/kapatma düğmesi ve kapatma ve onay düğmeleri uygulayan bir zaman seçici.
Şekil 1. AlertDialog'da bir saat 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 noktaları not 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, hem genişlik hem de yükseklik için IntrinsicSize.Min ile iletişim kutusuna şekil ve yükseklik 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 uyum sağlayabilen, son derece özelleştirilebilir ve yeniden kullanılabilir bir zaman 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 ve kapatma ve onay düğmeleri içeren özel bir iletişim kutusunda zaman seçici.
Şekil 2. Özel bir iletişim kutusunda saat seçici.

Ek kaynaklar