1 ارسال در این موضوع قرار دارد

Floating action menu مفهومی جدید است که در برنامه های موبایل و وب سایت ها استفاده می شود. امروزه برخی سایت ها و برنامه های محبوب از Floating action menu از جمله صندوق ورودی استفاده می کنند. این برای اقدام سریع با گزینه های متعدد مانند آپلود عکس، ویدئو، نوشتن یادداشت و غیره استفاده می شود. Floating action menu برای یادداشت برداری کاربرد مفید است. در این آموزش، شما یاد می گیرید که Floating action menu  را در برنامه    خود  اضافه / پیاده سازی کنید.

 

ابتدا dependencies زیر را اضافه کنید:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:design:23.1.0'

    compile 'com.github.clans:fab:1.6.2'
}

 

ساخت یک Layout به نام material_design_floating_action_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/material_design_android_floating_action_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="11dp"
        android:layout_marginLeft="11dp"
        android:layout_marginRight="11dp"
        fab:menu_animationDelayPerItem="55"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_buttonSpacing="0dp"
        fab:menu_colorNormal="#da3c2f"
        fab:menu_colorPressed="#dc4b3f"
        fab:menu_colorRipple="#99d4d4d4"
        fab:menu_fab_label="Floating Action Menu"
        fab:menu_fab_size="normal"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_labels_colorNormal="#333"
        fab:menu_labels_colorPressed="#444"
        fab:menu_labels_colorRipple="#66efecec"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_position="left"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_textColor="#f2f1f1"
        fab:menu_labels_textSize="15sp"
        fab:menu_openDirection="up"
        fab:menu_shadowColor="#66aff198"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="4dp"
        fab:menu_showShadow="true">

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

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_action_menu_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_photo"
            fab:fab_label="Menu Item 2"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_action_menu_item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_edit"
            fab:fab_label="Menu Item 3"
            fab:fab_size="mini" />
    </com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>

 

کلاس اکتیویتی MaterialDesignFloatingActionMenu 

FloatingActionMenu materialDesignFAM;
    FloatingActionButton floatingActionButton1, floatingActionButton2, floatingActionButton3;

 

 

public class MaterialDesignFloatingActionMenu extends AppCompatActivity {

    FloatingActionMenu materialDesignFAM;
    FloatingActionButton floatingActionButton1, floatingActionButton2, floatingActionButton3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.material_design_floating_action_menu);

        materialDesignFAM = (FloatingActionMenu) findViewById(R.id.material_design_android_floating_action_menu);
        floatingActionButton1 = (FloatingActionButton) findViewById(R.id.material_design_floating_action_menu_item1);
        floatingActionButton2 = (FloatingActionButton) findViewById(R.id.material_design_floating_action_menu_item2);
        floatingActionButton3 = (FloatingActionButton) findViewById(R.id.material_design_floating_action_menu_item3);

        floatingActionButton1.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu first item clicked

            }
        });
        floatingActionButton2.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu second item clicked

            }
        });
        floatingActionButton3.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //TODO something when floating action menu third item clicked

            }
        });
    }
}

 

 

floating-action-menu-material-design1.jpg.349b7158b1cf7fdfaf3fa8cb678c2434.jpg

 

 

 

 

1 کاربر پسند دیده است

به اشتراک گذاری این پست


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری