首页 > 系统 > Android > 正文

FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

2020-04-11 11:13:08
字体:
来源:转载
供稿:网友


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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android: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.FloatingActionButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    fab:fab_colorNormal="@color/white"    fab:fab_colorPressed="@color/white_pressed" />   <com.getbase.floatingactionbutton.FloatingActionButton    android: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.FloatingActionButton    android: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() {  @Override  public 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() {  @Override  public 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() {  @Override  public 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() {  @Override  public void onClick(View view) {   actionA.setTitle("Action A clicked");  }  });  // Test that FAMs containing FABs with visibility GONE do not cause crashes  findViewById(R.id.button_gone).setVisibility(View.GONE);  final FloatingActionButton actionEnable = (FloatingActionButton) findViewById(R.id.action_enable);  actionEnable.setOnClickListener(new OnClickListener() {  @Override  public 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); } } 

colors:

<?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>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表