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

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

انواع

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

• صفحه مدرج: به کاربران اجازه می‌دهد با حرکت دادن دستگیره در اطراف صفحه مدرج، زمان را تنظیم کنند.
• ورودی: به کاربران اجازه می‌دهد بااستفاده از صفحه‌کلید، زمان را تنظیم کنند.

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

سطح میانای برنامه‌سازی کاربردی

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

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

ایالت

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

کادر گفتگو

انتخاب‌گرهای زمان در کادرهای گفتگو نشان داده می‌شوند. نمونه‌های این راهنما از کادرهای گفتگو استفاده نمی‌کنند. برای نمونه‌هایی که از کادرهای گفتگو استفاده می‌کنند، راهنمای کادرهای گفتگو برای انتخابگرهای زمان را ببینید.

انتخاب‌گر ساعت شماره‌گیری

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

@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 نسخه ۸ و بالاتر را در پروژه‌تان فعال کنید تا بتوانید از 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 خود ارسال کنید. سپس، composable والد می‌تواند ازطریق 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

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

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

برای جزئیات بیشتر، پیاده‌سازی کامل را در برنامه قطعه‌ها ببینید.

منابع بیشتر

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