Material Design --FloatingActionButton

配置

使用android studio导入

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

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

Just add the dependency to your build.gradle:

1
2
3
dependencies {
compile 'com.getbase:floatingactionbutton:1.9.0'
}

使用:

在对应的布局xml,加入。

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

添加控件:

1
2
3
4
5
6
7
8
9
10
<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 DeisgnGithub地址,也有这个float button。而且通过eclipse导入,完美没有报错。接下来就用这个。

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

用的项目不同,那么使用也稍有区别:

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

加入控件

1
2
3
4
5
6
7
8
9
10
<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即可

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

  1. FloatingActionsMenu里面添加

    1
    fab:fab_labelStyle="@style/menu_labels_style"
  2. styles.xml添加(只需修改两个样式,一个是字体,另一个是背景)

    1
    2
    3
    4
    <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
    1
    2
    3
     Drawable getIconDrawable() {
    final RotatingDrawable rotatingDrawable = new RotatingDrawable(super.getIconDrawable());
    }

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

  1. 接下来就是对AddFloatingActionButton进行研究,发现方法:getIconDrawable()正是进行划出了
    1
    2
    3
    4
    5
    6
    7
    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将图片画进去。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*
    * final int resIcon 进行传递资源
    */

    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;
    }
  3. 在类FloatingActionsMenu添加一个属性,专门得到图片的资源

    1
    private int mResIcon=-1;
  4. 然后再方法:getIconDrawable()进行修改,将

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

改成

1
2
3
4
5
6
7
RotatingDrawable rotatingDrawable;
if(mResIcon!=-1){
rotatingDrawable = new RotatingDrawable(getBitmapDrawable(mResIcon));
}
else{
rotatingDrawable = new RotatingDrawable(super.getIconDrawable());
}

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

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

    1
    2
    3
    <declare-styleable name="FloatingActionsMenu">
    <attr name="fab_bitmap" format="reference"/>
    </declare-styleable>
  2. 在类FloatingActionsMenu的方法init(Context context, AttributeSet attributeSet)加入

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

设置完成

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

默认为135

  1. 我们需要提供相应的xml的属性,我们在res/values/attrs.xml加入
    1
    2
    3
    4
    5
    <declare-styleable name="FloatingActionsMenu">
    <attr name="fab_rotation" format="float"/>
    </declare-styleable>
    ```
    2. 在类`FloatingActionsMenu`加入以下属性,并进行赋值

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

1
并通过`get`或`set`进行修改,导致可以通过动态进行修改

public float getRotate() {
return rotate;
}

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

1
3. 在类`FloatingActionsMenu`里`init()`添

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

1
2
4. 最后在有`EXPANDED_PLUS_ROTATION `的地方,进行替换成`getRotate()`即可。
5. 在`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 源码解析