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 composable'ları kullanabilirsiniz.

Türler

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

  • Kadran: Kullanıcıların kadran üzerinde bir kolu hareket ettirerek saati ayarlamalarına olanak tanır.
  • Giriş: Kullanıcıların klavyelerini kullanarak saat ayarlamalarına olanak tanır.

Aşağıdaki resimde, sol tarafta kadran saat seçici, sağ tarafta ise giriş saati seçici örneği verilmiştir:

Kadranın ve saat seçicinin girişi.
Şekil 1. Kadranın ve saat seçicinin girişi.

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 sayede, seçicide görünen varsayılan seçili zamanı ayarlayabilirsiniz. Ayrıca, kullanıcının seçiciyi kullanarak seçtiği zamanı da yakalar.

Dialog

Saat seçicileri iletişim kutularında görünür. Bu kılavuzda verilen örneklerde iletişim kutuları kullanılmamıştır. İletişim kutusu kullanan örnekler için Zaman seçicileri için iletişim kutuları kılavuzuna bakın.

Kadranda saat seçici

Bu snippet'te, temel bir kadran saat seçicinin nasıl uygulanacağı gösterilmektedir.

@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 şunları göz önünde bulundurun:

  • Calendar.getInstance(), TimePickerState öğesini geçerli saatle başlatır.
  • TimePicker composable, timePickerState parametresini alarak zaman seçiciyi gösterir.
  • Uygulamada iki düğme bulunur: biri seçimi onaylamak, diğeri seçiciyi kapatmak için.

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

Kadranlı saat seçici. Kullanıcı, kadranı kullanarak bir saat seçebilir.
Şekil 2. Kadranlı saat seçici.

Giriş saati 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 saat 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 ayarlanmıştır. Varsayılan olarak bu değer false'tür.

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.

Eyaleti kullan

Kullanıcının bir zaman seçicide seçtiği zamanı kullanmak için uygun TimePickerState değerini onConfirm işlevinize iletin. Ebeveyn bileşimi, TimePickerState.hour ve TimePickerState.minute aracılığıyla seçilen zamana erişebilir.

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, composable'ı ş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