您现在的位置是:首页 > 文章详情

FloatingActionButton的简单使用

日期:2018-08-12点击:574

FloatingActionButton是Support Design Library库中引入的一个新的控件,外观时尚新颖,受到很多开发者的好评。

如何使用FloatingActionButton

使用FloatingActionButton其实非常简单只需要在布局文件中引入控件即可,不过它的属性有点多,我们先来介绍一下它的属性。

  • android:src:FAB中显示的图标.
  • app:backgroundTint:正常的背景颜色 ,这里是ColorStateList类型
  • app:rippleColor:按下时的背景颜色
  • app:elevation:正常的阴影大小
  • app:pressedTranslationZ:按下时的阴影大小
  • app:layout_anchor:设置FAB的锚点,即以哪个控件为参照设置位置
  • app:layout_anchorGravity:FAB相对于锚点的位置
  • app:fabSize:FAB的大小,normal或mini(分别对应56dp和40dp)
  • app:borderWidth:边框大小,最好设置成0dp否则会有边框
  • android:clickable:一定要设置成true否则没有点击效果

讲完属性接下来实现一下效果

xml布局文件
<FrameLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_gravity="end|bottom" android:id="@+id/floatbutton" app:elevation="6dp" android:clickable="true" app:borderWidth="0dp" android:backgroundTint="@color/fabbg" app:rippleColor="#0097a7" android:layout_marginBottom="20dp" android:layout_marginRight="20dp" android:src="@drawable/ic_logo" app:pressedTranslationZ="12dp" android:layout_height="wrap_content" /> </FrameLayout> 
color/fabbg.xml文件,这个需要在res目录下新建color文件夹
img_bce3b110232cde9ba343cb85ec71f2bf.png
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="false" android:color="#00b8d4"/> <item android:state_focused="true" android:color="#00e5ff"/> </selector> 
FloatingActionButton的点击事件与Button的实现方式一样,这里不予演示
运行效果
img_2685f33f1f556ffb4a7b26d3fd205eaf.gif
GIF.gif

个人博客:https://myml666.github.io

原文链接:https://yq.aliyun.com/articles/665561
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章