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 minimum düzeyde bir uygulamasını 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 işlevini uygulayan bir composable oluşturmaktır. Aşağıdaki snippet'te bu yaklaşımı kullanan 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 composable'ı, TimePicker öğesini bir iletişim kutusuna sarar.
  2. TimePickerDialog, aşağıdaki parametrelerle AlertDialog oluşturan özel bir composable'dır:
    • onDismiss: Kullanıcı iletişim kutusunu kapatma düğmesi veya geri gitme yoluyla kapattığında çağrılan bir işlev.
    • onConfirm: Kullanıcı "Tamam" düğmesini tıkladığında çağrılan bir işlev.
    • content: Saat seçiciyi iletişim kutusunda 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 saatle başlatır ve hem TimePicker hem de onConfirm işlevine iletir.
Bir başlık, mod geçişi, kapatma ve onaylama düğmeleri uygulayan bir AlertDialog'da zaman seçici.
1. Şekil. 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ş 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") }
                }
            }
        }
    }
}
TimePickers.kt

Bu snippet'teki önemli noktalara dikkat edin:

  1. AdvancedTimePickerExample composable'ı, özelleştirilebilir bir zaman seçici iletişim kutusu oluşturur.
  2. AlertDialog'den daha fazla esneklik için Dialog composable'ı 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, genişlik ve yükseklik için IntrinsicSize.Min ile birlikte iletişim kutusuna şekil ve yükseklik uygular.
  5. Column ve Row düzeni, iletişim kutusunun yapı bileşenlerini sağlar.
  6. Örnekte, seçici modu showDial kullanılarak izlenir.
    • IconButton simgesi, modlar arasında geçiş yaparak simgeyi buna göre günceller.
    • İletişim kutusu içeriği, showDial durumuna bağlı olarak TimePicker ile 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 sunar.

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

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

Ek kaynaklar