Saat seçiciler

Saat seçiciler, kullanıcılara saat seçmeleri için bir yöntem sunar. Uygulamanızda zaman seçici uygulamak için TimePicker ve TimeInput bileşenlerini kullanabilirsiniz.

Türler

İki tür zaman seçici vardır:

  • Numara çevirme: Kullanıcıların, tutma yerini kadranın etrafında hareket ettirerek saat ayarlamasına olanak tanır.
  • Giriş: Kullanıcıların klavyelerini kullanarak saat ayarlamalarına olanak tanır.

Aşağıdaki resimde, sol taraftaki arama zamanı seçici için bir örnek verilmiştir. Sağda bir giriş saati seçici göreceksiniz:

Bir kadranı ve bir giriş saati seçicisi.
Şekil 1. Kadranın ve giriş saat seçicisinin görüntüsü.

API yüzeyi

Zaman seçici uygulamak için TimePicker veya TimeInput bileşenini kullanın:

Eyalet

Hem TimePicker hem de TimeInput için bir TimePickerState da göndermeniz gerekir. Bu, gösterilecek varsayılan seçili saati ayarlamanıza olanak tanır tıklayın. Ayrıca kullanıcının kullanabilirsiniz.

Dialog

İletişim kutularında saat seçiciler görünür. Bu kılavuzdaki örneklerde iletişim kutusu kullanılmaz. İletişim kutularının kullanıldığı örnekler için Zaman seçiciler için iletişim kutuları kılavuzuna bakın.

Kadranda saat seçici

Bu snippet, temel bir arama zamanı seçicinin nasıl uygulanacağını gösterir.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Bu snippet'te aşağıdakileri göz önünde bulundurun:

  • Calendar.getInstance(), TimePickerState öğesini mevcut saatle başlatır.
  • TimePicker composable, zaman seçiciyi gösterir ve parametre olarak timePickerState.
  • Uygulamada biri seçimi onaylamak için, diğeri ise seçimi onaylamak için başka bir tane de ayarlayabilirsiniz.

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

Çevirme zamanı seçici. Kullanıcı kadranı kullanarak bir saat seçebilir.
Şekil 2. Çevirme zamanı seçici.

Giriş saat seçici

Bu snippet'te, temel giriş stili zaman seçicinin nasıl uygulanacağı gösterilmektedir.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Bu uygulamada dikkat edilmesi gereken temel noktalar:

  • Yapısı, kadran zaman seçiciyle aynıdır. Aradaki temel fark, TimePicker yerine TimeInput kullanılmasıdır.
  • timePickerState için is24Hour parametresi açıkça true olarak ayarlandı. Bu değer varsayılan olarak false şeklindedir.

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

Giriş saati seçici. Kullanıcı, metin alanlarını kullanarak bir saat girebilir.
Şekil 3. Giriş saati seçici.

Durumu kullanma

Kullanıcının zaman seçicide seçtiği zamandan yararlanmak için onConfirm fonksiyonunuza uygun TimePickerState. Üst öğe composable, daha sonra TimePickerState.hour üzerinden seçilen zamana erişebilir ve TimePickerState.minute.

Aşağıdaki snippet'te bunun nasıl yapılacağı gösterilmektedir:

@Composable
fun DialUseStateExample(
    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,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Ardından, bileşeni şu şekilde çağırabilirsiniz:

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

Daha fazla bilgi için snippet uygulamasındaki tam uygulamaya bakın.

Ek kaynaklar