FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性。

CoordinatorLayout能够用来配合FloatingActionButton浮动button。设置app:layout_anchor和app:layout_anchorGravity构建出特定的位置与效果的FloatingActionButton。

我们来看看怎么使用FloatingActionButton吧:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@mipmap/icon"
app:backgroundTint="#30469b"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchor="@id/coordinator_layout"
app:layout_anchorGravity="bottom|right"
app:pressedTranslationZ="12dp"
app:rippleColor="#a6a6a6" />

各个属性的意思:

  • app:backgroundTint - 设置FAB的背景颜色。

  • app:rippleColor - 设置FAB点击时的背景颜色。
  • app:borderWidth -
    该属性尤为重要。假设不设置0dp。那么在4.1的sdk上FAB会显示为正方形。并且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。
  • app:elevation - 默认状态下FAB的阴影大小。
  • app:pressedTranslationZ - 点击时候FAB的阴影大小。

  • app:fabSize - 设置FAB的大小,该属性有两个值,分别为normal和mini,相应的FAB大小分别为56dp和40dp。
  • src - 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。

  • app:layout_anchor - 设置FAB的锚点,即以哪个控件为參照点设置位置。

  • app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。

这样设置后,就能够在屏幕右下角创建出一个FloatingActionButton了。

如:

普通情况下。FAB与Snackbar配合使用时候会出现Snackbar遮住FAB:如:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

为了解决问题,我们把Snackbar.make(View view,,).show();的第一个參数View设置为CoordinatorLayout,即:

//把mCoordinatorLayout传给Snackbar
Snackbar.make(mCoordinatorLayout, "Snackbar", Snackbar.LENGTH_SHORT).show();

这样CoordinatorLayout就能够协调各个View之间的动画效果。效果就变为了:

即Snackbar不会遮挡FAB的显示了,当Snackbar出现时FAB会自己主动上移。

当然FAB的点击事件也是通过setOnClickListener()设置就可以。

我们再看一个效果:

这个效果事实上就是通过改变FAB的Layout_anchor和layout_anchorGravity来实现的,看看布局就明确了:

<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=".MainActivity"> <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/bg"
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/icon"
app:backgroundTint="#30469b"
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>

源代码地址:http://download.csdn.net/detail/u010687392/8913513

Material Design之FloatingActionButton的使用的更多相关文章

  1. Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

    如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...

  2. Material Design学习-----FloatingActionButton

    FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...

  3. Material Design 组件之 FloatingActionButton

    Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,力求平滑 ...

  4. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  5. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  6. 官方 Material Design App

    [转]MaterialDesignCenter 发表回复 转: https://github.com/lightSky/MaterialDesignCenter MaterialDesignCente ...

  7. Android Material Design简单使用

    吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...

  8. Android Material Design NavigationView 及 Palette 颜色提取器

    DrawerLayout + NavigationView DrawerLayout布局,通常在里面添加两个子控件,程序主界面添加到NavitagionView前面. <android.supp ...

  9. Material Design 开发利器:Android Design Support Library 介绍

    转自:https://blog.leancloud.cn/3306/ Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是因为 material design —— 这是 ...

随机推荐

  1. CreateThread简单那多线程编程

    CreateThread简单那多线程编程 作者:vpoet mail:vpoet_sir@163.com 在进行多任务处理的时候我们往往会用到多线程技术,多线程理论上是多个线程同事处理不同的工作,但是 ...

  2. ZOJ3414Trail Walk(计算几何)

    Trail Walk Time Limit: 2 Seconds      Memory Limit: 65536 KB FatMouse is busy organizing the coming ...

  3. #include<string.h>

    #include<string.h> 1 strcpy #include <string.h> char *strcpy(char *str1, const char *str ...

  4. RequireJs运行原理

    在require中,根据AMD(Asynchronous Module Definition)的思想,即异步模块加载机制,其思想就是把代码分为一个一个的模块来分块加载,这样无疑可以提高代码的重用. 在 ...

  5. 小谈@override

    @override是jdk1.5增加的注解,主要是用来声明子类的某方法覆盖了父类的某方法.非常简单的注解,但是有个小问题: 项目最开始使用的是jdk1.6,mvc模式:接口 ----> 实现类. ...

  6. 沃通tomcat jks 安装配置

    废话不多说上代码: <Connector port="443" protocol="org.apache.coyote.http11.Http11NioProtoc ...

  7. jdbc select

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  8. 关于jquery对象和DOM对象的区别

    这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...

  9. Android系统信息

    前提:获取的都是AndroidMainfest.xml下的信息 一.PackageManager 负责管理所有已安装的App 二.ActivityInfo 封装了Mainifest中的<acti ...

  10. HTML中发送方式(method)中get和post的比较

    get的方式是将表单控件的控件名name和取值value信息经过编码后,通过URL发送(可以在地址栏里看到).而post则将表单的内容通过http发送.一个 get通过URL传送变量,能传送的数据总量 ...