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. python选择排序实现与C选择排序实现

    python代码: #coding=utf-8 if __name__=="__main__": arr=[3,2,1,7,11,4,5,8] print "Before ...

  2. Number of Containers(数学) 分类: 数学 2015-07-07 23:42 1人阅读 评论(0) 收藏

    Number of Containers Time Limit: 1 Second Memory Limit: 32768 KB For two integers m and k, k is said ...

  3. NSNotificationCenter 传对象

    [[NSNotificationCenter defaultCenter] postNotificationName:@"postCity" object:pro]; [[NSNo ...

  4. Android日语输入法Simeji使用示例

    MainActivity如下: package cn.testsimeji; import android.os.Bundle; import android.view.View; import an ...

  5. Android清理内存

    Android内存清理,利用ActivityManager获取当前正在运行的进程,清理这些进程释放内存. 可以根据importance的不同来判断前台或后台RunningAppProcessInfo ...

  6. Spring整合Hibernate 一 - 注入SessionFactory

    Spring3 整合 Hibernate4 - 注入SessionFactory 版本: spring-framework-3.2.4.RELEASE hibernate-release-4.2.5. ...

  7. c# 调用EXCEL在VS上能正常运行,部署在IIS上不能实现,在VS中运行页面和发布之后在IIS中运行的区别

    发现一篇文章,很好,解决了这个问题:感谢原博主!特此做个笔记. 地址:http://www.cnblogs.com/zhongxinWang/p/3275154.html 发布在IIS上的Web程序, ...

  8. javascript 高级程序设计学习笔记(面向对象的程序设计)继承

    ECMAScript中描述了原型链的概念,原型链是实现继承的主要方法. 实现原型链继承有一种基本模式 function SuperType () { this.property = true; } S ...

  9. Spring-----8、深入理解容器中的bean

    转载自:http://blog.csdn.net/hekewangzi/article/details/45648687

  10. U - stl 的 优先队列 Ⅰ

    Description Given m sequences, each contains n non-negative integer. Now we may select one number fr ...