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的例子。
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
