四、FloatingActoinButton

一、概述

首先看下继承关系

FloatingActionButton继承关系.png

二、基础使用

本质是一个ImageButton，只是比ImageButton多了点属性，具体多的属性请看下面介绍：

• 1.adnroid：src FAB中显示在中间的图片背景；
• 2.app:backgroundTint 设置FAB的整体背景，如果没有设置，默认会取theme中的colorAccent作为背景色；
• 3.app:fabSize 设置FAB的大小，可选的值有三个；
• 1 .mini
• 2 .normal
• 3 .auto：mini和normal都设置了固定的大小，具体的看下面的源码；而auto属性会根据屏幕原有的宽度来动态设置，在小屏幕上会使用mini，在大屏幕上使用normal，我们也可以通过layout_width和layout_height指定其大小；具体的大小屏幕标准看源码中以470dp为分界线；

  /**
     * The switch point for the largest screen edge where SIZE_AUTO switches from mini to normal.
     */
    private static final int AUTO_MINI_LARGEST_SCREEN_WIDTH = 470;
 private int getSizeDimension(@Size final int size) {
        final Resources res = getResources();
        switch (size) {
            case SIZE_AUTO:
                // If we're set to auto, grab the size from resources and refresh
                final int width = ConfigurationHelper.getScreenWidthDp(res);
                final int height = ConfigurationHelper.getScreenHeightDp(res);
                return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
                        ? getSizeDimension(SIZE_MINI)
                        : getSizeDimension(SIZE_NORMAL);
            case SIZE_MINI:
                return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
            case SIZE_NORMAL:
            default:
                return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
        }
    }

• 4.app:elevation FAB在z轴方向的距离，也就是海拔深度，实际效果就是阴影效果；
• 5.app:borderWidth Fab边界的宽度，边界的颜色会比背景颜色稍淡，如下图所示；
• 6.app:pressedTranslationZ 点击Fab在Z轴上的变化值；
• 7.app:rippleColor 点击Fab时出现水波纹扩散的效果;
• 8.app:layout_anchor 设置锚点，也就是设置相对那个控件id来进行变化；
• 9.app:layout_anchorGravity 设置在锚点上的相对位置；
• 10.app:useCompatPadding 兼容padding可用；

图解说明.png

具体在xml中的使用方式如下：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/activity_float_action_button_fab"
        app:elevation="10dp"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:borderWidth="10dp"
        android:layout_margin="12dp"
        app:layout_anchorGravity="bottom|end"
        android:src="@mipmap/ic_launcher_round"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/fab_appbar"
        android:layout_height="wrap_content" />

三、Fab的监听回调

具体使用看下面代码:

/**
         * 在代码中动态设置Fab的隐藏和显示，并且能够
         * 监听Fab的隐藏和显示的状态变化；
         */
        mFab.show(new FloatingActionButton.OnVisibilityChangedListener() {
            @Override
            public void onShown(FloatingActionButton fab) {
                super.onShown(fab);
            }
        });

        mFab.hide(new FloatingActionButton.OnVisibilityChangedListener() {
            @Override
            public void onHidden(FloatingActionButton fab) {
                super.onHidden(fab);
            }
        });
        
        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });

四、使用时注意事项

在使用Fab与BottomSheet联合使用时，发现如果使用include标签将bottomSheet的菜单布局引入，无法设置给include标签设置id，一旦设置id就会crash，要想正常使用，直接将菜单布局写出，不是将其引入；

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.BottomDialogActivity">

    <!--底部菜单布局-->

    <!--LinearLayout底部布局菜单  include布局中不能添加id 否则就会报setLayoutParameter异常-->
    <include layout="@layout/layout_bottom_sheet_linear" />
     <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        app:backgroundTint="@color/colorPrimary"
        app:borderWidth="10dp"
        app:layout_anchorGravity="end"
        app:elevation="10dp"
        app:fabSize="auto"
        app:pressedTranslationZ="10dp" />
       
</android.support.design.widget.CoordinatorLayout>

github仓库

相关内容：

一、CoordinatorLayout的梳理与使用

二、Toolbar的梳理与使用

三、TextInputLayout的梳理与使用

四、FloatingActionButton的梳理与使用

五、Snackbar的梳理与使用

六、CardView的梳理与使用

七、BottomSheetDialog的梳理与使用

八、TabLayout的梳理与使用