Android Material Design之FloatingActionButton

最新推荐文章于 2024-08-13 08:37:44 发布
最新推荐文章于 2024-08-13 08:37:44 发布
阅读量2k 收藏 1
点赞数
分类专栏： Android View 文章标签： android 设计 FAB Design MD5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32955807/article/details/53524799
版权

一、FloatingActionButton简介

FloatingActionButton是 Android design support library 中的另一个组件。

FloatingActionButton

public class FloatingActionButton
extends ImageButton
java.lang.Object
   ↳    android.view.View
       ↳    android.widget.ImageView
           ↳    android.widget.ImageButton
               ↳    android.support.design.widget.FloatingActionButton

是一个有3D效果的悬浮按钮，继承ImageView，所以FloatingActionButton有ImageView的全部属性，你也可以把它当做一个ImageView使用。

二、FloatingActionButton属性

app:elevation ···························································设置FAB未按下时的阴影大小
app:pressedTranslationZ·····································设置FAB按下时的阴影大小(需要设置事件才能开的效*果*)
app:fabSize································································设置FAB的大小，有normal、mini、auto
app:borderWidth ···················································设置FAB的边框宽度
android:src·································································设置FAB的drawaber
app:rippleColor························································设置FAB按下时的背景色(需要设置事件才能开的效果)
app:backgroundTint··············································设置FAB未按下时的背景色
app:layout_anchor··················································设置FAB的锚点及所依赖的View
app:layout_anchorGravity···································设置FAB相对于锚点的位置
app:layout_behavior··············································设置FAB的Behavior行为属性
app:backgroundTintMode··································设置渲染模式有multiply、screen、src_atop、src_in、src_over
app:useCompatPadding······································使能够兼容padding
app:layout_insetEdge···········································(后面研究)
app:layout_dodgeInsetEdges···························(后面研究)
app:layout_keyline················································(后面研究)

注意：

  • app:borderWidth :这个一般设置为0dp，不然的话在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果
  • app:rippleColor：当我使用com.android.support:design:23.2.0 的时候这个属性会失效，建议使用最新的 com.android.support:design:23.3.0’ 或者适当的降低版本
  • app:useCompatPadding:(后面研究)
  • app:layout_insetEdge:(后面研究)
  • app:layout_dodgeInsetEdges:(后面研究)
  • app:layout_keyline:(后面研究)

三、FloatingActionButton简单使用

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|top"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="10dp"
            android:src="@mipmap/ic_launcher"
            app:backgroundTint="@color/colorAccent"
            app:borderWidth="0dp"
            app:elevation="20dp"
            app:pressedTranslationZ="20dp"
            app:rippleColor="@color/colorPrimary" />

设置不同的backgroundTint、elevation、pressedTranslationZ属性的效果图如下
效果图

四、FloatingActionButton与SnackBar

当SnackBar出现的时候FloatingActionButton会自动留出显示区域给SnackBar

FloatingActionButton与SnackBar

实现方式一:设置FAB的点击事件

 floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "FloatingActionButton", Snackbar.LENGTH_SHORT).show();
            }
        });

实现方式二：Snackbar的容器使用CoordinatorLayout

 Snackbar.make(coordinatorLayout, "FloatingActionButton", Snackbar.LENGTH_SHORT).show();

五、FloatingActionButton与RecyclerView

就是实现向上滑动列表的时候隐藏FAB，实现向下滑动的时候显示FAB，下面的效果图可能看不出来，将就一下。。。。
效果

看过源码就应该知道FAB有个内部类Behavior ，用来控制FAB的行为，但是系统自带只支持AppBarLayout改变的效果，所以我们需要自己重新Behavior 

java.lang.Object
   ↳    android.support.design.widget.CoordinatorLayout.Behavior<android.support.design.widget.FloatingActionButton>
       ↳    android.support.design.widget.FloatingActionButton.Behavior

自定义的Behavior 

public class ScrollBehavior extends FloatingActionButton.Behavior {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    private boolean mIsAnimatingOut = false;

    public ScrollBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // 确定是在垂直方向上滑动
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
            // 不显示FAB
            animateOut(child);
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // 显示FAB
            animateIn(child);
        }
    }

    // 定义滑动时的属性动画效果
    private void animateOut(final FloatingActionButton button) {
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
                    .setListener(new ViewPropertyAnimatorListener() {
                        public void onAnimationStart(View view) {
                            ScrollBehavior.this.mIsAnimatingOut = true;
                        }

                        public void onAnimationCancel(View view) {
                            ScrollBehavior.this.mIsAnimatingOut = false;
                        }

                        public void onAnimationEnd(View view) {
                            ScrollBehavior.this.mIsAnimatingOut = false;
                            view.setVisibility(View.GONE);
                        }
                    }).start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
            anim.setInterpolator(INTERPOLATOR);
            anim.setDuration(200L);
            anim.setAnimationListener(new Animation.AnimationListener() {
                public void onAnimationStart(Animation animation) {
                    ScrollBehavior.this.mIsAnimatingOut = true;
                }

                public void onAnimationEnd(Animation animation) {
                    ScrollBehavior.this.mIsAnimatingOut = false;
                    button.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(final Animation animation) {
                }
            });
            button.startAnimation(anim);
        }
    }

    private void animateIn(FloatingActionButton button) {
        button.setVisibility(View.VISIBLE);
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
                    .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
                    .start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
            anim.setDuration(200L);
            anim.setInterpolator(INTERPOLATOR);
            button.startAnimation(anim);
        }
    }
}

然后在xml中设置layout_behavior属性为我们自己写的就可以实现了

六、FloatingActionButton与AppBarLayout

借助FloatingActionButton的layout_anchor、ayout_anchorGravity属性设置FAB的位置
这里写图片描述

布局代码

<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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="@color/colorAccent"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/collapsingToolbarLayout"
        app:layout_anchorGravity="bottom|center"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#a6a6a6" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

这里用到的CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar后面文章会介绍

总结

FloatingActionButton是一个比较简单的控件，只要掌握几个常用属性就好了

项目源码

https://github.com/Yi520153/DesignFloatingActionButton

参考资料

http://www.tuicool.com/articles/u2aauiQ

http://blog.csdn.net/codenoodles/article/details/50898837

http://www.woshipm.com/ucd/166400.html

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1028/1857.html

http://blog.csdn.net/lmj623565791/article/details/46678867

http://blog.csdn.net/wei_smile/article/details/51375170

键盘書生
关注
专栏目录
Android：Material Design之FloatingActionButton使用
a526001650a的专栏
12-07 707
Android：Material Design之FloatingActionButton使用
Material Design之一：FloatingActionButton
lixpjita39的专栏
04-29 540
FloatingActionButton是Android 5.0 新特性Material Design中一个简单的控件，它是有ImageButton扩展而来。 一.使用方法很简单，只需添加如下布局： <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content
一个自由定制的Material Design风格FloatingActionButton
05-05
是一个可折叠菜单式的FloatingActionButton
Material Design 组件之 FloatingActionButton
weixin_33827965的博客
07-15 158
Material Design 设计规范在 Google I/O 2014 推出，这种设计理念一经推出就受到广大开发者的喜爱，主要侧重于纸墨化创作和突出设计的实体感，使得设计更接近于真实世界，力求平滑、连续的交互方式与用户体验，这种设计规范更能促进 Android 生态系统的发展，为此，Google 提供了一系列的符合 Material Design...
开源项目 FloatingButton 使用教程
最新发布
gitblog_00491的博客
08-13 919
开源项目 FloatingButton 使用教程 FloatingButtonEasily customizable floating button menu created with SwiftUI项目地址:https://gitcode.com/gh_mirrors/fl/FloatingButton 项目介绍 FloatingButton 是一个开源项目，旨在为开发者提供一个易于使用的浮动...
Android Material Design控件之FloatingActionButton
LinWeiJ的博客
11-20 643
FloatingActionButton,悬浮按钮,一种md风格的button,常出现在页面右下角, - app:layout_anchor 锚点,设置'父布局' 这里为AppBarLayout, - 将跟随AppBarLayout折叠消失,展开显示. - app:layout_anchorGravity 相对于锚点布局的位置
Material Design学习之 Button（详细分析，传说中的水滴动画）
weixin_33736832的博客
01-21 229
转载请注明出处：王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门：http://blog.csdn.net/ddwhan0123/article/details/50541561 这一片来具体学习下里面的内容，这篇分为两部分一部分是原理分析，一部分是代码分析。 先简要的介绍一些理论知识，顺便温顾下基础知...
Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用
s1e1s的专栏
09-22 577
【转载请注明出处：http://blog.csdn.net/feiduclear_up/article/details/46500865 CSDN 废墟的树】 在前不久的谷歌2015 I/O大会上，发布了Android新版本M，貌似从这个版本开始Android不在以数字命名版本了。 在这次的I/O大会上谷歌对Android并没有很大的改变，主要是修改完善之前Android L版
android-materialdesign-floatingactionbutton
07-11
Android喜欢浮动操作按钮，它对列表视图滚动事件做出React。 列表视图向上滚动时可见，向下滚动时不可见。 演示 一体化 1）作为依赖添加到你的build.gradle ： dependencies { compile ' ...
Android悬浮菜单按钮FloatingActionButton实例
04-14
在Android Material Design规范中，`FloatingActionButton`是核心组件之一，用于鼓励用户执行关键动作，比如添加新项目或启动导航。 本实例提供的`FloatingActionButton`是一个可以直接集成到你的项目中的代码示例...
Android开发MaterialDesign设计风格UI示例演示集
06-01
在Android开发中，Material Design已经成为主流的UI设计风格，它通过丰富的动画效果、层次分明的布局以及鲜明的颜色搭配，使得应用界面更加美观且易用。本示例演示集就是针对Android开发者，展示如何在自己的应用中...
Android 中FloatingActionButton(悬浮按钮)实例详解
08-30
主要介绍了Android 中FloatingActionButton(悬浮按钮)实例详解的相关资料,需要的朋友可以参考下
FloatingActionButton的使用
07-19
Google提供的Design Library中FloatingActionButton的使用。 和配合Snackbar的使用
基于 Floating Button 实现的菜单展开效果，做的非常棒！.zip
10-10
基于 Floating Button 实现的菜单展开效果，做的非常棒！.zip,显示定位导航视图的简单浮动操作按钮
android-material-design
11-21
Android Material Design 是谷歌推出的一种设计语言，旨在提供一套统一、美观且富有表现力的界面设计规范，用于Android应用开发。这种设计风格强调层次感、动效和颜色的使用，为用户带来更直观、更具反馈的交互体验...
Android Material Design之FloatingActionButton（悬浮按钮）
云上道人的博客
03-29 4257
1.概述 里面设计是Material Design中重要的思想。FloatingActionButton不属于平面的一部分，而是位于另外一个维度，看起来就是一种悬浮的感觉。 FloatingActionButton是Design Support库汇中的一个控件，默认使用colorAccent来作为按钮的颜色，使用的话要引入依赖库，如下： compile ...
Android5.0之TextInputLayout、FloatingActionButton的使用
weixin_30563917的博客
05-03 77
TextInputLayout和FloatingActionButton都属于MD风格的控件，比起普通的EditText和Button、ImageButton，TextInputLayout和FloatingActionButton还是有很多炫酷的地方，今天我们就一起来看一下。1.TextInputLayoutTextInputLayout这个控件主要是配合EditText来使用的，以前在Ed...
Android Material Design 之悬浮按钮FloatingActionButton、提示工具SnackBar、CoordinatorLayout布局
LJW874362735的博客
09-18 593
悬浮按钮FloatingActionButton和提示工具SnackBar是Design Support提供的控件。 悬浮按钮FloatingActionButton及其点击事件： 悬浮按钮FloatingActionButton是不属于主界面平面上的控件，而是位于另一个维度，好像三维坐标上的Z轴。设置它的 app:elevation=""可以设置悬浮高度，值越大，悬浮高，投影大。同时也有...
FloatingActionButton
悟心的专栏
10-13 5691
FloatingActionButton（FAB）是 Android 5.0 新特性——Material Design中的一个控件。FloatingActionButton其实由3个单词组成, Floating:悬浮;Action:行为,Button:按钮。的确,FAB就是一个悬浮的按钮。 本文将结合笔者的开发经验,通过FAB的基本使用,使用过程中遇到的问题及解决方案等方面进行阐述,以便大家进一步认识FAB。 另外,本文若无特别说明,源码分析均采用27.1.0。 一.基本使用 1.FAB是Mater
Android Material Design应用构建教程：从Toolbar到实战
通过这个库，你可以轻松地实现像卡片（Cards）、抽屉菜单（DrawerLayout）、浮动动作按钮（FloatingActionButton）等Material Design元素，这些都是提升用户界面现代感的关键元素。 此外，Material Design还涉及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值