يعتبر زر العمل (Floating Action Menu) عنصرًا آخرًا مثيرًا للاهتمام يمكن إضافته في تصميم التطبيقات. يطفو زر العمل العائم على واجهة المستخدم في شكل دائري، و يمكن إضافة مرفقات به ليبدو على شكل قائمة.
نقدم لك هنا الكود الكامل لضم هذه القائمة لتطبيقك.
- الخطوة 1: إنشاء ملف 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>
- الخطوة 2: إنشاء ملف MaterialDesignFloatingActionMenu.java
package com.yourname.androidmaterialdesigntutorial; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import com.github.clans.fab.FloatingActionButton; import com.github.clans.fab.FloatingActionMenu; 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 } }); } }
- الخطوة 3: إضافة السطر التالي داخل ملف build.gradle
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' }