ایجاد یک دکمه اکشن شناور (FAB)

دکمه اکشن شناور (FAB) یک دکمه با تاکید زیاد است که به کاربر اجازه می دهد یک عمل اصلی را در یک برنامه انجام دهد. این یک اقدام متمرکز و منفرد را ترویج می کند که رایج ترین مسیری است که کاربر ممکن است طی کند و معمولاً در سمت راست پایین صفحه لنگر انداخته می شود.

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

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

در طراحی متریال، چهار نوع FAB وجود دارد:

  • FAB : یک دکمه اکشن شناور با اندازه معمولی.
  • Small FAB : یک دکمه اکشن شناور کوچکتر.
  • FAB بزرگ : یک دکمه اکشن شناور بزرگتر.
  • Extended FAB : یک دکمه اکشن شناور که شامل چیزی بیش از یک نماد نیست.

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

کاتلین 

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

شیار 

  implementation platform('androidx.compose:compose-bom:2025.01.01')

یک دکمه اکشن شناور اولیه ایجاد کنید

برای ایجاد یک دکمه اکشن شناور عمومی، از FloatingActionButton اصلی قابل ترکیب استفاده کنید: 

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

نتیجه

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

یک دکمه اکشن شناور کوچک ایجاد کنید

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

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

نتیجه

اجرای SmallFloatingActionButton که حاوی نماد «افزودن» است.
شکل 2. یک دکمه عمل شناور کوچک.

یک دکمه اکشن شناور بزرگ ایجاد کنید

برای ایجاد یک دکمه اکشن شناور بزرگ، از LargeFloatingActionButton composable استفاده کنید. این قابل ترکیب تفاوت قابل توجهی با نمونه های دیگر ندارد به غیر از این واقعیت که منجر به یک دکمه بزرگتر می شود.

در زیر پیاده سازی ساده یک FAB بزرگ است.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

نتیجه

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

یک دکمه اکشن شناور توسعه یافته ایجاد کنید

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

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

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

نتیجه

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

نکات کلیدی

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

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

z## مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

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

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید