Demo3 悬浮的按钮:FloatActionButton(Design Support Lib)
2016-05-09 20:57
399 查看
从Demo3开始,接下来会介绍Design Support组件库中几个常用的组件,首先就先从Design Support Library开始说起。Android Design Support Library是Google I/O 2015发布会上官方提供的开源组件库,其中包括了各种符合Material Design风格的组件。我们今天要讲解的FloatActionButton就是其中之一。
要使用Design Support Library,首先要在项目中引入这个库,因为是官方提供的库,所以用最传统的compile语句来引用就可以。操作如下:
在项目资源管理器中打开Gradle Scripts->build.gradle(Module:app)文件,你会在其中看到各种我们应用程序的设置:
我们留意到方框中的语句,那个是我们建立工程的时候Android Studio自动帮我们导入的V7组件库支持包,接下来我们只要在其下面添加一条引用Design Support Library即可(友情提醒,对于Design Support Library的版本号,跟V7库的版本号相同就行):
添加引用之后只要我们按下Sync Now选项,Android Studio就会帮我们把Design Support Library导入到工程项目中:
之后我们就会在项目资源管理器(Project)External Libraries文件夹中看到design-23.3.0库(当然,这是我的版本)。顺便废话一下,之后我们要使用design support library的组件也要先引用这个库。
好了接下来进入主题。FloatActionButton是ImageButton的继承类,其用法跟普通的Button基本类似,由于其具有更多的表现属性,故其使用的重点其实是在布局上。
main_layout.xml:
上面我们只是像ImageButton这样定义,另外,FloatActionButton可以指定两个大小通过设置fabSize这个属性,正常size是normal,还有一个更小的模式为mini,你也可以尝试下设置成mini运行下看下效果。
运行程序,布局效果如下:
关于填充色,有两个重要的属性:backgroundTint和rippleColor,分别表示普通状态和点击状态下的填充色(普通状态下浮起的状态会有阴影,点击之后阴影范围会变大)。其中,backgroundTint的默认值是theme中的colorAccent(colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色),所以你可以在style中修改colorAccent的值来自动改变这个属性,但我们一般不这么做;而rippleColor默认值是theme中的colorControlHighlight。一般的做法是直接在布局中指定这两个颜色:
FloatActinButton最大的特点是其悬浮的效果,所以关于其立体感的属性当然也重要。这里也是要涉及两个属性: elevation和pressedTranslationZ,分别为普通状态下的阴影大小和点击时阴影的大小,设置好之后,最终的布局如下:
至于点击事件呢,跟Button是一样的,这里就不详细介绍。最终效果:
有趣的一点是,FloatActionButton的一个比较常见的模式是点击之后让其动起来,这里就涉及到android的动画效果,关于这方面的知识,有兴趣的读者可以参考郭霖大神的一篇关于介绍属性动画的博客,里面关于属性动画的原理讲的非常细致,建议大家认真阅读: Android属性动画完全解析(上),初识属性动画的基本用法(作者:guolin)
Demo源码下载地址:Demo3:FloatActionButton
要使用Design Support Library,首先要在项目中引入这个库,因为是官方提供的库,所以用最传统的compile语句来引用就可以。操作如下:
在项目资源管理器中打开Gradle Scripts->build.gradle(Module:app)文件,你会在其中看到各种我们应用程序的设置:
我们留意到方框中的语句,那个是我们建立工程的时候Android Studio自动帮我们导入的V7组件库支持包,接下来我们只要在其下面添加一条引用Design Support Library即可(友情提醒,对于Design Support Library的版本号,跟V7库的版本号相同就行):
compile 'com.android.support:design:23.3.0'
添加引用之后只要我们按下Sync Now选项,Android Studio就会帮我们把Design Support Library导入到工程项目中:
之后我们就会在项目资源管理器(Project)External Libraries文件夹中看到design-23.3.0库(当然,这是我的版本)。顺便废话一下,之后我们要使用design support library的组件也要先引用这个库。
好了接下来进入主题。FloatActionButton是ImageButton的继承类,其用法跟普通的Button基本类似,由于其具有更多的表现属性,故其使用的重点其实是在布局上。
main_layout.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/toolbar" /> <android.support.design.widget.FloatingActionButton android:id="@+id/bMain_Float" app:fabSize="normal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:src="@android:drawable/ic_dialog_email"/> </RelativeLayout>
上面我们只是像ImageButton这样定义,另外,FloatActionButton可以指定两个大小通过设置fabSize这个属性,正常size是normal,还有一个更小的模式为mini,你也可以尝试下设置成mini运行下看下效果。
运行程序,布局效果如下:
关于填充色,有两个重要的属性:backgroundTint和rippleColor,分别表示普通状态和点击状态下的填充色(普通状态下浮起的状态会有阴影,点击之后阴影范围会变大)。其中,backgroundTint的默认值是theme中的colorAccent(colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色),所以你可以在style中修改colorAccent的值来自动改变这个属性,但我们一般不这么做;而rippleColor默认值是theme中的colorControlHighlight。一般的做法是直接在布局中指定这两个颜色:
<android.support.design.widget.FloatingActionButton 。。。 app:backgroundTint="#FFC125" app:rippleColor="#FFD700"/>
FloatActinButton最大的特点是其悬浮的效果,所以关于其立体感的属性当然也重要。这里也是要涉及两个属性: elevation和pressedTranslationZ,分别为普通状态下的阴影大小和点击时阴影的大小,设置好之后,最终的布局如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/bMain_Float" app:fabSize="normal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:src="@android:drawable/ic_dialog_email" app:backgroundTint="#FFC125" app:rippleColor="#FFD700" app:elevation="6dp" app:pressedTranslationZ="12dp"/> </RelativeLayout>
至于点击事件呢,跟Button是一样的,这里就不详细介绍。最终效果:
有趣的一点是,FloatActionButton的一个比较常见的模式是点击之后让其动起来,这里就涉及到android的动画效果,关于这方面的知识,有兴趣的读者可以参考郭霖大神的一篇关于介绍属性动画的博客,里面关于属性动画的原理讲的非常细致,建议大家认真阅读: Android属性动画完全解析(上),初识属性动画的基本用法(作者:guolin)
Demo源码下载地址:Demo3:FloatActionButton
相关文章推荐
- HTML基础知识三(超链接、表单)
- SpringIOC容器-对象依赖
- 给自己一个机会
- cPanel下如何添加新的域名
- linux命令行下导出导入.sql文件
- 【2015百度之星】 IP聚合
- 【杂】搜集到的有用的知识点
- HTML基础知识二(页面属性、注释、表格、设置表框颜色)
- Fragment 初学理解
- POJ 2441 Arrange the Bulls(状态压缩DP)
- 自定义拦截器
- 第10、11周-项目3(2)
- 笔记8:Ping类
- HTML基础知识一(HTML、常见方式、文档结构、<meta>、 网站文件命名、文本修饰、文本样式、段落标记、居中标记、水平线标记、特殊字符、列表、图像)
- 创建第一个Hiberntae工程
- XML和Map集合之间的相互转换
- 数据库抽象层PDO
- eclipse中怎么生成API帮助文档
- HybridTime - Accessible Global Consistency with High Clock Uncertainty
- Mysql:表的操作