FloatingActionButton 完全解析[Design Support Library(2)]
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"
/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
使用非常简单，直接当成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"- 1
- 2
- 1
- 2
-
立体感有没有什么属性可以动态指定？
和立体感相关有两个属性，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"
/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
至于点击事件，和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" />- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
values
<dimen name="fab_margin">0dp</dimen>- 1
- 1
values-v21
<dimen name="fab_margin">16dp</dimen>- 1
- 1
三、简单实现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>