Material Design --FloatingActionButton实战

2019年6月7日 260次阅读 来源: 肉团先生

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>

实战

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

《Material Design --FloatingActionButton实战》 Alt text

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

  1. 在FloatingActionsMenu里面添加
fab:fab_labelStyle="@style/menu_labels_style"
  1. 在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提供了解决问题的思路。顺着思路

  1. 我们必须先将源码进行clone下来。
  2. 接着找到默认的图标。很明显是画出来的。
    我们在类FloatingActionsMenu中的方法createAddButton中
 Drawable getIconDrawable() {
        final RotatingDrawable rotatingDrawable = new RotatingDrawable(super.getIconDrawable());
}

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

  1. 接下来就是对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进行画出充满的矩形。形成一个十字。

  1. 找到后的第一感觉就是进行继承相应的类，然后进行重写相应的方法。即：getIconDrawable()方法。但是原作者既然使用默认的修饰符，而不是public，这样的情况，只有当前包的类才能进行重写该方法，无解，只能自己去修改源代码。
  2. 在当前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;
}
  1. 在类FloatingActionsMenu添加一个属性，专门得到图片的资源
 private int mResIcon=-1;
  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,默认是十字，但有图标的时候，进行改变。

  1. 相应的，我们需要提供相应的xml的属性，我们在res/values/attrs.xml加入
<declare-styleable name="FloatingActionsMenu">
        <attr name="fab_bitmap" format="reference"/>
</declare-styleable>
  1. 在类FloatingActionsMenu的方法init(Context context, AttributeSet attributeSet)加入
mResIcon=attr.getResourceId(R.styleable.FloatingActionsMenu_fab_bitmap, -1);//得到图片资源，否则默认为-1

设置完成

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

默认为135。

  1. 我们需要提供相应的xml的属性，我们在res/values/attrs.xml加入
<declare-styleable name="FloatingActionsMenu">
<attr name="fab_rotation" format="float"/>
</declare-styleable>
  1. 在类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;
}
  1. 在类FloatingActionsMenu里的init()添加
rotate=attr.getFloat(R.styleable.FloatingActionsMenu_fab_rotation,EXPANDED_PLUS_ROTATION);
  1. 最后在有EXPANDED_PLUS_ROTATION的地方，进行替换成getRotate()即可。
  2. 在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 源码解析

    原文作者：肉团先生
    原文地址: https://www.jianshu.com/p/d3e5b206a032
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞