Saat seçiciler

Saat seçicileri, kullanıcıların saat seçmesine olanak tanır. Uygulamanızda zaman seçici uygulamak için TimePicker ve TimeInput bileşenlerini 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

Zaman 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 aşağıdakileri 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ş 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 önemli 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ş saat seçici. Kullanıcı, metin alanlarını kullanarak bir saat girebilir.
Şekil 3. Giriş saat seçici.

Durumu kullanma

Kullanıcının bir zaman seçicide seçtiği zamanı kullanmak için uygun TimePickerState değerini onConfirm işlevinize iletin. Ana bileşim, 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

Daha sonra, 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