Android修行手册 - FloatingActionButton全解

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

大佬（×）

新手（√）

👉实践过程

😜初识

FloatingActionButton简称FAB，从字面意思理解她是悬浮的按钮。她是从5.0开始，Material Design设计中的其中一个。

使用的话需要，项目的build.gradle里面带有支持库，版本号随时变化

implementation 'com.google.android.material:material:1.3.0'

如果你是用较新版本Android Studio创建的项目，默认应该是存在的，否则需要自己配置。

先简单看一下使用

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_xin_no" />

从上图可以看出默认情况下有个背景颜色，且有阴影效果，点击后有涟漪的效果【rippleColor】，并且阴影效果增大。

那么她是怎么实现的呢？

如果你没设置，背景颜色默认使用的是属性文件【style.xml】中的【colorAccent】或【colorSecondary】属性

在这普及下PrimaryColor、SecondaryColor、AccentColor的区别

• PrimaryColor：为主题颜色。也就是app的主要颜色，即整个屏幕和所有控件的主要颜色，首选颜色，不同主题颜色不同。
• SecondaryColor：二级颜色也是提示性颜色。这颜色一般比PrimaryColor亮一些或暗一些，取决于白天模式还是黑暗模式。一般用于提示相关动作或信息，提示性颜色。
• AccentColor：辅助色这个也称为交互性颜色。这颜色一般用于交互性的控件颜色

😜基本属性

• 【android:src】：显示的图标，不要太大
• 【app:backgroundTint】：默认情况的背景颜色
• 【app:rippleColor】：按下状态的背景颜色
• 【app:elevation】：默认状态底部的阴影大小（默认6dp）
• 【app:pressedTranslationZ】：按下状态的阴影大小（默认12dp）
• 【app:borderWidth】：边框的宽度
• 【app:layout_anchor】：该属性需要父布局为【CoordinatorLayout】，设置FAB的锚点，即以哪个控件为参照设置位置，可结合其他控件使用，有限制
• 【app:layout_anchorGravity】：该属性需要父布局为【CoordinatorLayout】，FAB相对于锚点的对齐位置
• 【app:fabSize】：浮动按钮大小normal或mini，内置的常用两个尺寸56dp和40dp

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:src="@mipmap/icon_xin_no"
        app:fabSize="normal"
        app:pressedTranslationZ="18dp"
        android:foregroundGravity="center"
        app:rippleColor="#ff0000" />

当添加了【backgroundTint】后运行你会发现有个边框的效果，可以使用【app:borderWidth=“0dp”】来解决，或者你想更宽一些都可以。

要想中间图片居中，【layout_width】和【layout_height】都为【wrap_content】，自定义设置【app:fabCustomSize】即可定义大小。

😜点击事件

和普通按钮一样。

setOnClickListener-点击事件

setOnLongClickListener-长按事件

😜和SnackBar的故事

SnackBar是material design风格中的另一个控件,它和Toast很相似。但又有明确的区分，不要将 Snackbar 和Toast 混谈，应用场景也不同，Toast 仅仅只是一闪而过的提示，用户并不能进行操作，而 Snackbar 却不一样，它允许在提示当中加入一个交互操作，当用户点击的时候可以进行额外的逻辑操作，提升了用户体验。

当SnackBar和FloatingActionButton两个控件结合使用的可以产生很好的联合动效：Snackbar 从底部弹出的时候FlaotingActionButton 也会上跑，反之亦然。

Snackbar 需要配合CoordinatorLayout使用。

FloatingActionButton floatingButton = findViewById(R.id.floatingButton);
floatingButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(coordinatorLayout,"展示Snackbar",Snackbar.LENGTH_SHORT).setAction("关闭", v1 -> {
            Log.d("TAG", "点击了关闭");
        }).show();
    }
});

👉其他

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。