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

Saat seçicileri genellikle iletişim kutularında görünür. Nispeten genel ve geniş kapsamlı veya özel bir iletişim kutusuyla birlikte özel bir iletişim kutusu daha esnek olabiliyor.

Zaman seçicinin nasıl kullanılacağı da dahil olmak üzere genel 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şturun. 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 noktalara dikkat 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 çağrılan bir işlev ( kapatma düğmesine veya geri gitmeye dokunun).
   • onConfirm: Kullanıcı "Tamam" düğmesini tıkladığında çağrılan bir işlev düğmesini tıklayın.
   • content: İletişim kutusunda zaman 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 öğesini geçerli saati TimePicker ve onConfirm saatlerine geçirir işlevini kullanın.

Ş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 kutusu, özelleştirilebilir bir başlık ve geçiş yapmak için bir açma/kapatma düğmesi içerir giriş modları arasında geçiş yapın.
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, son derece özelleştirilebilir ve yeniden kullanılabilir bir zaman sağlar. uygulamanızdaki farklı kullanım alanlarına uyarlanabilen seçici iletişim kutusu.

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

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

Ek kaynaklar

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