这篇文章和大家一起聊聊Android Design包中的FloatingActionButton控件(简称:FAB)。至此,Android Material Design系列的学习已进行到第三篇,大家可以点击以下链接查看之前的文章:

  • Android 一文告诉你到底是用Dialog,Snackbar,还是Toast
  • Android TabLayout 分分钟打造一个滑动标签页

Android FloatingActionButton 重要的操作不要太多,一个就好_第1张图片

FAB的用途简介和设计规范我就不碎碎念了,大家可以参考Google官网给出的介绍,相当详细,地址如下(记得哦):

https://material.google.com/components/buttons-floating-action-button.html#

在Google正式于Design包中提供FAB控件以前,GitHub上也有大牛贡献了有关FAB的开源项目,大家可以去搜搜看,这里给大家推荐几个Star量较高的项目:

  • futuresimple/android-floating-action-button

Android FloatingActionButton 重要的操作不要太多,一个就好_第2张图片

  • makovkastar/FloatingActionButton

Android FloatingActionButton 重要的操作不要太多,一个就好_第3张图片

  • Clans/FloatingActionButton

Android FloatingActionButton 重要的操作不要太多,一个就好_第4张图片

这几个FAB的开源项目各有特色,提供的功能也是非常强大,但与Google提出的有关FAB的设计规范多少还是有些出入。所以,大家可以根据自己的项目需求酌情使用,这里还是推荐使用Design包的官方系统控件,正宗而又地道,一起来看看它的使用细节吧。

.support.design.widget.FloatingActionButton        android:id="@+id/fab_add"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="@dimen/dp_16"        android:src="@mipmap/ic_toolbar_add"        android:clickable="true"        app:backgroundTint="@color/fab_ripple" />

FAB的xml属性需要通过自定义域名空间来使用,比如这里我使用了xmlns:app="http://schemas.android.com/apk/res-auto,大家可以自行查询系统提供的属性及其含义,这里我只罗列几个容易产生疑惑和出现问题的几个常见属性,避免大家走一些弯路。

  • app:backgroundTint=”@color/fab_ripple”
    默认的FAB按钮是红色的,通过这个属性我们可以修改FAB的背景色。但千万注意,这个属性的值是一个 ColorStateList 类型,如果你误用一个colors文件中定义的一个颜色值,在点击时将无法产生涟漪(ripple)交互效果。ColorStateList的定义可以参考官网介绍,定义好各种state下的颜色即可。

  • android:clickable=”true”
    当你使用了backgroundTint属性来改变系统的背景红色,一定要记得设置clickable属性为true,否则也是无法产生涟漪(ripple)交互效果的;

  • app:useCompatPadding=”true”
    虽然说,这个属性帮助开发者自适配FAB的内间距,以达到与屏幕四周保持一个合适的距离的目的,但是不建议大家使用这个属性。大家可以尝试一下,当你使用这个属性之后,在触摸FAB时,会形成一个正方形的阴影效果,影响用户体验。所以,我们可以使用android:layout_margin属性来控制FAB与其他控件之间的距离。

FAB的基础使用很简单,只要稍微注意上面几点即可。是不是以为这就结束了?那你就大错特错了。FAB配合着其他控件,能够做出一些非常炫酷的交互动画效果,比如:

Android FloatingActionButton 重要的操作不要太多,一个就好_第5张图片

Android FloatingActionButton 重要的操作不要太多,一个就好_第6张图片

FAB的精髓在于与CoordinatorLayout协调者布局中的使用。本文着重介绍FAB的基础使用,等后续介绍CoordinatorLayoutAppBarLayout控件时,再讲讲精髓部分。

示例源码


我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,Star地址:

https://github.com/Mike-bel/MDStudySamples

更多相关文章

  1. 学习:Android常用控件
  2. android中的timepick控件简单实用
  3. Android UI 与文本相关的控件
  4. ImageView图像控件之缩放和旋转
  5. android 操作命令

随机推荐

  1. android SELinux 问题解决-如何用工具生
  2. Android(安卓)day_09-02 (Activity 短信
  3. Android(安卓)Activity间跳转与传递数据
  4. Android(安卓)非UI线程使用View.post()方
  5. android实现session保持
  6. Android实现定时任务及闹钟
  7. Android(安卓)SharedPreferences保存Map
  8. [译]利斯科夫替换原则在Android中的实践
  9. Android(安卓)Support Percent百分比布局
  10. android 异常问题 Scrollview中嵌套webvi