دکمه های آیکون

دکمه های نماد اقداماتی را که کاربران می توانند انجام دهند را نمایش می دهند. دکمه‌های نماد باید از نمادی با معنای واضح استفاده کنند و معمولاً اقدامات رایج یا پرکاربرد را نشان می‌دهند.

دو نوع دکمه آیکون وجود دارد:

• پیش‌فرض : این دکمه‌ها می‌توانند عناصر دیگری مانند منو یا جستجو را باز کنند.
• Toggle : این دکمه‌ها می‌توانند عملکردهای باینری را نشان دهند که می‌توان آنها را روشن یا خاموش کرد، مانند "مورد علاقه" یا "نشانک".

سطح API

از IconButton composable برای پیاده سازی دکمه های آیکون استاندارد استفاده کنید. برای ایجاد سبک های بصری مختلف مانند تونال پر شده، پر شده، یا طرح شده، به ترتیب FilledIconButton ، FilledTonalIconButton و OutlinedIconButton استفاده کنید.

پارامترهای کلیدی برای IconButton عبارتند از:

• onClick : یک تابع لامبدا که با ضربه زدن کاربر روی دکمه نماد اجرا می شود.
• enabled : یک بولی که وضعیت فعال بودن دکمه را کنترل می کند. وقتی false ، دکمه به ورودی کاربر پاسخ نمی دهد.
• content : محتوای قابل ترکیب در داخل دکمه، معمولاً یک Icon .

مثال اصلی: دکمه نماد را تغییر دهید

این مثال به شما نشان می دهد که چگونه یک دکمه آیکون جابجایی را پیاده سازی کنید. یک دکمه نماد تغییر ظاهر خود را بر اساس انتخاب یا عدم انتخاب تغییر می دهد.

@Preview
@Composable
fun ToggleIconButtonExample() {
    // isToggled initial value should be read from a view model or persistent storage.
    var isToggled by rememberSaveable { mutableStateOf(false) }

    IconButton(
        onClick = { isToggled = !isToggled }
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite),
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
        )
    }
}
IconButton.kt

نکات کلیدی در مورد کد

• قابلیت ترکیب ToggleIconButtonExample یک IconButton قابل تغییر را تعریف می کند.
  • mutableStateOf(false) یک شیء MutableState ایجاد می کند که دارای مقدار بولی، در ابتدا false . این باعث می‌شود که isToggled یک حالت نگهدارنده باشد، به این معنی که Compose هر زمان که مقدار آن تغییر کند، UI را دوباره ترکیب می‌کند.
  • rememberSaveable تضمین می‌کند که وضعیت isToggled در تمام تغییرات پیکربندی، مانند چرخش صفحه، باقی می‌ماند.
• لامبدا onClick IconButton رفتار دکمه را هنگام کلیک کردن مشخص می کند و حالت را بین true و false تغییر می دهد.
• پارامتر painter Icon composable به صورت مشروط یک painterResource متفاوت را بر اساس وضعیت isToggled بارگیری می کند. این ظاهر بصری آیکون را تغییر می دهد.
  • اگر isToggled true باشد، قلب پر شده را بارگذاری می کند.
  • اگر isToggled false باشد، قلب ترسیم شده را بارگیری می کند.
• contentDescription Icon همچنین بر اساس وضعیت isToggled به‌روزرسانی می‌شود تا اطلاعات دسترسی مناسب را ارائه دهد.

نتیجه

تصویر زیر دکمه نماد تغییر را از قطعه قبلی در حالت انتخاب نشده نشان می دهد:

مثال پیشرفته: اقدامات تکراری در مطبوعات

این بخش نحوه ایجاد دکمه‌های آیکونی را نشان می‌دهد که به طور مداوم یک عمل را در حالی که کاربر فشار می‌دهد و نگه می‌دارد، فعال می‌کند، نه اینکه فقط یک بار در هر کلیک فعال شود.

@Composable
fun MomentaryIconButton(
    unselectedImage: Int,
    selectedImage: Int,
    contentDescription: String,
    modifier: Modifier = Modifier,
    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val pressedListener by rememberUpdatedState(onClick)

    LaunchedEffect(isPressed) {
        while (isPressed) {
            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
            pressedListener()
        }
    }

    IconButton(
        modifier = modifier,
        onClick = onClick,
        interactionSource = interactionSource
    ) {
        Icon(
            painter = if (isPressed) painterResource(id = selectedImage) else painterResource(id = unselectedImage),
            contentDescription = contentDescription,
        )
    }
}
IconButton.kt

نکات کلیدی در مورد کد

• MomentaryIconButton یک unselectedImage: Int ، شناسه منبع قابل ترسیم برای نماد زمانی که دکمه فشار داده نشده است، و selectedImage: Int ، شناسه منبع قابل ترسیم برای نماد هنگام فشار دادن دکمه.
• از یک interactionSource برای ردیابی خاص تعاملات "پرس" از کاربر استفاده می کند.
• هنگامی که دکمه به طور فعال فشار داده می شود isPressed درست است و در غیر این صورت false است. وقتی isPressed true باشد، LaunchedEffect وارد یک حلقه می شود.
  • در داخل این حلقه، از یک delay (با stepDelay ) برای ایجاد مکث بین اقدامات راه‌اندازی استفاده می‌کند. coerceIn تضمین می کند که تاخیر حداقل 1 میلی ثانیه است تا از حلقه های بی نهایت جلوگیری شود.
  • pressedListener پس از هر تأخیر در حلقه فراخوانی می شود. این باعث تکرار عمل می شود.
• pressedListener از rememberUpdatedState استفاده می کند تا اطمینان حاصل کند که onClick lambda (عملی که باید انجام شود) همیشه به روزترین از آخرین ترکیب بندی است.
• Icon تصویر نمایش داده شده خود را بر اساس اینکه آیا دکمه در حال حاضر فشار داده شده است یا خیر، تغییر می دهد.
  • اگر isPressed درست باشد، تصویر selectedImage نشان داده می شود.
  • در غیر این صورت، تصویر unselectedImage نشان داده می شود.

بعد، از این MomentaryIconButton در یک مثال استفاده کنید. قطعه زیر دو دکمه نماد را نشان می دهد که یک شمارنده را کنترل می کنند:

@Preview()
@Composable
fun MomentaryIconButtonExample() {
    var pressedCount by remember { mutableIntStateOf(0) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_rewind,
            selectedImage = R.drawable.fast_rewind_filled,
            stepDelay = 100L,
            onClick = { pressedCount -= 1 },
            contentDescription = "Decrease count button"
        )
        Spacer(modifier = Modifier)
        Text("advanced by $pressedCount frames")
        Spacer(modifier = Modifier)
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_forward,
            selectedImage = R.drawable.fast_forward_filled,
            contentDescription = "Increase count button",
            stepDelay = 100L,
            onClick = { pressedCount += 1 }
        )
    }
}
IconButton.kt

نکات کلیدی در مورد کد

• ترکیب‌پذیر MomentaryIconButtonExample یک Row حاوی دو نمونه MomentaryIconButton و یک Text قابل نوشتن برای ایجاد یک رابط کاربری برای افزایش و کاهش شمارنده نمایش می‌دهد.
• یک متغیر حالت قابل تغییر pressedCount با استفاده از remember و mutableIntStateOf نگه می دارد که به 0 مقداردهی اولیه شده است. هنگامی که pressedCount تغییر می کند، هر composable که آن را مشاهده می کند (مانند Text composable) دوباره ترکیب می شود تا مقدار جدید را منعکس کند.
• اولین MomentaryIconButton با کلیک یا نگه داشتن، pressedCount کاهش می دهد.
• دومین MomentaryIconButton با کلیک یا نگه داشتن، pressedCount افزایش می دهد.
• هر دو دکمه از یک stepDelay 100 میلی ثانیه استفاده می کنند، به این معنی که عمل onClick هر 100 میلی ثانیه تکرار می شود در حالی که یک دکمه نگه داشته می شود.

نتیجه

ویدئوی زیر رابط کاربری را با دکمه‌های آیکون و شمارنده نشان می‌دهد:

منابع اضافی

• مواد 3 - دکمه های نماد