کار با FloatingButton متریال

تعریف FloatingButton

یک FloatingButton که عمل اصلی یا رایج ترین را روی صفحه اصلی انجام می دهد. روی تمام محتوای صفحه ظاهر می شود ، به طور معمول به صورت دایره ای شکل و یک نماد در مرکز آن است. FloatingButton ها به سه نوع معمولی ، مینی و طولانی ارائه می شوند.

تشریح:

FAB معمولاً در یک شکل دایره ای نمایش داده می شود. طرح رنگی یک برنامه پر بودن رنگ آن را تعیین می کند ، که باید با ناحیه پشت … FAB معمولاً در یک شکل دایره ای نمایش داده می شود.، که باید با منطقه پشت FAB در تضاد باشد.

برای متریال بودن برنامه FAB رو در دو سایز می توان تولید کرد :

۱. Default (56 x 56dp)
۲. Mini (40 x 40dp)

در صفحه های کوچکتر باید از mini FAB استفاده شود. وقتی عرض صفحه ۴۶۰dp یا کمتر باشد ، شکل FAB پیش فرض (۵۶dp) باید به اندازه کوچک (۴۰dp) تبدیل شود.

Mini FABs  برای ایجاد تداوم بصری با عناصر صفحه نمایش دیگر استفاده شود.

 

این mini FAB با داشتن اندازه ، شکل و قرارگیری مربوط به آیکون های پوشه زیر خود ، پیوستگی بصری ایجاد می کند.

شکل FAB رنگی از پالت برنامه به خود اختصاص می دهند.

سایر عناصر را روی FAB لایه بندی نکنید.

 

 

 

 

 

 

 

 

 

 

 

 

آیکون

FAB کاربرد آن باید به وضوح مشخص باشد . FAB نباید حاوی کار ها یا اقداماتی باشد که در جای دیگر یا مکان دیگری از صفحه نمایش یافته می شود.

 

تعیین سطح

FAB ها می توانند به نوارهای بالای برنامه و لبه برخی از اجزا متصل شوند مانند :

 

یک FloatingButton را می توان به لبه یک جز متصل کرد.

و برای بهتر شدن و زیباتر شدن برنامه بهتر است که FAB  رو در اجزای جداگانه ، مانند cards،نداشته باشند.

 

اقدامات

یک دکمه عملکرد شناور (FAB) می تواند عملیاتی را روی صفحه فعلی تحریک کند یا می تواند عملی را ایجاد کند که صفحه جدیدی ایجاد می کند.

FAB یک اقدام مهم و سازنده مانند:

  • ایجاد کردن
  • علاقه مندیها
  • اشتراک گذاری
  • شروع یک فرآیند

از استفاده از FAB برای اقدامات جزئی یا مخرب مانند موارد زیر خودداری کنید:

  • بایگانی یا حذف شده ها
  • هشدارها یا خطاها
  • کارهای محدود مانند برش متن
  • کنترل هایی که برای نوار ابزار مناسب ترند (مانند کنترل ها برای تنظیم میزان صدا یا رنگ قلم)

تصویر زیر FAB های مورد تایید برای ایجاد یک برنامه متریال می باشد :

 

بهتر است از FAB برای اقدامات جزئی ، سرریز ، نامشخص یا مخرب استفاده نکنید.مانند زیر :

 

انیمیشن و نمایش FloatingButton

وقتی FloatingButton روی صفحه حرکت میکند ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.

در حالی که FAB ها باید …

  • ظاهر شدن روی صفحه وقتی FAB روی صفحه متحرک می شود ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.
  • اگرچه FAB ها باید به محتوای صفحه ربط داشته باشند ، اما به سطحی که در آن محتوا ظاهر می شود ، متصل نیستند وارتباطی ندارند.
  • FAB ها به دلیل اهمیت نسبی جدا از سایر عناصر UI حرکت می کنند.
  • انتقال صفحه FAB ها می توانند برای شروع ارتباط شکل بگیرند. وقتی صفحه نمایش ظاهر خود را تغییر می دهد ، FAB باید ناپدید شود و در حین نمایش دوباره ظاهر شود.
  • ظهور FAB فقط در صورت مربوط بودن به صفحه جدید باید دوباره ظاهر شود.
  • در صورت امکان باید دوباره در همان موقعیت ظاهر شود.

 

مثال :

میخواهیم برنامه ای بنویسیم که تو اون یک دمکه شناور ایجاد کرده مانند شکل و با کلیک بر روی اون یک منو باز شده که دارای دو آیتم می باشد .

 

ابتدا یک پروژه جدیدی ایجاد می کنیم .و کد زیر رو به گریدل اضافه می کنیم:

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

وارد کردن آیکن های مربوطه

به مسیر زیر رفته و یک آیکن انتخاب میکنیم :

روی پوشه drawable  راست کلیک کرده و Vector Asset رو کلیک می کنیم و فرمی که باز می شود New میزنیم و مانند تصویر می توانیم . از بین تصاویر یک تصویر مناسب مانند شکل زیر انتخاب کنیم :

 

آیکن های دیگر مورد استفاده در برنامه رو به همین شکل اضافه نمایید .

در قسمت لایوت اکتیویتی کد زیر رو وارد می کنیم :

حالا میریم سراغ قسمت java و کدنویسی :

قبل از شروع به دیدن خروجی ، بهتر است دکمه شناور والدین و دکمه های عملکرد شناور زیر را کنترل کنید ،  که اگر این کار انجام نشده باشد ، ما در خوجی هیچ کاری انجام نمیشود :

من تو برنامه نام اکتیوی خودم رو Coordinatelayout گذاشتم شما میتونید این کارو تو هار اکتیویتی انجام بدین …

(اگر فایل gif نمی بینید روی ان کلیک کنید )

 

مطالعه بیشتر :

لینک ۱

مطالعه بیشتر