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

最新文章

  1. STL中algorithm里的查找
  2. 解决微信浏览器无法使用reload()刷新页面
  3. LeetCode()Substring with Concatenation of All Words 为什么我的超时呢?找不到原因了!!!
  4. 开源项目ets_cache分析
  5. iOS CGContextRef 画图小结
  6. 如何重载浏览器 onload 事件后加载的资源文件
  7. BZOJ 1854: [Scoi2010]游戏( 二分图最大匹配 )
  8. MySQL的索引创建、删除
  9. activeMQ的安装
  10. 如何将本地项目上传到Github
  11. VS插件File Nesting
  12. poj1733(并查集+离散化)
  13. BZOJ1880或洛谷2149 [SDOI2009]Elaxia的路线
  14. 施工测量中Cad一些非常有用的插件
  15. (一)apache atlas源代码编译与打包
  16. Oracle_PL/SQL(8) 动态sql
  17. Python 生成器的使用(yield)
  18. HDU 4813 Hard Code(水题,2013年长春现场赛A题)
  19. poj3264 balanced lineup【线段树】
  20. 代码查看php是否已开启rewrite功能模块

热门文章

  1. What is NicEdit?
  2. Python 自动化脚本学习(三)
  3. LoadRunner性能测试中Controller场景创建需注意的几点
  4. Kali下使用libheap
  5. resolv.conf 是什么
  6. 【转】获取CID 和 LAC的方法
  7. js编码规范
  8. 自写AES加密解密工具类
  9. android:padding和android:margin的区别
  10. php中Maximum execution time of 120 seconds exceeded时间超时错误解决方案