Demo3 悬浮的按钮:FloatActionButton(Design Support Lib)

从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库的版本号相同就行):

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值