تعریف 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 ها می توانند به نوارهای بالای برنامه و لبه برخی از اجزا متصل شوند مانند :
یک FloatingButton را می توان به لبه یک جز متصل کرد.
و برای بهتر شدن و زیباتر شدن برنامه بهتر است که FAB رو در اجزای جداگانه ، مانند cards،نداشته باشند.
اقدامات
یک دکمه عملکرد شناور (FAB) می تواند عملیاتی را روی صفحه فعلی تحریک کند یا می تواند عملی را ایجاد کند که صفحه جدیدی ایجاد می کند.
FAB یک اقدام مهم و سازنده مانند:
- ایجاد کردن
- علاقه مندیها
- اشتراک گذاری
- شروع یک فرآیند
از استفاده از FAB برای اقدامات جزئی یا مخرب مانند موارد زیر خودداری کنید:
- بایگانی یا حذف شده ها
- هشدارها یا خطاها
- کارهای محدود مانند برش متن
- کنترل هایی که برای نوار ابزار مناسب ترند (مانند کنترل ها برای تنظیم میزان صدا یا رنگ قلم)
تصویر زیر FAB های مورد تایید برای ایجاد یک برنامه متریال می باشد :
بهتر است از FAB برای اقدامات جزئی ، سرریز ، نامشخص یا مخرب استفاده نکنید.مانند زیر :
انیمیشن و نمایش FloatingButton
وقتی FloatingButton روی صفحه حرکت میکند ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.
در حالی که FAB ها باید …
- ظاهر شدن روی صفحه وقتی FAB روی صفحه متحرک می شود ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.
- اگرچه FAB ها باید به محتوای صفحه ربط داشته باشند ، اما به سطحی که در آن محتوا ظاهر می شود ، متصل نیستند وارتباطی ندارند.
- FAB ها به دلیل اهمیت نسبی جدا از سایر عناصر UI حرکت می کنند.
- انتقال صفحه FAB ها می توانند برای شروع ارتباط شکل بگیرند. وقتی صفحه نمایش ظاهر خود را تغییر می دهد ، FAB باید ناپدید شود و در حین نمایش دوباره ظاهر شود.
- ظهور FAB فقط در صورت مربوط بودن به صفحه جدید باید دوباره ظاهر شود.
- در صورت امکان باید دوباره در همان موقعیت ظاهر شود.
مثال :
میخواهیم برنامه ای بنویسیم که تو اون یک دمکه شناور ایجاد کرده مانند شکل و با کلیک بر روی اون یک منو باز شده که دارای دو آیتم می باشد .
ابتدا یک پروژه جدیدی ایجاد می کنیم .و کد زیر رو به گریدل اضافه می کنیم:
۱ |
implementation ‘com.google.android.material:material:۱.۳.۰-alpha02’ |
حا در قسمت Style برنامه کد زیر را وارد می کنیم تا یک طرح و شکل خاص به برنامه بدهیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Customize your theme here --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
وارد کردن آیکن های مربوطه
به مسیر زیر رفته و یک آیکن انتخاب میکنیم :
روی پوشه drawable راست کلیک کرده و Vector Asset رو کلیک می کنیم و فرمی که باز می شود New میزنیم و مانند تصویر می توانیم . از بین تصاویر یک تصویر مناسب مانند شکل زیر انتخاب کنیم :
آیکن های دیگر مورد استفاده در برنامه رو به همین شکل اضافه نمایید .
در قسمت لایوت اکتیویتی کد زیر رو وارد می کنیم :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ ۹۰ ۹۱ ۹۲ ۹۳ ۹۴ ۹۵ ۹۶ |
<?xml version="۱.۰" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--This will be the parent Floating Action Button--> <!--After the implementation the Floating Action Button at the bottom right corner as we have constrained accordingly--> <!--After clicking the above button the following two buttons will pop up. So this button is considered as parent FAB--> <!--After opening the application it looks like regular FAB but after user clicks it, it extends--> <!--This functionality has been handled in the MainActivity.java--> <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/add_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:layout_marginEnd="۱۶dp" android:layout_marginBottom="۱۶dp" android:backgroundTint="@color/colorAccent" android:text="Actions" app:icon="@drawable/ic_add_black_24dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <!--Floating action button for add alarm--> <!--Make sure that you are constraining this button to the parent button--> <!--Make sure to add backgroundTint attribute to match the entire application color--> <!--because after changing the base application theme the color of the FAB is set Blue as default--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/add_alarm_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="۲۴dp" android:backgroundTint="@color/colorAccent" app:fabSize="normal" app:layout_constraintBottom_toTopOf="@+id/add_fab" app:layout_constraintEnd_toEndOf="@+id/add_fab" app:srcCompat="@drawable/ic_add_alarm_black_24dp" /> <!--Action name text for the add alarm button--> <!--Make sure that you are constraining this Text to the add Alarm FAB button--> <TextView android:id="@+id/add_alarm_action_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="۸dp" android:text="Add Alarm" app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab" app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab" app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" /> <!--Floating action button for add person--> <!--Make sure that you are constraining this button to the add Alarm FAB button--> <!--Make sure to add backgroundTint attribute to match the entire application color--> <!--because after changing the base application theme the color of the FAB is set Blue as default--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/add_person_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="۲۴dp" android:backgroundTint="@color/colorAccent" app:fabSize="normal" app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab" app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab" app:layout_constraintStart_toStartOf="@+id/add_alarm_fab" app:srcCompat="@drawable/ic_person_add_black_24dp" /> <!--Action name text for the add person button--> <!--Make sure that you are constraining this Text to the add Person FAB button--> <TextView android:id="@+id/add_person_action_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="۸dp" android:text="Add Person" app:layout_constraintBottom_toBottomOf="@+id/add_person_fab" app:layout_constraintEnd_toStartOf="@+id/add_person_fab" app:layout_constraintTop_toTopOf="@+id/add_person_fab" /> </androidx.constraintlayout.widget.ConstraintLayout> |
حالا میریم سراغ قسمت java و کدنویسی :
قبل از شروع به دیدن خروجی ، بهتر است دکمه شناور والدین و دکمه های عملکرد شناور زیر را کنترل کنید ، که اگر این کار انجام نشده باشد ، ما در خوجی هیچ کاری انجام نمیشود :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ ۹۰ ۹۱ ۹۲ ۹۳ ۹۴ ۹۵ ۹۶ ۹۷ ۹۸ ۹۹ ۱۰۰ ۱۰۱ ۱۰۲ ۱۰۳ ۱۰۴ ۱۰۵ ۱۰۶ ۱۰۷ ۱۰۸ ۱۰۹ ۱۱۰ ۱۱۱ ۱۱۲ ۱۱۳ ۱۱۴ ۱۱۵ ۱۱۶ ۱۱۷ ۱۱۸ ۱۱۹ ۱۲۰ ۱۲۱ ۱۲۲ ۱۲۳ ۱۲۴ ۱۲۵ ۱۲۶ ۱۲۷ ۱۲۸ ۱۲۹ |
package ir.bookzar.menu; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.coordinatorlayout.widget.CoordinatorLayout; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.TextView; import android.widget.Toast; import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton; import com.google.android.material.floatingactionbutton.FloatingActionButton; public class Coordinatelayout extends AppCompatActivity { FloatingActionButton mAddAlarmFab, mAddPersonFab; ExtendedFloatingActionButton mAddFab; TextView addAlarmActionText, addPersonActionText; Boolean isAllFabsVisible; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_coordinatelayout); mAddFab = findViewById(R.id.add_fab); // FAB button mAddAlarmFab = findViewById(R.id.add_alarm_fab); mAddPersonFab = findViewById(R.id.add_person_fab); // Also register the action name text, of all the // FABs. except parent FAB action name text addAlarmActionText = findViewById(R.id.add_alarm_action_text); addPersonActionText = findViewById(R.id.add_person_action_text); // Now set all the FABs and all the action name // texts as GONE mAddAlarmFab.setVisibility(View.GONE); mAddPersonFab.setVisibility(View.GONE); addAlarmActionText.setVisibility(View.GONE); addPersonActionText.setVisibility(View.GONE); // make the boolean variable as false, as all the // action name texts and all the sub FABs are // invisible isAllFabsVisible = false; // Set the Extended floating action button to // shrinked state initially mAddFab.shrink(); // We will make all the FABs and action name texts // visible only when Parent FAB button is clicked So // we have to handle the Parent FAB button first, by // using setOnClickListener you can see below mAddFab.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { if (!isAllFabsVisible) { // when isAllFabsVisible becomes // true make all the action name // texts and FABs VISIBLE. mAddAlarmFab.show(); mAddPersonFab.show(); addAlarmActionText.setVisibility(View.VISIBLE); addPersonActionText.setVisibility(View.VISIBLE); // Now extend the parent FAB, as // user clicks on the shrinked // parent FAB mAddFab.extend(); // make the boolean variable true as // we have set the sub FABs // visibility to GONE isAllFabsVisible = true; } else { // when isAllFabsVisible becomes // true make all the action name // texts and FABs GONE. mAddAlarmFab.hide(); mAddPersonFab.hide(); addAlarmActionText.setVisibility(View.GONE); addPersonActionText.setVisibility(View.GONE); // Set the FAB to shrink after user // closes all the sub FABs mAddFab.shrink(); // make the boolean variable false // as we have set the sub FABs // visibility to GONE isAllFabsVisible = false; } } }); // below is the sample action to handle add person // FAB. Here it shows simple Toast msg. The Toast // will be shown only when they are visible and only // when user clicks on them mAddPersonFab.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(Coordinatelayout.this, "Person Added", Toast.LENGTH_SHORT).show(); } }); // below is the sample action to handle add alarm // FAB. Here it shows simple Toast msg The Toast // will be shown only when they are visible and only // when user clicks on them mAddAlarmFab.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(Coordinatelayout.this, "Alarm Added", Toast.LENGTH_SHORT).show(); } }); } } |
من تو برنامه نام اکتیوی خودم رو Coordinatelayout گذاشتم شما میتونید این کارو تو هار اکتیویتی انجام بدین …
(اگر فایل gif نمی بینید روی ان کلیک کنید )
مطالعه بیشتر :
برنامه نویسی در زمینه اندروید استودی و ویژوال استودیو و انجام پروژه های متعدد برنامه نویسی.