FloatingActionButton 完全解析[Design Support Library(2)]

jopen 8年前

FloatingActionButton 完全解析[Design Support Library(2)]

转载请标明出处：
[http://blog.csdn.net/lmj623565791/article/details/46678867](http://blog.csdn.net/lmj623565791/article/details/46678867；
本文出自:【张鸿洋的博客】

哈，跟随着上篇Android 自己实现 NavigationView [Design Support Library(1)]之后，下面介绍个Design Support Library中极其简单的控件：FloatingActionButton。

一、简单使用

布局：

        <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" />

使用非常简单，直接当成ImageView来用即可。

效果图：

可以看到我们的FloatingActionButton正常显示的情况下有个填充的颜色，有个阴影；点击的时候会有一个rippleColor，并且阴影的范围可以增大，那么问题来了:

  • 这个填充色以及rippleColor如何自定义呢？

    默认的颜色取的是，theme中的colorAccent，所以你可以在style中定义colorAccent。

    colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。详细请参考：Android 5.x Theme 与 ToolBar 实战

    rippleColor默认取的是theme中的colorControlHighlight。

    我们也可以直接用过属性定义这两个的颜色：

    app:backgroundTint="#ff87ffeb"  app:rippleColor="#33728dff"

  • 立体感有没有什么属性可以动态指定？

    和立体感相关有两个属性，elevation和pressedTranslationZ，前者用户设置正常显示的阴影大小；后者是点击时显示的阴影大小。大家可以自己设置尝试下。

综上，如果你希望自定义颜色、以及阴影大小，可以按照如下的方式(当然，颜色你也可以在theme中设置)：

<android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" app:backgroundTint="#ff87ffeb" app:rippleColor="#33728dff" app:elevation="6dp" app:pressedTranslationZ="12dp" />

至于点击事件，和View的点击事件一致就不说了~~

二、5.x存在的一些问题

在5.x的设备上运行，你会发现一些问题（测试系统5.0）：

  • 木有阴影

记得设置app:borderWidth="0dp"。

  • 按上述设置后，阴影出现了，但是竟然有矩形的边界（未设置margin时，可以看出）

需要设置一个margin的值。在5.0之前，会默认就有一个外边距（不过并非是margin，只是效果相同）。

so，良好的实践是：

  • 添加属性app:borderWidth="0dp"
  • 对于5.x设置一个合理的margin

如下：

 <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" app:borderWidth="0dp" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_headset" />

values

 <dimen name="fab_margin">0dp</dimen>

values-v21

 <dimen name="fab_margin">16dp</dimen>

三、简单实现FloatActionButton

参考参考资料4

可以通过drawable来实现一个简单的阴影效果：

drawable/fab.xml

<?xml version="1.0" encoding="utf-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true">          <layer-list>              <!-- Shadow -->              <item android:top="1dp" android:right="1dp">                  <layer-list>                      <item>                          <shape android:shape="oval">                              <solid android:color="#08000000"/>                              <padding  android:bottom="3px" android:left="3px" android:right="3px" android:top="3px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#09000000"/>                              <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#10000000"/>                              <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#11000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#12000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#13000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#14000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#15000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#16000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                  </layer-list>              </item>                <!-- Blue button pressed -->              <item>                  <shape android:shape="oval">                      <solid android:color="#90CAF9"/>                  </shape>              </item>          </layer-list>      </item>        <item android:state_enabled="true">            <layer-list>              <!-- Shadow -->              <item android:top="2dp" android:right="1dp">                  <layer-list>                      <item>                          <shape android:shape="oval">                              <solid android:color="#08000000"/>                              <padding  android:bottom="4px" android:left="4px" android:right="4px" android:top="4px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#09000000"/>                              <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#10000000"/>                              <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#11000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#12000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#13000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#14000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#15000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                      <item>                          <shape android:shape="oval">                              <solid android:color="#16000000"/>                              <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />                          </shape>                      </item>                  </layer-list>              </item>                <!-- Blue button -->                <item>                  <shape android:shape="oval">                      <solid android:color="#03A9F4"/>                  </shape>              </item>          </layer-list>        </item>    </selector>

一个相当长的drawable，不过并不复杂，也比较好记忆。首先为一个View添加阴影，使用的是color从#08000000到#1500000，取的padding值为4、2、2、1…1；这样就可以为一个View的四边都添加上阴影效果。

当然了，为了阴影更加逼真，把上述的Layer-list又包含到了一个item中，并为该item设置了top和right，为了让左，下的阴影效果比上、右重，当然你可以设置其他两边，改变效果。

最后添加一个item设置为按钮的填充色（注意该item的层级）。

该drawable为一个selector，所以press和默认状态写了两次基本一致的代码，除了填充色不同。

使用：

 <ImageButton  android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="20dp" android:background="@drawable/fab" android:src="@drawable/ic_done" />

效果图：

ok，到此FloatActionButton就介绍完毕啦~~有兴趣的话，也可以从github挑选个库看看别人的实现。

ok~

新浪微博
微信公众号：hongyangAndroid
（欢迎关注，第一时间推送博文信息）

参考资料

来自： http://blog.csdn.net//lmj623565791/article/details/46678867