Android仿知乎悬浮功能按钮FloatingActionButton效果

前段时间在看属性动画，恰巧这个按钮的效果可以用属性动画实现，所以就来实践实践。效果基本出来了，大家可以自己去完善。

首先看一下效果图：

我们看到点击floatingactionbutton后会展开一些item，然后会有一个蒙板效果，这都是这个view的功能。那么这整个view肯定是个viewgroup，我们一部分一部分来看。

首先是这个最小的tag：

这个tag带文字，可以是一个textview，但为了美观，我们使用cardview，cardview是一个framelayout，我们要让它具有显示文字的功能，就继承cardview自定义一个viewgroup。

public class tagview extends cardview

内部维护一个textview，在其构造函数中我们实例化一个textview用来显示文字，并在外部调用settagtext的时候把textview添加到这个cardview中。

public class tagview extends cardview {
 private textview mtextview;
 public tagview(context context) {
 this(context, null);
 }
 public tagview(context context, attributeset attrs) {
 this(context, attrs, 0);
 }
 public tagview(context context, attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 mtextview = new textview(context);
 mtextview.setsingleline(true);
 }
 protected void settextsize(float size){
 mtextview.settextsize(size);
 }
 protected void settextcolor(int color){
 mtextview.settextcolor(color);
 }
 //给内部的textview添加文字
 protected void settagtext(string text){
 mtextview.settext(text);
 addtag();
 }
 //添加进这个layout中
 private void addtag(){
 layoutparams layoutparams = new layoutparams(viewgroup.layoutparams.wrap_content
  , viewgroup.layoutparams.wrap_content, gravity.center);
 int l = dp2px(8);
 int t = dp2px(8);
 int r = dp2px(8);
 int b = dp2px(8);
 layoutparams.setmargins(l, t, r, b);
 //addview会引起所有view的layout
 addview(mtextview, layoutparams);
 }
 private int dp2px(int value){
 return (int) typedvalue.applydimension(typedvalue.complex_unit_dip
  , value, getresources().getdisplaymetrics());
 }
}

接下来我们看这个item，它是一个tag和一个fab的组合：

tag使用刚才我们自定义的tagview，fab就用系统的floatingactionbutton，这里显然需要一个viewgroup来组合这两个子view，可以使用linearlayout，这里我们就直接使用viewgroup。

public class tagfablayout extends viewgroup

我们为这个viewgroup设置自定义属性，是为了给tag设置text：

 <declare-styleable name="fabtaglayout">
 <attr name="tagtext" format="string" />
 </declare-styleable>

在构造器中获取自定义属性，初始化tagview并添加到该viewgroup中：

 public tagfablayout(context context, attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 getattributes(context, attrs);
 settingtagview(context);
 }
 private void getattributes(context context, attributeset attributeset){
 typedarray typedarray = context.obtainstyledattributes(attributeset
  , r.styleable.fabtaglayout);
 mtagtext = typedarray.getstring(r.styleable.fabtaglayout_tagtext);
 typedarray.recycle();
 }
 private void settingtagview(context context){
 mtagview = new tagview(context);
 mtagview.settagtext(mtagtext);
 addview(mtagview);
 }

在onmeasure对该viewgroup进行测量，这里我直接把宽高设置成wrap_content的了，match_parent和精确值感觉没有必要。tagview和floatingactionbutton横向排列，中间和两边留一点空隙。

@override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
 super.onmeasure(widthmeasurespec, heightmeasurespec);
 int width = 0;
 int height = 0;
 int count = getchildcount();
 for(int i=0; i<count; i++){
  view view = getchildat(i);
  measurechild(view, widthmeasurespec, heightmeasurespec);
  width += view.getmeasuredwidth();
  height = math.max(height, view.getmeasuredheight());
 }
 width += dp2px(8 + 8 + 8);
 height += dp2px(8 + 8);
 //直接将该viewgroup设定为wrap_content的
 setmeasureddimension(width, height);
 }

在onlayout中横向布局，tag在左，fab在右。

@override
 protected void onlayout(boolean changed, int l, int t, int r, int b) {
 //为子view布局
 view tagview = getchildat(0);
 view fabview = getchildat(1);
 int tagwidth = tagview.getmeasuredwidth();
 int tagheight = tagview.getmeasuredheight();
 int fabwidth = fabview.getmeasuredwidth();
 int fabheight = fabview.getmeasuredheight();
 int tl = dp2px(8);
 int tt = (getmeasuredheight() - tagheight) / 2;
 int tr = tl + tagwidth;
 int tb = tt + tagheight;
 int fl = tr + dp2px(8);
 int ft = (getmeasuredheight() - fabheight) / 2;
 int fr = fl + fabwidth;
 int fb = ft + fabheight;
 fabview.layout(fl, ft, fr, fb);
 tagview.layout(tl, tt, tr, tb);
 bindevents(tagview, fabview);
 }

还要为这两个子view注册onclicklistener，这是点击事件传递的源头。

private void bindevents(view tagview, view fabview){
 tagview.setonclicklistener(new onclicklistener() {
  @override
  public void onclick(view v) {
  if(montagclicklistener != null){
   montagclicklistener.ontagclick();
  }
  }
 });
 fabview.setonclicklistener(new onclicklistener() {
  @override
  public void onclick(view v) {
  if (monfabclicklistener != null){
   monfabclicklistener.onfabclick();
  }
  }
 });
 }

现在item的viewgroup有了，我们还需要一个蒙板，一个主fab，那么我们来看最终的viewgroup。

思路也很清楚，蒙板是match_parent的，主fab在右下角（当然我们可以自己设置，也可以对外提供接口来设置位置），三个item（也就是tagfablayout）在主fab的上面。至于动画效果，在点击事件中触发。

public class multifloatingactionbutton extends viewgroup

这里我们还需要自定义一些属性，比如蒙板的颜色、主fab的颜色、主fab的图案（当然，你把主fab直接写在xml中就可以直接定义这些属性）、动画的duaration、动画的模式等。

 <attr name="animationmode">
 <enum name="fade" value="0"/>
 <enum name="scale" value="1"/>
 <enum name="bounce" value="2"/>
 </attr>
 <attr name="position">
 <enum name="left_bottom" value="0"/>
 <enum name="right_bottom" value="1"/>
 </attr>
 <declare-styleable name="multifloatingactionbutton">
 <attr name="backgroundcolor" format="color"/>
 <attr name="switchfabicon" format="reference"/>
 <attr name="switchfabcolor" format="color"/>
 <attr name="animationduration" format="integer"/>
 <attr name="animationmode"/>
 <attr name="position"/>
 </declare-styleable>

在构造器中我们同样是获取并初始化属性：

public multifloatingactionbutton(context context, attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 //获取属性值
 getattributes(context, attrs);
 //添加一个背景view和一个floatingactionbutton
 setbaseviews(context);
 }

private void getattributes(context context, attributeset attrs){
 typedarray typedarray = context.obtainstyledattributes(attrs, r.styleable.multifloatingactionbutton);
 mbackgroundcolor = typedarray.getcolor(  r.styleable.multifloatingactionbutton_backgroundcolor, color.transparent);
 mfabicon = typedarray.getdrawable(r.styleable.multifloatingactionbutton_switchfabicon);
 mfabcolor = typedarray.getcolorstatelist(r.styleable.multifloatingactionbutton_switchfabcolor);
 manimationduration = typedarray.getint(r.styleable.multifloatingactionbutton_animationduration, 150);
 manimationmode = typedarray.getint(r.styleable.multifloatingactionbutton_animationmode, anim_scale);
 mposition = typedarray.getint(r.styleable.multifloatingactionbutton_position, pos_right_bottom);
 typedarray.recycle();
 }

接着我们初始化、添加蒙板和主fab。

private void setbaseviews(context context){
 mbackgroundview = new view(context);
 mbackgroundview.setbackgroundcolor(mbackgroundcolor);
 mbackgroundview.setalpha(0);
 addview(mbackgroundview);
 mfloatingactionbutton = new floatingactionbutton(context);
 mfloatingactionbutton.setbackgroundtintlist(mfabcolor);
 mfloatingactionbutton.setimagedrawable(mfabicon);
 addview(mfloatingactionbutton);
 }

在onmeasure中，我们并不会对这个viewgroup进行wrap_content的支持，因为基本上都是match_parent的吧，也不会有精确值，而且这个viewgroup应该是在顶层的。我们看下onlayout方法，在这个方法中，我们对所有子view进行布局。

@override
 protected void onlayout(boolean changed, int l, int t, int r, int b) {
 if(changed){
  //布局背景和主fab
  layoutfloatingactionbutton();
  layoutbackgroundview();
  layoutitems();
 }
 }

首先布局主fab，它在右下角，然后添加点击事件，点击这个主fab后，会涉及到旋转主fab，改变蒙板透明度，打开或关闭items等操作，这些等下再说。

private void layoutfloatingactionbutton(){
 int width = mfloatingactionbutton.getmeasuredwidth();
 int height = mfloatingactionbutton.getmeasuredheight();
 int fl = 0;
 int ft = 0;
 int fr = 0;
 int fb = 0;
 switch (mposition){
  case pos_left_bottom:
  case pos_right_bottom:
  fl = getmeasuredwidth() - width - dp2px(8);
  ft = getmeasuredheight() - height - dp2px(8);
  fr = fl + width;
  fb = ft + height;
  break;
 }
 mfloatingactionbutton.layout(fl, ft, fr, fb);
 bindfloatingevent();
}
private void bindfloatingevent(){
 mfloatingactionbutton.setonclicklistener(new onclicklistener() {
  @override
  public void onclick(view v) {
  rotatefloatingbutton();
  changebackground();
  changestatus();
  if (ismenuopen) {
   openmenu();
  } else {
   closemenu();
  }
  }
 });
 }

然后布局背景：

private void layoutbackgroundview(){
 mbackgroundview.layout(0, 0
  , getmeasuredwidth(), getmeasuredheight());
 }

接着布局items，并为items添加点击事件。每个item都是tagfablayout，可以为它setontagclicklistener和setonfabclicklistener,以便我们点击这两块区域的时候都要能响应，并且我们让这两个回调函数中做同样的事情：旋转主fab、改变背景、关闭items（因为能点击一定是展开状态）。此时还要在这个viewgroup中设置一个接口onfabitemclicklistener，用于将点击的位置传递出去，例如activity实现了这个接口，就可以在ontagclick和onfabclick方法中调用monfabitemclicklistener.onfabitemclick()方法。说一下这里的布局，是累积向上的，注意坐标的计算。

private void layoutitems(){
 int count = getchildcount();
 for(int i=2; i<count; i++) {
  tagfablayout child = (tagfablayout) getchildat(i);
  child.setvisibility(invisible);
  //获取自身测量宽高，这里说一下，由于tagfablayout我们默认形成wrap_content，所以这里测量到的是wrap_content的最终大小
  int width = child.getmeasuredwidth();
  int height = child.getmeasuredheight();
  // 获取主fab测量宽高
  int fabheight = mfloatingactionbutton.getmeasuredheight();
  int cl = 0;
  int ct = 0;
  switch (mposition) {
  case pos_left_bottom:
  case pos_right_bottom:
   cl = getmeasuredwidth() - width - dp2px(8);
   ct = getmeasuredheight() - fabheight - (i - 1) * height - dp2px(8);
  }
  child.layout(cl, ct, cl + width, ct + height);
  bindmenuevents(child, i);
  prepareanim(child);
 }
}
private void bindmenuevents(final tagfablayout child, final int pos){
 child.setontagclicklistener(new tagfablayout.ontagclicklistener() {
  @override
  public void ontagclick() {
  rotatefloatingbutton();
  changebackground();
  changestatus();
  closemenu();
  if(monfabitemclicklistener != null){
   monfabitemclicklistener.onfabitemclick(child, pos);
  }
  }
 });
 child.setonfabclicklistener(new tagfablayout.onfabclicklistener() {
  @override
  public void onfabclick() {
  rotatefloatingbutton();
  changebackground();
  changestatus();
  closemenu();
  if (monfabitemclicklistener != null){
   monfabitemclicklistener.onfabitemclick(child, pos);
  }
  }
 });
}

现在所有的布局和点击事件都已经绑定好了，我们来看下rotatefloatingbutton()、 changebackground() 、 openmenu() 、closemenu()这几个和属性动画相关的函数。

其实也很简单，rotatefloatingbutton()对mfloatingactionbutton的rotation这个属性进行改变，以菜单是否打开为判断条件。

private void rotatefloatingbutton(){
 objectanimator animator = ismenuopen ? objectanimator.offloat(mfloatingactionbutton
  , "rotation", 45f, 0f) : objectanimator.offloat(mfloatingactionbutton, "rotation", 0f, 45f);
 animator.setduration(150);
 animator.setinterpolator(new linearinterpolator());
 animator.start();
 }

changebackground()改变mbackgroundview的alpha这个属性，也是以菜单是否打开为判断条件。

private void changebackground(){
 objectanimator animator = ismenuopen ? objectanimator.offloat(mbackgroundview, "alpha", 0.9f, 0f) :
 objectanimator.offloat(mbackgroundview, "alpha", 0f, 0.9f);
 animator.setduration(150);
 animator.setinterpolator(new linearinterpolator());
 animator.start();
 }

openmenu() 中根据不同的模式来实现打开的效果，看一下scaletoshow()，这里同时对scalex、scaley、alpha这3个属性进行动画，来达到放大显示的效果。

private void openmenu(){
 switch (manimationmode){
  case anim_bounce:
  bouncetoshow();
  break;
  case anim_scale:
  scaletoshow();
 }
 }
private void scaletoshow(){
 for(int i = 2; i<getchildcount(); i++){
  view view = getchildat(i);
  view.setvisibility(visible);
  view.setalpha(0);
  objectanimator scalex = objectanimator.offloat(view, "scalex", 0f, 1f);
  objectanimator scaley = objectanimator.offloat(view, "scaley", 0f, 1f);
  objectanimator alpha = objectanimator.offloat(view, "alpha", 0f, 1f);
  animatorset set = new animatorset();
  set.playtogether(scalex, scaley, alpha);
  set.setduration(manimationduration);
  set.start();
 }
}

差不多达到我们要求的效果了，但是还有一个小地方需要注意一下，在menu展开的时候，如果我们点击menu以外的区域，即蒙板上的区域，此时viewgroup是不会拦截任何touch事件，如果在这个floatingactionbutton下面有可以被点击响应的view，比如listview，就会在蒙板显示的情况下进行响应，正确的逻辑应该是关闭menu。

那么我们需要在onintercepttouchevent中处理事件的拦截，这里判断的方法是：如果menu是打开的，我们在down事件中判断x，y是否落在了a或b区域，如下图

如果是的话，该viewgroup应该拦截这个事件，交由自身的ontouchevent处理。

@override
 public boolean onintercepttouchevent(motionevent ev) {
 boolean intercepted = false;
 int x = (int)ev.getx();
 int y = (int)ev.gety();
 if(ismenuopen){
  switch (ev.getaction()){
  case motionevent.action_down:
   if(judgeiftouchbackground(x, y)){
   intercepted = true;
   }
   intercepted = false;
   break;
  case motionevent.action_move:
   intercepted = false;
   break;
  case motionevent.action_up:
   intercepted = false;
   break;
  }
 }
 return intercepted;
 }
 private boolean judgeiftouchbackground(int x, int y){
  rect a = new rect();
  rect b = new rect();
  a.set(0, 0, getwidth(), getheight() - getchildat(getchildcount() - 1).gettop());
  b.set(0, getchildat(getchildcount() - 1).gettop(), getchildat(getchildcount() - 1).getleft(), getheight());
  if(a.contains(x, y) || b.contains(x, y)){
  return true;
  }
  return false;
 }

在ontouchevent中做关闭menu等操作。

 @override
 public boolean ontouchevent(motionevent event) {
 if(ismenuopen){
  closemenu();
  changebackground();
  rotatefloatingbutton();
  changestatus();
  return true;
 }
 return super.ontouchevent(event);
 }

再看一下，效果不错。

由于我做的小app中涉及到切换夜间模式，这个viewgroup的背景色应该随着主题改变，设置该view的背景色为

app:backgroundcolor="?attr/mybackground"

重写viewgroup的 setbackgroundcolor方法，这里所谓的背景色其实就是蒙板的颜色。

public void setbackgroundcolor(int color){
 mbackgroundcolor = color;
 mbackgroundview.setbackgroundcolor(color);
}

基本功能到这里全部完成了，问题还有很多，比如没有提供根据不同的position进行布局、没有提供根据不同mode设置menu开闭的效果，但是后续我还会继续改进和完善^ ^。欢迎交流。如果大家需要源码，可以去我源码里的customview里面自取。在这里

以上所述是小编给大家介绍的android仿知乎悬浮功能按钮floatingactionbutton效果，希望对大家有所帮助