当前位置: 移动技术网 > 移动技术>移动开发>Android > FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton

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

2019年07月24日  | 移动技术网移动技术  | 我要评论


floatingactionbutton项目在github上的主页:

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>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网