دکمه کنش شناور

«دکمه کنش شناور» (FAB) دکمه‌ای با تأکید بالا است که به کاربر امکان می‌دهد کنش اصلی را در برنامه انجام دهد. این دکمه یک کنش واحد و متمرکز را ترویج می‌کند که رایج‌ترین مسیری است که کاربر ممکن است طی کند و معمولاً در پایین سمت راست صفحه ثابت شده است.

این سه مورد استفاده را که ممکن است در آن‌ها از FAB استفاده کنید درنظر بگیرید:

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

در «طراحی مواد»، چهار نوع دکمه کنش شناور وجود دارد:

  • دکمه کنش شناور: دکمه کنش شناور با اندازه معمولی.
  • دکمه کنش شناور کوچک: دکمه کنش شناور کوچک‌تر.
  • دکمه کنش شناور بزرگ: دکمه کنش شناور بزرگ‌تر.
  • دکمه کنش شناور گسترده: دکمه کنش شناوری که علاوه‌بر نماد، حاوی موارد دیگری نیز هست.
نمونه‌ای از هریک از چهار مؤلفه دکمه کنش شناور.
شکل ۱. چهار نوع دکمه کنش شناور.

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

اگرچه چندین ترکیب‌پذیر وجود دارد که می‌توانید برای ایجاد دکمه‌های کنش شناور مطابق با «طراحی مواد» استفاده کنید، پارامترهای آن‌ها تفاوت چندانی ندارند. ازجمله پارامترهای کلیدی که باید درنظر داشته باشید موارد زیر است:

  • onClick: تابعی که وقتی کاربر دکمه را فشار می‌دهد فراخوانده می‌شود.
  • containerColor: رنگ دکمه.
  • ‫contentColor: رنگ نماد.

دکمه کنش شناور

برای ایجاد دکمه کنش شناور عمومی، از ترکیب‌پذیر پایه FloatingActionButton استفاده کنید. مثال زیر پیاده‌سازی پایه دکمه کنش شناور را نشان می‌دهد:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Floating action button.")
    }
}

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

دکمه کنش شناور استاندارد با گوشه‌های گرد، سایه، و نماد «افزودن».
شکل ۲. دکمه کنش شناور.

دکمه کوچک

برای ایجاد دکمه کنش شناور کوچک، از ترکیب‌پذیر SmallFloatingActionButton استفاده کنید. مثال زیر نشان می‌دهد که چگونه این کار را انجام دهید، با افزودن رنگ‌های سفارشی.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Small floating action button.")
    }
}

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

پیاده‌سازی SmallFloatingActionButton که حاوی نماد «افزودن» است.
شکل ۳.‏ دکمه کنش شناور کوچک.

دکمه بزرگ

برای ایجاد دکمه کنش شناور بزرگ، از LargeFloatingActionButton composable استفاده کنید. این ترکیب‌پذیر تفاوت چندانی با نمونه‌های دیگر ندارد، به‌جز اینکه دکمه بزرگ‌تری ایجاد می‌کند.

در زیر پیاده‌سازی ساده‌ای از دکمه کنش شناور بزرگ ارائه شده است.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(painter = rememberVectorPainter(AppIcons.Add), "Large floating action button")
    }
}

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

پیاده‌سازی LargeFloatingActionButton که حاوی نماد «افزودن» است.
شکل ۴. دکمه کنش شناور بزرگ.

دکمه گسترش‌یافته

با ترکیب‌پذیر ExtendedFloatingActionButton می‌توانید دکمه‌های کنش شناور پیچیده‌تری ایجاد کنید. تفاوت کلیدی بین آن و FloatingActionButton این است که پارامترهای اختصاصی icon و text دارد. این دکمه‌ها به شما امکان می‌دهند دکمه‌ای با محتوای پیچیده‌تر ایجاد کنید که به‌طور مناسب با محتوایش مقیاس‌بندی می‌شود.

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

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(painter = rememberVectorPainter(AppIcons.Edit), "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

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

پیاده‌سازی ExtendedFloatingActionButton که نوشتار «دکمه گسترده» و نماد ویرایش را نمایش می‌دهد.
شکل ۵. دکمه کنش شناور با نوشتار و نماد.

منابع بیشتر