Google 报亭应用 ActionBar 动画效果 实现

作者: rain 分类: 移动 发布时间: 2013-11-27 14:01 6 条评论

几天前 Google 发布了一个新应用 叫 Play 报亭,该应用中实现了一种新风格的 ActionBar 动画效果。如果你还没有看到过该应用,则下图是一个示例动画效果。

当用户初始进入该界面的时候,为一个透明的 ActiionBar 来充分的利用空间显示题图,如果用户滚动页面需要查看内容的时候,则题图收缩到 ActionBar 中, 整个操作看起来浑然天成,给人一种新奇的感觉。

下载示例程序 APK

下面来看看如何实现该效果:

1. 首先需要使用 ActionBar 的 overlay 模式 并使用透明的 ActionBar 背景。

2. 定义布局。要实现该效果布局非常重要。根容器为一个 FrameLayout ,里面有一个 ListView 和另外一个 FrameLayout (包含题图内容)。 在题图 FrameLayout 中包含了一个大的背景图 ImageView 和一个 小的图标 ImageView (该图标通过动画会变为 ActionBar 上的 Logo)。

通过在 ListView 上添加一个高度和 题图一样高的 虚拟 header view 来实现该动画。 可以用一个布局文件来作为该虚拟 header 的 view。

然后在代码中添加 ListView 的 header。

现在初始布局已经 OK 了, 需要在代码中获取 ListView 的滚动位置,后面需要根据滚动位置来更新 题图位置和 图标 的缩放了。

 

注意 如果 ListView 中第一个可见的 View 不是 ListView 中的第一个元素,则需要处理虚拟 header 的高度。

当 ListView 滚动的时候,你需要修改题图的位置来跟随 ListView 的虚拟 header 的滚动。 注意该位置的改动需要和 ActionBar 的高度绑定。

然后需要获取 ActionBar 的 title view 来根据滚动状态做一个 淡出的动画。通过Resources.getIdentifier 函数可以获取到该 View。

然后设置初始的 alpha 值。

在 ListView 滚动的时候,计算该 alpha 值。

Alpha 值的变化方程式为 f(x) = 5x-4。关于该方程式参考:Wikipedia

而关于 标题的淡出  Cyril Mottier 提供了一个更好的方案。

在该方案中无需获取 ActionBar title view。使用一个具有自定义 ForegroundColorSpan 的  SpannableString  。然后在该  SpannableString  上设置文字的 Alpha 值。

滚动的时候修改该  SpannableString  的 Alpha值并设置为 Title,使用同样的 AlphaForegroundColorSpan 和 SpannableString 避免频繁 GC 来提升性能。

移动和缩放 图标

先获取该 图标 View, 然后在 ActionBar 上设置一个透明的图标。

当 ListView 滚动时候,根据 header 的高度来移动和缩放图标。该缩放和位移是根据两个图标的位置关系和大小关系来计算的。 代码如下:


注意你也可以用 AccelerateDecelerateInterpolator 来让动画看起来更平滑一些。

在该示例代码中还包含了一个 Ken Burns 动画,使题图可以移动,可以参考其实现:KenBurnsView.java

完整示例项目代码: https://github.com/flavienlaurent/NotBoringActionBar
VIA: Flavien Laurent

本文出自 云在千峰,转载时请注明出处及相应链接。

本文永久链接: http://blog.chengyunfeng.com/?p=548

Ɣ回顶部