منوی دکمه های شناور در اندروید(Floating action buttons)

به نام یگانه برنامه نویس جهان هستی

من خودم به شخصه نیاز به استفاده از Fab Menu ها پیدا کردم و یه سرچ انگلیسی زدم و به جواب رسیدم و با خودم گفتم خوبه که این جواب رو ترجمه کنم تا شاید چند نفر دیگه هم ازش استفاده کنن.

لینک سایت انگلیسی زبان این هستش:

https://android-arsenal.com/details/1/1684#!description

در این آموزش از یک کتابخانه ی مفید استفاده می کنیم. ابتدا نحوه ی ساخت دکمه های شناور را بررسی می کنیم و سپس قرار دادن این دکمه های شناور در یک منو را بررسی می کنیم.

توجّه: برای استفاده از این کتابخانه نسخه ی api گوشی اندرویدی کاربر باید 14 به بالا باشد.

همچنین برای دیدن نسخه ی آزمایشی می توانید از شبیه ساز اندروید روی مرورگر استفاده کنید.

خیلی خب شروع می کنیم به توضیح این کتابخانه:

کتابخانه ی زیر را در build.gradle برنامه ی خود قرار دهید.

dependencies { 
    compile 'com.github.clans:fab:1.6.4'
}

و سپس com.github.clans.fab.FloatingActionButton را در لایه ی xml مورد نظر قرار دهید.مانند مثال زیر:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/ic_menu"
        fab:fab_colorNormal="@color/app_primary"
        fab:fab_colorPressed="@color/app_primary_pressed"
        fab:fab_colorRipple="@color/app_ripple"/>

</FrameLayout>

شما می توانید با ویژگی android:src برای دکمه ی شناور خود آیکون قرار دهید. برای این کار از drawableهایی با اندازه ی 24dp استفاده کنید. با Android Assets Studio می توان آیکون هایی با اندازه ی مناسب درست کرد.

دکمه ی شناور یا Floating action buttons

در اینجا همه ی اتریبیوت های xml مربوط به دکمه ی شناور یا همان Floating action button را با مقادیر پیش فرض آن ها نوشته ایم. توجّه: نیازی نیست که همه ی اتریبیوت هارا خودتان بنویسید.فقط مواردی که نیاز به تغییر دارند را بنویسید.

<com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/your_icon_drawable"
        app:fab_colorNormal="#DA4336"
        app:fab_colorPressed="#E75043"
        app:fab_colorRipple="#99FFFFFF"
        app:fab_showShadow="true"
        app:fab_shadowColor="#66000000"
        app:fab_shadowRadius="4dp"
        app:fab_shadowXOffset="1dp"
        app:fab_shadowYOffset="3dp"
        app:fab_size="normal"
        app:fab_showAnimation="@anim/fab_scale_up"
        app:fab_hideAnimation="@anim/fab_scale_down"
        app:fab_label=""
        app:fab_progress_color="#FF009688"
        app:fab_progress_backgroundColor="#4D000000"
        app:fab_progress_indeterminate="false"
        app:fab_progress_max="100"
        app:fab_progress="0"
        app:fab_progress_showBackground="true"/>

همه ی اتریبیوت هایی که در بالا دیدید getter و setter های متناظر دارند. پس شما می توانید با برنامه نویسی هم آن هارا تغییر دهید.

منوی دکمه های شناور (Floating action menu)

در اینجا تمام اتریبیوت های FloatingActionMenu با مقادیر پیش فرض آن ها نوشته شده است یعنی نیازی نیست شما همه ی آن هارا بنویسید.

<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_style="@style/YourCustomLabelsStyle"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="your_label_here"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/menu_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star"
            fab:fab_size="mini"
            fab:fab_label="Menu item 1" />

    </com.github.clans.fab.FloatingActionMenu>

اگر از یک استایل(style) شخصی سازی شده(customize) برای لیبل ها(labels) استفاده کنید سایر ویژگی ها(attributes) نادیده گرفته خواهند شد.

تنظیمات سایه(shadow)ی برچسب ها بستگی به تنظیمات سایه ی دکمه های شناور(Floating action button) دارد.

خب این آموزش تموم شد??

لطفا ? و نظر یادتون نره!

سایر کتابخانه های اندروید را در این ? انتشارات ببینید. همچنین اگر دوست داشتید مرا در تلگرام دنبال کنید.