浅谈FloatingActionButton(悬浮按钮)

一、介绍

这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性

android.support.design.widget.FloatingActionButton

二、使用准备, 在as 的 build.grade文件中写上

compile 'com.android.support:design:22.2.0'

三、使用说明

xml文件中,注意蓝色字体部分

<android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        android:layout_centerInParent="true"
        android:src="@mipmap/ok"
        app:borderWidth="0dp"
        app:backgroundTint="#FF4011"
        app:rippleColor="#33728dff"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        />

 可以看到我们使用了app属性,则需要在根容器中添加这个属性。 

xmlns:app="http://schemas.android.com/apk/res-auto"

属性介绍:

1、app:borderWidth=""------------------边框宽度,通常设置为0 ,用于解决Android 5.X设备上阴影无法正常显示的问题

2、app:backgroundTint=""---------------按钮的背景颜色,不设置,默认使用theme中colorAccent的颜色

3、app:rippleColor=""--------------------点击的边缘阴影颜色

4、app:elevation=""----------------------边缘阴影的宽度

5、app:pressedTranslationZ="16dp"-----点击按钮时,按钮边缘阴影的宽度,通常设置比elevation的数值大

另外我们希望点击按钮一个颜色,正常状态一个颜色 以提高用户体验,那么就是drawable文件夹中创建文件 floatbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorNormal"></item>
    <item android:state_pressed="true" android:drawable="@color/colorPressed"></item>
</selector>

然后我们设置FloatActionButton的backgroud为这个drawable文件即可,同时app:backgroundTint=""属性也可以不再设置

<android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/floatbutton"
        android:src="@mipmap/ok"
        app:borderWidth="0dp"
        app:rippleColor="#33728dff"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        />

效果图:

-------------------------------------------------------------------------------------------------------------

其他相关:

浅谈RecyclerView(完美替代ListView,GridView)

浅谈GridLayout(网格布局)

浅谈TabLayout(ViewPager+Tab联动)

浅谈DrawerLayout(抽屉效果)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

浅谈ClickableSpan , 实现TextView文本某一部分文字的点击响应

4246
来自专栏李蔚蓬的专栏

Android群英传实践过程参考文章荟萃

然后就可以使用这个组合的图片了,比如在ImageView中显示: <ImageView android:id="@+id/faceImg" android:b...

1042
来自专栏iOSDevLog

scetch入门 第2部分:文本,对齐和SVG在第3部分中了解如何导出文件

这是本教程第1部分的延续。在本部分中,我们将介绍文本工具,对齐以及在Sketch中使用导入的矢量图形。

1073
来自专栏菩提树下的杨过

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下: ? 分析示意图: ? 代码:  <Canvas x:Name="a" Background="AliceBlue" MouseEnter="a_...

19010
来自专栏封碎

解决Android的ListView控件滚动时背景变黑 博客分类: Android小技巧 AndroidGoogle

      如果大家在非黑色背景下使用ListView控件时,Android默认可能在滚动ListView时这个列表控件的背景突然变成黑色。这样可能导致程序的黑...

1071
来自专栏Java帮帮-微信公众号-技术文章全总结

jquery的checkbox,radio,select等方法总结

jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难...

1332
来自专栏图像识别与深度学习

《Android》Lesson10-UI控件

2399
来自专栏james大数据架构

简单的jquery拖曵原理js特效实例

<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="javascript" src...

2457
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在手机应用开发中如何设置全局样式

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

1283
来自专栏Android-薛之涛

Android-Animation 总结(一)

鉴于今天是劳动节,鼓励自己整理一下android相关的知识,祝所有劳动者节日快乐。

831

扫码关注云+社区

领取腾讯云代金券