FloatingActionButton的使用

这篇博客是学习完 Android 6.0 的新控件 FloatingActionButton 后所写。如有不妥之处，欢迎留言，谢谢~

FloatingActionButton 同样是 Android 6.0 时推出的新控件，是 Android Support Design Library 库中的一个控件。

[TOC]

效果图

同样的，我们先来看效果图：

Android API 中的简述

官方介绍说明

FloatingActionButton介绍

从上图可知：

  1. FloatingActionButton 是一个悬浮在 UI 上层的一种特殊按钮；
  2. FloatingActionButton 只有两个尺寸，一种是默认的，一种是迷你的；也就是说我们常用的layout_width 和 layout_height 对 FloatingActionButton 是不起作用；
  3. FloatingActionButton 是间接继承 ImageView ，所以我们可以通过 setImageDrawable(Drawable) 方法设置其上面的图标
  4. FloatingActionButton 的背景颜色默认是取自主题中的 colorAccent 字段的颜色值；当然，我们可以可以通过 setBackgroundTintList(ColorStateList) 方法进行设置其背景颜色

使用步骤

  1. 导入兼容库

    1
    compile 'com.android.support:design:23.3.0'

  2. 布局文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_left_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/ic_loyalty_white_24dp"
        app:fabSize="normal"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_right_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        app:backgroundTint="#0268F9"
        app:elevation="10dp"
        app:fabSize="mini"
        app:rippleColor="#0000ff"/>

  3. Java 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    private void initData() {
        // 为右上角的悬浮按钮设置图标
        mFabRightTop.setImageDrawable(getDrawable(R.drawable.ic_loyalty_white_24dp));
        // 为左上角的悬浮按钮设置点击监听
        mFabLeftTop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mFabRightTop.isShown()) {    // 右上角的悬浮按钮是否已经显示
                    mFabRightTop.hide(); // 若显示，则隐藏
                } else {
                    mFabRightTop.show(); // 否隐藏，则显示
                }
            }
        });
        // 为右上角的悬浮按钮设置点击监听
        mFabRightTop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mFabLeftTop.isShown()) {    // 左上角的悬浮按钮是否已经显示
                    mFabLeftTop.hide(); // 若显示，则隐藏
                } else {
                    mFabLeftTop.show(); // 否隐藏，则显示
                }
            }
        });
    }

FloatingActionButton 的相关属性如下：

在 XML 中常用的属性有：

1
2
3
4
5
android:src=""			<!-- 悬浮按钮上的图标 -->
app:backgroundTint=""	<!-- 背景颜色，默认为 Theme 主题中的 "colorAccent" -->
app:elevation=""		<!-- 阴影的深度，默认是有阴影的 -->
app:fabSize=""			<!-- 大小，仅支持两种大小：normal、mini -->
app:rippleColor=""		<!-- 点击产生的波纹颜色 -->

在 Java 代码中常用的属性有：

1
2
3
4
5
setBackgroundDrawable(Drawable background);	// 图标
setOnClickListener(OnClickListener l);		// 点击监听器
setBackgroundTintList(ColorStateList tint);	// 背景颜色
setElevation(float elevation);				// 阴影的深度
setRippleColor(int color);					// 点击产生的波纹颜色

源码中的默认参数

1
2
3
4
<dimen name="design_fab_elevation">6dp</dimen>		<!-- 默认阴影深度6dp -->
<dimen name="design_fab_image_size">24dp</dimen>	<!-- 默认图标大小24dp -->
<dimen name="design_fab_size_mini">40dp</dimen>		<!-- mini的悬浮按钮大小40dp -->
<dimen name="design_fab_size_normal">56dp</dimen>	<!-- 默认的悬浮按钮大小56dp -->

项目地址

GitHub 传送门

FloatingActionButton 的基础使用教程到此结束了。

作者简介：

刘广明(@ cnLGMing)，一步一步往上爬。

个人博客 、GitHub 、知乎

文章若有不对之处，欢迎指正，谢谢~

版权声明：原创作品，转载时请务必注明原始出处。

留言

▲