浅谈FloatingActionButton(悬浮按钮)-阿里云开发者社区

浅谈FloatingActionButton(悬浮按钮)

2016-09-08 1081

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一、介绍这个类是继承自ImageView的，所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButton 二、使用准备，在as 的 build.grade文件中写上 compile 'com.android.support:design:22.2.0' 三、使用说明 xml文件中，注意蓝色字体部分可以看到我们使用了app属性，则需要在根容器中添加这个属性。

一、介绍

这个类是继承自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"
        />