FloatingActionButton的使用

FloatingActionButton（FAB） 是 Android 5.0 新特性——Material Design 中的一个控件，是一种悬浮的按钮。FloatingActionButton 是 ImageView 的子类，因此它具备ImageView的全部属性

• 基本使用

1，需要在gradle文件中先注册依赖：

<span style="color:#000000"><code>compile <span style="color:#009900">'com.android.support:design:25.0.0'</span></code></span>

2，FAB基本属性

<span style="color:#000000"><code>  <android<span style="color:#009900">.support</span><span style="color:#009900">.design</span><span style="color:#009900">.widget</span><span style="color:#009900">.FloatingActionButton</span>
        android:id=<span style="color:#009900">"@+id/fab"</span>
        android:layout_width=<span style="color:#009900">"wrap_content"</span>
        android:layout_height=<span style="color:#009900">"wrap_content"</span>
        android:layout_margin=<span style="color:#009900">"20.0dip"</span>
        android:onClick=<span style="color:#009900">"click"</span>
        android:src=<span style="color:#009900">"@mipmap/ic_launcher"</span>
        app:backgroundTint=<span style="color:#009900">"#30469b"</span>
        app:borderWidth=<span style="color:#009900">"0.0dip"</span>
        app:elevation=<span style="color:#009900">"5.0dip"</span>
        app:fabSize=<span style="color:#009900">"normal"</span>
        app:layout_anchor=<span style="color:#009900">"@id/container"</span>
        app:layout_anchorGravity=<span style="color:#009900">"right|bottom"</span>
        app:pressedTranslationZ=<span style="color:#009900">"10.0dip"</span>
        app:rippleColor=<span style="color:#009900">"#a6a6a6"</span> />

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

 

3,我的问题 
咋一看，就是把FloatingActionButton添加到布局文件设置好位置和图标就行，在项目中，设计给了这样的切图标注。 

然后我把那个大笔的切图放进FloatingActionButton中时，发现现实不对劲 

图片严重缩小了我的xml代码

 

<span style="color:#000000"><code>    <android<span style="color:#009900">.support</span><span style="color:#009900">.design</span><span style="color:#009900">.widget</span><span style="color:#009900">.FloatingActionButton</span>
        android:id=<span style="color:#009900">"@+id/m_main_fab"</span>
        android:layout_width=<span style="color:#009900">"wrap_content"</span>
        android:layout_height=<span style="color:#009900">"wrap_content"</span>
        android:layout_margin=<span style="color:#009900">"16dp"</span>
        android:src=<span style="color:#009900">"@drawable/m_main_new_article_icon"</span>
        app:borderWidth=<span style="color:#009900">"0.0dip"</span>
        app:fabSize=<span style="color:#009900">"normal"</span>
        app:backgroundTint=<span style="color:#009900">"@color/m_main_green"</span>

        android:clickable=<span style="color:#009900">"true"</span>
        app:layout_anchor=<span style="color:#009900">"@id/m_main_recycleview"</span>
        app:layout_anchorGravity=<span style="color:#009900">"bottom|right"</span>
        /></code></span>

后来查阅Material Design规范http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html ，https://material.io/guidelines/components/buttons-floating-action-button.html#， 
可以看出官方推荐中间建议使用24x24dp的小图，如加号，分享，叉叉等 
根据谷歌的设计规范，drawable的尺寸应该是24dp。 

 

本来以为设计给的图不对，后来发现及时设计将那个笔的图切成24dp*24dp，我放进去页会显得很小，不好看，后来经过师父帮忙发现设置android:scaleType=”center”会把中间的小图放到最大。

<span style="color:#000000"><code> <span style="color:#006666"><<span style="color:#4f4f4f">android.support.design.widget.FloatingActionButton
</span>        <span style="color:#4f4f4f">android:id</span>=<span style="color:#009900">"@+id/m_main_fab"</span>
        <span style="color:#4f4f4f">android:layout_width</span>=<span style="color:#009900">"wrap_content"</span>
        <span style="color:#4f4f4f">android:layout_height</span>=<span style="color:#009900">"wrap_content"</span>
        <span style="color:#4f4f4f">android:layout_margin</span>=<span style="color:#009900">"16dp"</span>
        <span style="color:#4f4f4f">android:src</span>=<span style="color:#009900">"@drawable/m_main_new_article_icon"</span>
        <span style="color:#4f4f4f">app:borderWidth</span>=<span style="color:#009900">"0.0dip"</span>
        <span style="color:#4f4f4f">app:fabSize</span>=<span style="color:#009900">"normal"</span>
        <span style="color:#4f4f4f">app:backgroundTint</span>=<span style="color:#009900">"@color/m_main_green"</span>

        <span style="color:#4f4f4f">android:clickable</span>=<span style="color:#009900">"true"</span>
        <span style="color:#4f4f4f">app:layout_anchor</span>=<span style="color:#009900">"@id/m_main_recycleview"</span>
        <span style="color:#4f4f4f">app:layout_anchorGravity</span>=<span style="color:#009900">"bottom|right"</span>

        <span style="color:#4f4f4f">android:scaleType</span>=<span style="color:#009900">"center"</span>

        /></span><span style="color:#880000"><!--  添加android:scaleType="center"会把中间的小图放到最大--></span></code></span>

效果图： 

 

官方建议，使用FloatingActionButton 结合 CoordinatorLayout 使用，即可实现悬浮在任意控件的任意位置。同时可以实现与CoordinatorLayout 内的其他view协调动画。

• 协调动画 
  暂更… 
  查阅资源： 
  1，Floating Action Button-Android M新控件 
  2，【Android - 控件】之MD - FloatingActionButton的使用 
  3，Android FloatingActionButton（FAB） 悬浮按钮