FloatingActionButton 完全解析[Design Support Library(2)]
2015-06-29 09:54
253 查看
FloatingActionButton 完全解析[Design Support Library(2)]
哈,跟随着上篇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。
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
可以通过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~
参考资料
http://antonioleiva.com/floating-action-button/https://code.google.com/p/android/issues/detail?id=175067
https://github.com/chrisbanes/cheesesquare
http://www.myandroidsolutions.com/2015/01/01/android-floating-action-button-fab-tutorial/
相关文章推荐
- 更改ListView子项中的EditText
- about ContentProvider
- Creational模式之Builder模式
- Intellij Idea 使用
- 算法导论2.1-4——n个二进制数相加
- LAMP环境搭建
- linux 驱动开发 Invalid module format 错误解决方法
- Ubuntu无法进入登陆界面
- Oracle——distinct的用法
- [LeetCode] Majority Element II 求众数之二
- CentOS之NTP服务器配置
- ModelState
- 【HDOJ】3006 The Number of set
- 微软Windows 10功能官方中文宣传片:神翻译彻底看醉
- JavaScript的内置对象和函数
- Python访问纯真IP数据库脚本分享
- 华为历年机试题型总结系列(八)
- Linux内核中读写文件数据的方法
- JAVA安装
- jsp 指令元素、脚本元素、动作元素的区别