Material Design 组件之 FloatingActionButton

smartlion 发布于2019-06-25 12:48 / 2935人阅读

摘要：是类型的按钮控件，一般表现是浮动在上层的圆形图标，有自己的并可以设置锚点。有两种大小，分别是和，默认是，其大小可以通过属性来指定需要的大小，当然也可以设置为，系统会根据不同的屏幕选择合适的大小。

Material Design 设计规范在 Google I/O 2014 推出，这种设计理念一经推出就受到广大开发者的喜爱，主要侧重于纸墨化创作和突出设计的实体感，使得设计更接近于真实世界，力求平滑、连续的交互方式与用户体验，这种设计规范更能促进 Android 生态系统的发展，为此，Google 提供了一系列的符合 Material Design 风格的控件，如 FloatingActionButton、Snackbar、TabLayout 等。虽然经常在开发中用到，但是没有做记录，打算从头开始记录一下这些组件的使用，今天说一下 CoordinatorLayout 和 FloatingActionButton 相关的知识。

CoordinatorLayout

CoordinatorLayout 是一个加强版的 FramLayout，意味着如果不加任何限制，在 CoordinatorLayout 里面的子 View 都会默认出现在左上角，CoordinatorLayout 有两个主要的使用方式：

作为应用的顶层布局

作为与一个或多个子 View 交互的容器

可为 CoordinatorLayout 里面的子 View 指定 Behavior，就在单个父布局中提供许多不同的交互效果，子 View 之间也可以相互交互，CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 注解来指定子 View 的默认行为，总之，可以借助 CoordinatorLayout 实现不同的滚动效果。

FloatingActionButton

FloatingActionButton 是 Material Design 类型的按钮控件，一般表现是浮动在 UI 上层的圆形图标，有自己的 behavior 并可以设置锚点。

FloatingActionButton 有两种大小，分别是 normal(56dp) 和 mini(40dp) ，默认是 mini(40dp)，其大小可以通过属性 fabSize 来指定需要的大小，当然也可以设置 fabSize 为 auto，系统会根据不同的屏幕选择合适的大小。

FloatingActionButton 间接继承 ImageView，可以使用如下方式在代码中设置图标：

//设置图标
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);

FloatingActionButton 的背景颜色默认是主题的 colorAccent 表示的值，在代码中可以通过如下方式修改 FloatingActionButton 的背景颜色，具体如下：

//设置背景颜色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));

可以通过如下方式设置 FloatingActionButton 的大小，具体如下：

//设置大小
fab.setSize(FloatingActionButton.SIZE_MINI);

那么，如何自定义 FloatingActionButton 的大小呢，可以从 FloatingActionButton 部分源码中看到决定其大小的尺寸是定义到 dimens 文件中的，具体由 design_fab_size_mini 和 design_fab_size_normal 来决定，部分代码如下：

//源码
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 = res.getConfiguration().screenWidthDp;
            final int height = res.getConfiguration().screenHeightDp;
            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);
    }
}

所以只需要创建 dimens 文件夹，在里面重新设置 design_fab_size_mini 和 design_fab_size_normal 的值即可自定义 FloatingActionButton 的大小了，具体如下：

/**dimens.xml**/


    20dp
    100dp

当然 FloatingActionButton 间接继承 ImageView，ImageView 的一些属性肯定可以使用，这里就不在说了。

FloatingActionButton 的属性

下面是一些常用的属性，具体如下：

android:src             //设置图标(24dp)
app:backgroundTint      //设置图标背景颜色。  
app:rippleColor         //设置点击时水波纹颜色  
app:elevation           //设置阴影大小
app:fabSize             //设置大小 
app:pressedTranslationZ //按下时距离Z轴的距离  
app:layout_anchor       //设置锚点  
app:layout_anchorGravity//设置相对锚点的位置

关于属性，了解一下，具体使用时设置后观察效果不失为一种直观的学习方式。

简单使用

总觉得做笔记还是有效果图比较好，那就简单使用 CoordinatorLayout 和 FloatingActionButton 看一下具体效果，布局如下：

然后在设置 FloatingActionButton 的点击事件，具体如下：

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"我是Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SampleActivity.this, "取消", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

先来一张效果图，具体如下：

可知 FloatingActionButton 会自动给 Snackbar 留出位置，避免 Snackbar 弹出时遮挡 FloatingActionButton，因为在 FloatingActionButton 内部已经实现了使用 Snackbar 对应的 Behavior，CoordinatorLayout 会根据对应的 Behavior 的具体表现自动调整子 View 的位置，这里当然是 FloatingActionButton 的位置，可以试一试将根布局设置为 RelativeLayout 等，当然，此时 Snackbar 弹出时会遮挡 FloatingActionButton，顾名思义 CoordinatorLayout 就是协调布局，关于 Behavior 这部分留到后面整理。

可以选择关注微信公众号：jzman-blog 获取最新更新，一起交流学习!

专线服务云服务器 material-design material-design-lite FloatingActionButton Material

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14946.html

Material Design 组件之NavigationView

摘要：原文首发于微信公众号，欢迎关注交流系列文章组件之组件之组件之今天来看一下的使用，是一个标准的导航菜单，其菜单内容由菜单资源文件来填充，一般和一起搭配使用构成抽屉菜单，分别由内容页和菜单页组成。原文首发于微信公众号：jzman-blog，欢迎关注交流！ Material Design 系列文章： Material Design组件之FloatingActionButton Mater...

rottengeek 2019-06-25 12:48 评论0 收藏0
Android Material Design系列之FloatingActionButton和Sna

摘要：今天主讲的系列的两个控件都不难，所以一起讲了，分别是和。之所以出现这么久了，不太火，不太常用，估计跟他悬浮有关，容易挡住其他内容。那我们现在就研究改如何在滑动列表时隐藏和显示这个悬浮按钮。其实也非常简单，和修改样式的过程差不多。今天主讲的Material Design系列的两个控件都不难，所以一起讲了，分别是FloatingActionButton和Snackbar。这个系列都是主讲...

iKcamp 2019-08-14 14:10 评论0 收藏0
Android Material Design系列之FloatingActionButton和Sna

摘要：今天主讲的系列的两个控件都不难，所以一起讲了，分别是和。之所以出现这么久了，不太火，不太常用，估计跟他悬浮有关，容易挡住其他内容。那我们现在就研究改如何在滑动列表时隐藏和显示这个悬浮按钮。其实也非常简单，和修改样式的过程差不多。今天主讲的Material Design系列的两个控件都不难，所以一起讲了，分别是FloatingActionButton和Snackbar。这个系列都是主讲...

LeoHsiun 2019-06-25 15:26 评论0 收藏0
Android Material Design系列之FloatingActionButton和Sna

摘要：今天主讲的系列的两个控件都不难，所以一起讲了，分别是和。之所以出现这么久了，不太火，不太常用，估计跟他悬浮有关，容易挡住其他内容。那我们现在就研究改如何在滑动列表时隐藏和显示这个悬浮按钮。其实也非常简单，和修改样式的过程差不多。今天主讲的Material Design系列的两个控件都不难，所以一起讲了，分别是FloatingActionButton和Snackbar。这个系列都是主讲...

shery 2019-06-24 19:34 评论0 收藏0
Material Design 组件之 CollapsingToolbarLayout

摘要：主要用于实现一个可折叠的标题栏，一般作为的子来使用，下面总结一下的使用。有两个值可以选择，如果设置了的会随着页面向上滚动固定到顶部，如果设置了的会随着页面的滚动而滚动，此时可以结合另一个属性形成视差滚动的效果。 CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏，一般作为 AppBarLayout 的子 View 来使用，下面总结一下 CollapsingT...

BoYang 2019-06-25 12:48 评论0 收藏0