Material Design控件之FloatingActionButton

Material Design控件之FloatingActionButton

在Material Design设计规范中，提出了一些控件的基本准则规范，我们来学习下Material Design中的控件。

按钮由文字或图标组成，但是它们的目的是相同的，就是起到连接一种过渡效果，能清晰表达与点击展示后的内容关系。主要的控件类型：

• 悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的圆形按钮。
• 浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。
• 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。

我们看下几个实例图：

悬浮响应按钮(Floating action button)：

浮动按钮(Raised button)：

扁平按钮(Flat button)：

特点：
(1)、悬浮响应按钮
悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸。 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。
(2)、浮动按钮
浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。
(3)、扁平按钮
扁平按钮一般用于对话框或者工具栏， 可避免页面上过多无意义的层叠。

使用技巧:

按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

首先，审视一遍你的按钮功能: 它是不是非常重要而且应用广泛到需要用上悬浮响应按钮?

然后，基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮。而且应该避免过多的层叠。

最后，检查你的布局。 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下（比如需要强调一个浮起的效果）才应该混合使用多种类型的按钮。

按钮类型特点

（1）、对话框中使用扁平按钮作为主要按钮类型以避免过多的层次叠加。
（2）、根据特定的布局来选择使用扁平按钮或者浮动按钮。对于扁平按钮，应该在内部四周留出足够的空间（内边距）以使按钮清晰可见。
（3）、如果需要一个对用户持续可见的功能按钮，应该首先考虑使用悬浮响应按钮。如果需要一个非主要、但是能快速定位到的按钮，则可以使用底部固定按钮。

下面我们就来看看如何在实际的开发中使用Material Design新增的FloatingActionButton。

1、控件所在包及环境配置：在gradle中添加依赖

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

所在包路径：

android.support.design.widget.FloatingActionButton

2、我们看下FloatingActionButton的定义：

    public class FloatingActionButton extends ImageView

发现它就是一个ImageView，所以我们可以按照ImageView的来使用。

FloatingActionButton的使用

1、我们新建一个工程，在xml布局文件中：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_input_add" />
    </RelativeLayout>

2、使用很简单，我们看下效果图：
（1）、Api16的模拟器：

（2）、Api17的模拟器：

我们发现在Api17的模拟器上才是正常效果。原因就是我们没设置app:borderWidth属性，设置即可。

3、FloatingButton自定义属性：

• app:backgroundTint - 设置FAB的背景颜色。
• app:rippleColor - 设置FAB点击时的背景颜色。
• app:borderWidth - 该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”。
• app:elevation - 默认状态下FAB的阴影大小。
• app:pressedTranslationZ - 点击时候FAB的阴影大小。
• app:fabSize - 设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
• src - 设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。
• app:layout_anchor - 设置FAB的锚点，即以哪个控件为参照点设置位置。
• app:layout_anchorGravity - 设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

补充，我们在使用app自定义属性的时候，不要忘记添加命名空间。

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

至此，FloatingActionButton基本使用介绍完毕。

作者：mr_dsw 欢迎转载，与人分享是进步的源泉！

转载请保留地址：http://blog.csdn.net/mr_dsw