Material Design --FloatingActionButton实战

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
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。
  3. 接下来就是对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进行画出充满的矩形。形成一个十字。
  4. 找到后的第一感觉就是进行继承相应的类，然后进行重写相应的方法。即：getIconDrawable()方法。但是原作者既然使用默认的修饰符，而不是public，这样的情况，只有当前包的类才能进行重写该方法，无解，只能自己去修改源代码。
  5. 在当前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;
  2. 然后再方法：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,默认是十字，但有图标的时候，进行改变。
  3. 相应的，我们需要提供相应的xml的属性，我们在res/values/attrs.xml加入 
    <declare-styleable name="FloatingActionsMenu">
     <attr name="fab_bitmap" format="reference"/>
</declare-styleable>
  4. 在类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>
  2. 在类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);
  2. 最后在有EXPANDED_PLUS_ROTATION的地方，进行替换成getRotate()即可。
  3. 在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 源码解析



文／Trity（简书作者）
原文链接：http://www.jianshu.com/p/d3e5b206a032
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
posted @ 2016-12-30 15:04  天涯海角路  阅读(234)  评论(0)    收藏  举报