Saat seçiciler

Saat seçiciler, kullanıcıların saat seçmesine olanak tanır. Uygulamanızda zaman seçici uygulamak için TimePicker ve TimeInput composable'larını kullanabilirsiniz.

Türler

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

  • Kadran: Kullanıcıların bir kadranın etrafındaki tutma yerini hareket ettirerek zaman ayarlamasına olanak tanır.
  • Giriş: Kullanıcıların klavyelerini kullanarak saat ayarlamasına olanak tanır.

Aşağıdaki resimde, solda kadranlı saat seçici, sağda ise giriş saat seçici örneği gösterilmektedir:

Kadran ve giriş zaman seçici.
Şekil 1. Kadran ve giriş saati seçici.

API yüzeyi

Saat seçici uygulamak için TimePicker veya TimeInput composable'ını kullanın:

Eyalet

Hem TimePicker hem de TimeInput için bir TimePickerState da iletmeniz gerekir. Bu sayede, seçicide gösterilen varsayılan seçili zamanı ayarlayabilirsiniz. Ayrıca, kullanıcının seçiciyi kullanarak seçtiği zamanı da yakalar.

İletişim kutusu

Saat seçiciler iletişim kutularında görünür. Bu kılavuzdaki örneklerde iletişim kutuları kullanılmamaktadır. İletişim kutularını kullanan örnekler için Zaman seçiciler için iletişim kutuları kılavuzuna bakın.

Kadranlı saat seçici

Bu snippet, temel bir kadranlı saat 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")
        }
    }
}

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

  • Calendar.getInstance(), TimePickerState değerini geçerli saatle başlatır.
    • Bu örnekte java.util.Calendar kullanılmıştır. Tüm Android sürümlerinde java.time.LocalTime kullanmak için projenizde Java 8+ API desugaring özelliğini etkinleştirin.
  • TimePicker composable'ı, timePickerState parametresini alarak saat seçiciyi gösterir.
  • Uygulamada iki düğme bulunur: biri seçimi onaylamak, diğeri ise seçiciyi kapatmak için kullanılır.

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ş zamanı seçici

Bu snippet, temel giriş stili zaman 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")
        }
    }
}

Bu uygulamada dikkat edilmesi gereken önemli noktalar:

  • Yapı, kadranlı saat seçiciyle temelde aynıdır. Temel fark, TimePicker yerine TimeInput kullanılmasıdır.
  • timePickerState için is24Hour parametresi açıkça true olarak ayarlanmış. Varsayılan olarak bu değer false şeklindedir.

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

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

Durumu kullanma

Kullanıcının zaman seçicide belirlediği zamanı kullanmak için uygun TimePickerState değerini onConfirm işlevinize iletin. Üst composable, seçilen saate TimePickerState.hour ve TimePickerState.minute üzerinden 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")
        }
    }
}

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 kod snippet'leri uygulamasındaki tam uygulamayı inceleyin.

Ek kaynaklar