Material Design --FloatingAction

作者: 肉团先生 | 来源:发表于2015-05-09 11:25 被阅读15329次

Material Design --FloatingActionButton(发布)

配置

使用android studio导入

Github地址: futuresimple/android-floating-action-button

刚开始不知道如何导入，以为向eclipse一样，这样导入第三方的包就可以了，想不到android studio使用的是gradles，直接在对应位置添加下方这句话就可以了进行了导入。

Just add the dependency to your build.gradle:

dependencies {
    compile 'com.getbase:floatingactionbutton:1.9.0'
}

使用：

在对应的布局xml，加入。

根布局加入xmlns:fab="http://schemas.android.com/apk/res-auto"，指定使用自定义的格式。

添加控件：

<com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/pink_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@drawable/ic_fab_star"
        fab:fab_colorNormal="@color/pink"
        fab:fab_colorPressed="@color/pink_pressed"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

通过以上设置，即可显示出来，接着就按普通的btn一样使用。不用想得太复杂。详细的查看github的例子。

参考文章：FloatingActionButton的使用

eclipse 使用

刚开始就讲以上github的全部下载进来，再导入，接着就一堆报错。上网找了，不是缺少这个就缺少那个。只好放弃。然后之前有保存一个Material Deisgn的Github地址，也有这个float button。而且通过eclipse导入，完美没有报错。接下来就用这个。

gitub地址：navasmdc/MaterialDesignLibrary，将整个项目下载下来，进行导入即可。

用的项目不同，那么使用也稍有区别：

根布局：xmlns:materialdesign="http://schemas.android.com/apk/res-auto"

加入控件

<com.gc.materialdesign.views.ButtonFloat
                android:id="@+id/buttonFloat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="24dp"
                android:background="#1E88E5"
                materialdesign:animate="true"
                materialdesign:iconDrawable="@drawable/ic_action_new" />

这里还加入了动画的效果，用的是nineoldandroids.jar来实现的动画效果，不知道我为什么使用了动画效果就错。所以，我这里materialdesign:animate="false",不使用。

使用`FloatingActionsMenu`弹出多个button

使用FloatingActionMenu嵌套多个floatbutton即可

<com.getbase.floatingactionbutton.FloatingActionsMenu
   android:id="@+id/club_home_fa_settings"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
   <com.getbase.floatingactionbutton.FloatingActionButton
       android:id="@+id/detailed_action_update_notice"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       fab:fab_colorNormal="@color/blue_colorPrimary"
       fab:fab_icon="@mipmap/club_icon_activity_now"
       fab:fab_colorPressed="@color/blue_colorPrimaryDark"
       fab:fab_title="@string/float_action_update_notice" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>

实战

如何修改弹出文字的字体颜色以及字体背景

Alt text
浮动菜单FloatingActionsMenu提供了一个属性fab:fab_labelStyle进行修改。导入自定义的style

在FloatingActionsMenu里面添加

fab:fab_labelStyle="@style/menu_labels_style"

在styles.xml添加(只需修改两个样式，一个是字体，另一个是背景)

<style name="menu_labels_style">
  <item name="android:background">@drawable/fab_label_background</item>
  <item name="android:textColor">@color/secondary_text</item>
</style>

解决`FloatingActionsMenu`的图标不可以改变

经过大量的搜索，最直接的，就是Github里面issues问题，等待作者进行解决。发现里面，其中问题56提供了解决问题的思路。顺着思路

我们必须先将源码进行clone下来。
接着找到默认的图标。很明显是画出来的。
我们在类FloatingActionsMenu中的方法createAddButton中

 Drawable getIconDrawable() {
        final RotatingDrawable rotatingDrawable = new RotatingDrawable(super.getIconDrawable());
}

可以发现从字面的理解RotatingDrawable的旋转资源是通过super.getIconDrawable()进行得到。便在找到了这个类：AddFloatingActionButton。

接下来就是对AddFloatingActionButton进行研究，发现方法：getIconDrawable()正是进行划出了

final Shape shape = new Shape() {
      @Override
      public void draw(Canvas canvas, Paint paint) {
        canvas.drawRect(plusOffset, iconHalfSize - plusHalfStroke, iconSize - plusOffset, iconHalfSize + plusHalfStroke, paint);
        canvas.drawRect(iconHalfSize - plusHalfStroke, plusOffset, iconHalfSize + plusHalfStroke, iconSize - plusOffset, paint);
      }
    };

通过Canvas进行画出充满的矩形。形成一个十字。

找到后的第一感觉就是进行继承相应的类，然后进行重写相应的方法。即：getIconDrawable()方法。但是原作者既然使用默认的修饰符，而不是public，这样的情况，只有当前包的类才能进行重写该方法，无解，只能自己去修改源代码。
在当前AddFloatingActionButton添加一下方法。我们通过canvas将图片画进去。

public Drawable getBitmapDrawable(final int resIcon) {

  final Shape shape = new Shape() {
    @Override
    public void draw(Canvas canvas, Paint paint) {
      Bitmap iconbit = BitmapFactory.decodeResource(getResources(), resIcon) ;//将图片资源转成Bitmap
      canvas.drawBitmap(iconbit,0,0,paint);//使用canvas进行画出
    }
  };
  ShapeDrawable drawable = new ShapeDrawable(shape);

  final Paint paint = drawable.getPaint();
  paint.setColor(mPlusColor);
  paint.setStyle(Style.FILL);
  paint.setAntiAlias(true);

  return drawable;
}

在类FloatingActionsMenu添加一个属性，专门得到图片的资源

 private int mResIcon=-1;

然后再方法：getIconDrawable()进行修改，将

final RotatingDrawable rotatingDrawable = new RotatingDrawable(super.getIconDrawable());

改成

RotatingDrawable rotatingDrawable;
if(mResIcon!=-1){
  rotatingDrawable = new RotatingDrawable(getBitmapDrawable(mResIcon));
}
else{
  rotatingDrawable = new RotatingDrawable(super.getIconDrawable());
}

进行设置mResIcon,默认是十字，但有图标的时候，进行改变。

相应的，我们需要提供相应的xml的属性，我们在res/values/attrs.xml加入

<declare-styleable name="FloatingActionsMenu">
        <attr name="fab_bitmap" format="reference"/>
</declare-styleable>

在类FloatingActionsMenu的方法init(Context context, AttributeSet attributeSet)加入

mResIcon=attr.getResourceId(R.styleable.FloatingActionsMenu_fab_bitmap, -1);//得到图片资源，否则默认为-1

设置完成

解决自定义修改`FloatingActionsMenu`的旋转的角度

默认为135。

我们需要提供相应的xml的属性，我们在res/values/attrs.xml加入

<declare-styleable name="FloatingActionsMenu">
<attr name="fab_rotation" format="float"/>
</declare-styleable>

在类FloatingActionsMenu加入以下属性，并进行赋值

private static final float EXPANDED_PLUS_ROTATION = 90f + 45f;//rorate
private float rotate=EXPANDED_PLUS_ROTATION;//设置的角度

并通过get或者set进行修改，导致可以通过动态进行修改

public float getRotate() {
  return rotate;
}

public void setRotate(float rotate) {
  this.rotate = rotate;
}

在类FloatingActionsMenu里的init()添加

rotate=attr.getFloat(R.styleable.FloatingActionsMenu_fab_rotation,EXPANDED_PLUS_ROTATION);

最后在有EXPANDED_PLUS_ROTATION的地方，进行替换成getRotate()即可。
在getIconDrawable里面的

final ObjectAnimator collapseAnimator = ObjectAnimator.ofFloat(rotatingDrawable, "rotation", getRotate(), COLLAPSED_PLUS_ROTATION);
final ObjectAnimator expandAnimator = ObjectAnimator.ofFloat(rotatingDrawable, "rotation", COLLAPSED_PLUS_ROTATION, getRotate());

项目地址

我已经将项目进行fork，然后提交，并申请与原作者进行合并了。
地址：https://github.com/Trity93/android-floating-action-button

最新自己更新的项目地址：FloatingActionButton

学习资料

CircularFloatingActionMenu 源码解析

网友评论

下雨天的小白鞋:fab中间可以把icon换成文字吗？
肉团先生:@下雨天的小白鞋按道理是可以的，因为imageview和textview也是一个view而已
6c48cf45d28b:Hi 请问楼主如果我想单击FloatingActionsMenu 时，改变icon 的样式该怎么做呢
T9的第三个三角: @Trity 可以用用，挺方便的，还可以自己修改
肉团先生:@T9的第三个三角福利啊
T9的第三个三角:[一个自由定制可展开的的Material Design风格FloatingActionButton](http://www.jianshu.com/p/98c4c482fc8d)
看看这个实现方式，可以代码设置Menu的icon，记录Menu的点击事件，在Menu的展开和折叠的方法里对应操作Menu的Icon，可以轻松实现
捡淑:马克
73757a87a3cb:button的隐藏方法是啥呢调用hide没有
肉团先生:@梅格曼神兽 visiblity不可做到？
无聊的ddd:floatingactionsmenu remove all button的时候高度计算错误怎么解决？
一直在变的风:idea下导入了design包，编译没有错，可是等到运行了，报错android.view.InflateException: Binary XML file line #49: Error inflating class android.support.design.widget.FloatingActionButton 不知道怎么解决了
CRAZYFAKE:你好，请问FloatingActionsMenu中的加号按钮的颜色怎么改变呢
CRAZYFAKE:@Trity 好的谢谢楼主
肉团先生:@CRAZYFAKE 上面有讲：浮动菜单FloatingActionsMenu提供了一个属性fab:fab_labelStyle进行修改。导入自定义的style
被偷的贼:你好怎么控制 menu 距离底部或者四边的位置
肉团先生:@被偸賊这是布局的问题吧？
hedge_hog:请问 fab_bitmap 这个属性，只可以给 FloatingActionsMenu 设置吗？
按照博主你提供的库，给 FloatingActionButton 设置后不能显示icon
hedge_hog:@Trity 多谢！
肉团先生:@hedge_hog 对的。只能给FloatingActionsMenu 设置，FloatingActionButton 并不需要fab_bitmap 来进行设置的。他自身就可以设置fab:fab_icon就可以设置了

Material Design --FloatingAction