首页 / 移动开发 / Android / FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

FloatingActionButton项目在github上的主页：https://github.com/futuresimple/android-floating-action-button
FloatingActionButton使用简单，而且可以自定义颜色、大小、背景图片

项目构造：

下面是demo的代码（主要见sample）：

布局：

 <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"android:background="@color/background" ><com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/pink_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="dp" fab:fab_colorNormal="@color/pink" fab:fab_colorPressed="@color/pink_pressed" fab:fab_icon="@drawable/ic_fab_star" /><TextView style="@style/menu_labels_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/pink_icon" android:layout_centerHorizontal="true" android:layout_marginBottom="dp" android:text="Text below button" /><com.getbase.floatingactionbutton.AddFloatingActionButton android:id="@+id/semi_transparent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/pink_icon" android:layout_centerHorizontal="true" android:layout_marginBottom="dp" fab:fab_colorNormal="@color/blue_semi_transparent" fab:fab_colorPressed="@color/blue_semi_transparent_pressed" fab:fab_plusIconColor="@color/white" /><com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/setter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/semi_transparent" android:layout_centerHorizontal="true" android:layout_marginBottom="dp" /><com.getbase.floatingactionbutton.AddFloatingActionButton android:id="@+id/normal_plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginBottom="dp" android:layout_marginLeft="dp" android:layout_marginStart="dp" fab:fab_colorNormal="@color/white" fab:fab_colorPressed="@color/white_pressed" fab:fab_plusIconColor="@color/half_black" /><com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/right_labels" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/normal_plus" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginLeft="dp" android:layout_marginStart="dp" fab:fab_addButtonColorNormal="@color/white" fab:fab_addButtonColorPressed="@color/white_pressed" fab:fab_addButtonPlusIconColor="@color/half_black" fab:fab_addButtonSize="mini" fab:fab_labelStyle="@style/menu_labels_style" fab:fab_labelsPosition="right" > <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_title="Label on the right" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_size="mini"fab:fab_title="Another one on the right" /></com.getbase.floatingactionbutton.FloatingActionsMenu><com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/multiple_actions" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_marginBottom="dp" android:layout_marginEnd="dp" android:layout_marginRight="dp" fab:fab_addButtonColorNormal="@color/white" fab:fab_addButtonColorPressed="@color/white_pressed" fab:fab_addButtonPlusIconColor="@color/half_black" fab:fab_labelStyle="@style/menu_labels_style" > <com.getbase.floatingactionbutton.FloatingActionButtonandroid:id="@+id/action_a"android:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_title="Action A" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:id="@+id/action_b"android:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_title="Action with a very long name that won't fit on the screen" /></com.getbase.floatingactionbutton.FloatingActionsMenu><com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/multiple_actions_down" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginEnd="dp" android:layout_marginRight="dp" android:layout_marginTop="dp" fab:fab_addButtonColorNormal="@color/white" fab:fab_addButtonColorPressed="@color/white_pressed" fab:fab_addButtonPlusIconColor="@color/half_black" fab:fab_addButtonSize="mini" fab:fab_expandDirection="down" fab:fab_labelStyle="@style/menu_labels_style" > <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_size="mini" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:id="@+id/button_remove"android:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_title="Click to remove" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:id="@+id/button_gone"android:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:id="@+id/action_enable"android:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_title="Set bottom menu enabled/disabled" /></com.getbase.floatingactionbutton.FloatingActionsMenu><com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/multiple_actions_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginEnd="dp" android:layout_marginRight="dp" android:layout_marginTop="dp" android:layout_toLeftOf="@+id/multiple_actions_down" android:layout_toStartOf="@+id/multiple_actions_down" fab:fab_addButtonColorNormal="@color/white" fab:fab_addButtonColorPressed="@color/white_pressed" fab:fab_addButtonPlusIconColor="@color/half_black" fab:fab_addButtonSize="mini" fab:fab_addButtonStrokeVisible="false" fab:fab_expandDirection="left" > <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_size="mini" /> <com.getbase.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:visibility="gone"fab:fab_colorNormal="@color/white"fab:fab_colorPressed="@color/white_pressed"fab:fab_size="mini" /></com.getbase.floatingactionbutton.FloatingActionsMenu><com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/setter_drawable" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/setter" android:layout_centerHorizontal="true" /> </RelativeLayout>JAVA代码：package com.getbase.floatingactionbutton.sample; import com.getbase.floatingactionbutton.FloatingActionButton; import com.getbase.floatingactionbutton.FloatingActionsMenu; import android.app.Activity; import android.graphics.drawable.ShapeDrawable; import android.graphics.drawable.shapes.OvalShape; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;setContentView（R.layout.activity_main）;findViewById（R.id.pink_icon）.setOnClickListener（new OnClickListener（） {@Overridepublic void onClick（View v） { Toast.makeText（MainActivity.this, "Clicked pink Floating Action Button", Toast.LENGTH_SHORT）.show（）;}}）;FloatingActionButton button = （FloatingActionButton） findViewById（R.id.setter）;button.setSize（FloatingActionButton.SIZE_MINI）;button.setColorNormalResId（R.color.pink）;button.setColorPressedResId（R.color.pink_pressed）;button.setIcon（R.drawable.ic_fab_star）;button.setStrokeVisible（false）;final View actionB = findViewById（R.id.action_b）;FloatingActionButton actionC = new FloatingActionButton（getBaseContext（））;actionC.setTitle（"Hide/Show Action above"）;actionC.setOnClickListener（new OnClickListener（） {@Overridepublic void onClick（View v） { actionB.setVisibility（actionB.getVisibility（） == View.GONE ? View.VISIBLE : View.GONE）;}}）;final FloatingActionsMenu menuMultipleActions = （FloatingActionsMenu） findViewById（R.id.multiple_actions）;menuMultipleActions.addButton（actionC）;final FloatingActionButton removeAction = （FloatingActionButton） findViewById（R.id.button_remove）;removeAction.setOnClickListener（new OnClickListener（） {@Overridepublic void onClick（View v） { （（FloatingActionsMenu） findViewById（R.id.multiple_actions_down））.removeButton（removeAction）;}}）;ShapeDrawable drawable = new ShapeDrawable（new OvalShape（））;drawable.getPaint（）.setColor（getResources（）.getColor（R.color.white））;（（FloatingActionButton） findViewById（R.id.setter_drawable））.setIconDrawable（drawable）;final FloatingActionButton actionA = （FloatingActionButton） findViewById（R.id.action_a）;actionA.setOnClickListener（new OnClickListener（） {@Overridepublic void onClick（View view） { actionA.setTitle（"Action A clicked"）;}}）;// Test that FAMs containing FABs with visibility GONE do not cause crashesfindViewById（R.id.button_gone）.setVisibility（View.GONE）;final FloatingActionButton actionEnable = （FloatingActionButton） findViewById（R.id.action_enable）;actionEnable.setOnClickListener（new OnClickListener（） {@Overridepublic void onClick（View view） { menuMultipleActions.setEnabled（！menuMultipleActions.isEnabled（））;}}）;FloatingActionsMenu rightLabels = （FloatingActionsMenu） findViewById（R.id.right_labels）;FloatingActionButton addedOnce = new FloatingActionButton（this）;addedOnce.setTitle（"Added once"）;rightLabels.addButton（addedOnce）;FloatingActionButton addedTwice = new FloatingActionButton（this）;addedTwice.setTitle（"Added twice"）;rightLabels.addButton（addedTwice）;rightLabels.removeButton（addedTwice）;rightLabels.addButton（addedTwice）; } } 

<?xml version="1.0" encoding="utf-8"?><resources> <color name="black_semi_transparent">#B2000000</color> <color name="background">#e5e5e5</color> <color name="half_black">#808080</color> <color name="white">#fafafa</color> <color name="white_pressed">#f1f1f1</color> <color name="pink">#e91e63</color> <color name="pink_pressed">#ec407a</color> <color name="blue_semi_transparent">#805677fc</color> <color name="blue_semi_transparent_pressed">#80738ffe</color></resources>