ImageButton 实现 FloatingActionButton 波纹/表面高度效果

ImageButton 实现 FloatingActionButton波纹/表面高度效果

FloatingActionButton

FloatingActionButton 是 Material Design Library 中控件，简单来说可以实现悬浮效果，具有立体感，层次感。 使用很简单，首先需要在 build.gradle 中引入

compile 'com.android.support:design:x.x.x'

xml 文件中添加

<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add_circle_black_24dp"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp"/>

效果如下：



app:elevation 属性：表面高度值，即 Z轴 高度值，标准值为 6dp，值越大，在 xy 平面投下的阴影也就越大。

app:fabSize 属性：控件大小，有 normal，mini，auto 三个可选值，分别对应为标准大小（56dp），mini大小（40dp），自适应大小。

app:pressedTranslationZ 属性：按下 FAB 控件后* Z轴 *的高度值，按下后会发现阴影范围变大。

Activity 初始化 FAB 并添加* onClick *事件，运行测试即可。

ImageButoon 实现 FloatingActionButton 效果

观察 FloatingActionButton 可发现，及背景为圆形样式，而 ImageButton 定义时默认矩形，所以需要使用 shape 定义样式。

创建 res/drawable/oval_shape.xml 文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent"/>
</shape>

ImageButton 应用

<ImageButton
android:id="@+id/imageButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@drawable/oval_shape"
android:src="@drawable/ic_add_circle_black_24dp"
android:elevation="6dp"/>

此时可以看到，初步有了 FloatingActionButton 的样式了。

继续修改，添加波纹效果。

创建 res/drawable/oval_ripple.xml 文件

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<!-- //TODO colorControlHighlight 波纹和列表选择器等使用的颜色 -->
<item>
<shape android:shape="oval">
<solid android:color="?attr/colorAccent"/>
</shape>
</item>
</ripple>

ripple 是 5.0 之后引入的，所以要在 sdk 21及以上才可以。

修改 background 为

android:background="@drawable/oval_ripple"

距离成功又进一步了，现在还缺少 onClick 后的动画效果，也就是阴影效果变化，其实就是 Z轴 高度值的变化。

这一步其实是由属性动画控制的，所以需要去定义一个属性动画出来。

Google 建议属性动画要定义在 animator 文件夹，而不是 anim 文件夹。

创建 res/animator/fab_animator.xml 文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType"/>
</item>

<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType"/>
</item>
</selector>

可以看到，当 onClick 后，Z轴的高度提升 8dp，使阴影变大(属性动画的属性这里暂不介绍，感兴趣可以查看下相关资料)。此时属性动画已经定义完成，应用到 ImageButton 即可。

a09f

<ImageButton
android:id="@+id/imageButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@drawable/oval_ripple"
android:elevation="6dp"
android:src="@drawable/ic_add_circle_black_24dp"
android:stateListAnimator="@animator/fab_animator"/>

此时 ImageButton 已设置完毕，运行即可查看效果。



至此通过 ImageButton 来实现的效果已全部完成，因为 FloatingActionButton 的效果已经非常好，所以这里只是通过案列简单了解下已效果。

如有写错之处，请大家指出帮助改进，谢谢大家！