Floating Action Button 简单使用

导读

本文将介绍Materia_Design控件,FAB(Floating Action Button)的简单使用,以及在日常使用可能遇到的坑

控件简介

• Floating Action Button 继承于 ImageButton,ImageButton 继承于 ImageView

• 因此FAB可以使用所有父类的属性,如可以通过setImageDrawable（Drawable）控制显示的icon

• Floating Action Button 用于特殊类型的点击动作.它是浮动在UI上面的圆圈图标,并具有与变形,启动和转移锚点相关的特殊运动行为.

• 如果需要执行持久性和随时可用的操作,可使用FAB按钮或Persistent footer buttons(持久性页脚按钮)

控件私有属性说明

属性	说明
app:backgroundTint	设置FAB默认的背景颜色,默认跟随主题的colorAccent属性(优先级>默认主题)
app:backgroundTintMode	src_atop,src_in,src_over,multipy和screen 四种Mode
app:borderWidth	设置FAB的边框宽度
app:elevation	设置FAB未按下的阴影
app:pressedTranslationZ	设置FAB按下时的阴影,建议数值大于elevation
app:fabSize	设置FAB的大小,有auto,norma和mini三种
app:rippleColor	设置FAB按下时的背景色
app:useCompatPadding	设置FAB的内边距(不建议使用)

控件使用说明

准备工作

在build.gradle文件,添加依赖库

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:design:25.3.1'

xml静态使用

        
        
        
        
        
        
        
        

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_xml"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:layout_margin="10dp"
            android:clickable="true"
            android:src="@android:drawable/ic_input_add"
            android:theme="@style/MyFABButton"
            app:backgroundTint="@color/colorYellow"
            app:backgroundTintMode="src_atop"
            app:borderWidth="5dp"
            app:elevation="10dp"
            app:fabSize="normal"
            app:pressedTranslationZ="20dp"
            app:rippleColor="@color/colorBlue"
            app:useCompatPadding="true"
            />

代码动态使用

在Activity类,findViewById 找到Floating Action Button组件,然后设置相应的属性即可(没标的代表没这个方法)

        
        mFab.setBackgroundTintList(ColorStateList.valueOf(Color.RED));

        
        mFab.setBackgroundTintMode(PorterDuff.Mode.SRC_ATOP);

        
        mFab.setCompatElevation(float); 或 mFab.setElevation(float);  为了兼容性,建议使用前者

        
        mFab.setUseCompatPadding(boolean);

        
        mFab.setRippleColor(Color.BLUE);

        
        mFab.setSize(FloatingActionButton.SIZE_AUTO);

        
        //mFab.hide(mOnVisibilityChangedListener);
        mFab.show(mOnVisibilityChangedListener);

   /**
     * FAB 隐藏或显示监听事件
     */
    OnVisibilityChangedListener mOnVisibilityChangedListener = new OnVisibilityChangedListener() {
        public void onShown(FloatingActionButton fab) {
            Logger.i(TAG, "Fab show...");
        }

        @Override
        public void onHidden(FloatingActionButton fab) {
            Logger.i(TAG, "Fab hide...");
        }
    };

注意事项/爬坑(bug处理)

• FAB的背景颜色默认为主题Theme的colorAccent. 如果你希望在运行时更改背景颜色,那么你可以通过setBackgroundTintList(ColorStateList);

• FAB 的icon可以在xml文件设置src或代码设置setImageDrawble()

• 使用app:useCompatPadding 设置内边距(使用了该属性后,在点击FAB时,会形成一个正方形的影响效果,很丑,仅在5.0模拟器发现该问题,建议使用android:layout_margin调节控件边距)

• app:borderWidth :一定要设置为0dp,不然的话在API<21的设备上点击FAB会显示一个边缘,而且在5.0以后的设备没有阴影效果

• 如果设置app:borderWidth偏大,点击FAB时会出现一个方形阴影,严重影响美观

• 设置 android:layout_marginBottom 存在边缘显示问题

解决: API21+的版本统一定义底部与右边缘空白为 16dp , 以下版本统一设置为 0dp

values/dimens.xml
"fab_margin_right">0dp
"fab_margin_bottom">0dp


values-v21/dimens.xml
"fab_margin_right">16dp
"fab_margin_bottom">16dp


布局文件的 FAB 中，也设置相应的值：

...
    ...
    android:layout_marginBottom="@dimen/fab_margin_bottom"
    android:layout_marginRight="@dimen/fab_margin_right"/>

• FAB 的大小只能设置app:fabSize的几种模式,想自定义大小怎么办?

在design jar包查看源码,找到系统控件设置auto,norma和mini对应的dimens名称


    <dimen name="design_fab_size_normal" tools:override="true">40dpdimen>
    <dimen name="design_fab_image_size" tools:override="true">20dpdimen>

    注:
       tools:override="true" 表示覆盖系统已有的值。
      弊端:Google如果改动了属性名称,就失效了(建议直接用官方的,或者自定义控件)

• app:pressedTranslationZ只能在XML文件定义,有没其他方式定义?

和上述app:fabSize类似,找到对应的dimens名称

<dimen name="floatingactionbutton_pressedtranslationz" tools:override="true">10dpdimen>

总结

官方控件虽好,但如果不能满足开发需求,建议自定义控件实现自己的效果

本篇文章到此结束,欢迎关注,后续有补充的会即时更新,有问题也欢迎评论,共同成长