Saat seçiciler

Saat seçiciler, kullanıcılara saat seçmeleri için bir yöntem sunar. Şunları yapabilirsiniz: zaman uygulamak için TimePicker ve TimeInput composable'ları kullanma seçici ile birlikte kontrol edin.

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 bir saat ayarlamasına olanak tanır.

Aşağıdaki resimde, soldaki 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 ve giriş saati seçicisi.

API yüzeyi

Bir zaman seçiciyi uygulamak için TimePicker veya TimeInput kullanın composable:

Eyalet

Hem TimePicker hem de TimeInput için şu değerlendirmeyi de geçmeniz gerekir: TimePickerState. 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.

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

  • Calendar.getInstance(), TimePickerState öğesini geçerli gerekir.
  • 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ş saati seçici

Bu snippet, temel giriş stili saat seçicinin nasıl uygulanacağını gösterir.

@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ı temelde çevirme zamanı seçiciyle aynıdır. Asıl TimePicker yerine TimeInput kullanımı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.

Eyaleti kullan

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, 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 ayrıntı için Snippet'lerdeki tam uygulamaya bakın uygulamasında gösterilir.

Ek kaynaklar