انتخاب کنندگان زمان

انتخابگر زمان راهی را برای کاربران فراهم می کند تا زمان را انتخاب کنند. می‌توانید از ترکیب‌بندی‌های TimePicker و TimeInput برای پیاده‌سازی یک انتخابگر زمان در برنامه خود استفاده کنید.

انواع

دو نوع انتخابگر زمان وجود دارد:

• شماره گیری : به کاربران این امکان را می دهد که با حرکت دادن دسته به دور یک شماره گیری زمان را تعیین کنند.
• ورودی : به کاربران اجازه می دهد با استفاده از صفحه کلید خود زمان تعیین کنند.

تصویر زیر نمونه ای از انتخابگر زمان شماره گیری در سمت چپ و انتخابگر زمان ورودی در سمت راست را نشان می دهد:

سطح API

برای پیاده سازی زمان انتخابگر، از TimePicker یا TimeInput composable استفاده کنید:

• TimePicker : انتخابگر زمان شماره گیری را پیاده سازی می کند.
• TimeInput : انتخابگر زمان ورودی را پیاده سازی می کند.

ایالت

هم برای TimePicker و هم برای TimeInput ، باید TimePickerState را نیز پاس کنید. این به شما امکان می دهد زمان انتخابی پیش فرض را که در انتخابگر ظاهر می شود تنظیم کنید. همچنین زمانی را که کاربر با استفاده از انتخابگر انتخاب کرده است ثبت می کند.

گفتگو

انتخابگرهای زمان در دیالوگ ها ظاهر می شوند. مثال‌های این راهنما از دیالوگ استفاده نمی‌کنند. برای مثال هایی که از دیالوگ ها استفاده می کنند، به راهنمای Dialogs for time pickers مراجعه کنید.

انتخابگر زمان شماره گیری

این قطعه نشان می دهد که چگونه می توان یک جمع کننده اولیه زمان شماره گیری را پیاده سازی کرد.

@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

در این قطعه به موارد زیر توجه کنید:

• Calendar.getInstance() TimePickerState را با زمان فعلی مقداردهی می کند.
  • این مثال از java.util.Calendar استفاده می کند. Java 8+ API desugaring را در پروژه خود فعال کنید تا از java.time.LocalTime در همه نسخه‌های Android استفاده کنید.
• TimePicker composable انتخابگر زمان را نمایش می دهد و timePickerState را به عنوان پارامتر در نظر می گیرد.
• پیاده سازی شامل دو دکمه است: یکی برای تأیید انتخاب و دیگری برای رد کردن انتخاب کننده.

این پیاده سازی به صورت زیر ظاهر می شود:

انتخابگر زمان ورودی

این قطعه نحوه پیاده‌سازی یک انتخابگر زمان سبک ورودی اولیه را نشان می‌دهد.

@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

نکات کلیدی که در این اجرا باید مورد توجه قرار گیرد:

• ساختار اساساً همان انتخابگر زمان شماره گیری است، با تفاوت اصلی استفاده از TimeInput به جای TimePicker .
• پارامتر is24Hour برای timePickerState به صراحت روی true تنظیم شده است. به طور پیش فرض، این مقدار false است.

این پیاده سازی به صورت زیر ظاهر می شود:

از ایالت استفاده کنید

برای استفاده از زمانی که کاربر در انتخابگر زمان انتخاب کرده است، TimePickerState مناسب را به تابع onConfirm خود منتقل کنید. سپس می‌تواند از طریق TimePickerState.hour و TimePickerState.minute به زمان انتخاب‌شده دسترسی داشته باشد.

قطعه زیر نحوه انجام این کار را نشان می دهد:

@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

سپس می توانید composable را به این صورت فراخوانی کنید:

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.")
}

برای جزئیات بیشتر، اجرای کامل را در برنامه snippets ببینید.

منابع اضافی

• TimePicker
• طراحی متریال - انتخاب کنندگان زمان