Saat seçiciler

Zaman seçiciler, kullanıcıların zaman 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 zaman seçici vardır:

  • Çevirme: Kullanıcıların bir kolu çevirerek zaman ayarlamasına olanak tanır.
  • Giriş: Kullanıcıların klavyelerini kullanarak saat ayarlamasına olanak tanır.

Aşağıdaki resimde, solda çevirmeli zaman seçici, sağda ise giriş zaman seçici örneği verilmiştir:

Bir çevirme düğmesi ve giriş zamanı seçici.
Şekil 1. Bir çevirme düğmesi ve giriş zamanı seçici.

API yüzeyi

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

  • TimePicker: Çevirmeli saat seçici uygular.
  • TimeInput: Giriş için bir zaman seçici uygular.

Eyalet

Hem TimePicker hem de TimeInput için TimePickerState değerini de iletmeniz gerekir. Bu ayar, seçicinin üzerinde görünen varsayılan seçili zamanı ayarlamanıza olanak tanır. 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ın kullanıldığı örnekler için Zaman seçiciler için iletişim kutuları kılavuzuna bakın.

Çevirmeli saat seçici

Bu snippet'te, temel bir arama süresi 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")
        }
    }
}

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. Alternatif olarak tüm Android sürümlerinde java.time.LocalTime kullanmak için projenizde Java 8+ API desugaring'i etkinleştirin.
  • TimePicker composable'ı, parametre olarak timePickerState değerini alarak saat seçiciyi gösterir.
  • Uygulamada iki düğme bulunur: biri seçimi onaylamak, diğeri ise seçiciyi kapatmak için.

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

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

Saat seçici girişi

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ı, esasen kadranlı zaman seçiciyle aynıdır. Aralarındaki 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'dır.

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

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

Durumu kullanma

Kullanıcının bir zaman seçicide seçtiği zamandan yararlanmak için uygun TimePickerState değerini onConfirm işlevinize iletin. Üst composable, TimePickerState.hour ve TimePickerState.minute aracılığıyla seçilen zamana erişebilir.

Aşağıdaki snippet'te bu işlemin 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")
        }
    }
}

Daha sonra 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'ler uygulamasındaki tam uygulamaya bakın.

Ek kaynaklar