Android 仿当乐游戏详情页面(一)

写在前面

前段时间不知道是什么情况，上头对当乐客户端的游戏详情页着了迷，给我下了死命令，要求我必须实现当乐游戏详情页的效果。然后就下了一个当乐的游戏客户端，打开游戏详情页，当场就被那炫酷的效果吓尿了。
不说了，你们也来感受下这炫酷的效果吧!!

经过一个多星期的努力，这个效果算是做出来了，这是公司的效果。

层次结构分析

经历过几天的迷茫，尝试过各种各样的控件后，最终还是发现仅仅使用那些控件，是不能实现那个效果的，偷懒的方法也就只能放弃了，看来还是只能靠自己。
仔细观察了当乐的游戏详情界面，发现当乐的游戏详情页其实是由3种处在不同层次的View组合而成，然后通过中间层View的移动进而改变界面的显示状态。
通过分析，这3个View分别为：
* 用于显示游戏截图的View (暂且称它为ImgShotView)被置于最底层
* 用于展示内容的View (暂且称它为ContentView)位于中间层，该层由两个部分组成，一个部分是ContentView的头(暂且称它为HeadView)，另一个是ContentView内容展示部分。
* toolbar 和底部工具栏理所当然是位置最顶层

层次结构如图所示：

* 灰色表示的是最底层的根布局。
* 而绿色表示的是显示游戏截图的View。
* 蓝色表和红色分别表示Toolbar 和 bottom Bar。

通过这层次结构可以得知，当乐游戏详情页效果是通过对界面巧妙的布局，然后利用其中一个View的移动来动态改变所有层次的View的状态来实现的。

移动状态分析

在ContentView移动的过程中，会出现3种不同的悬停状态，分别是是TOP，CENTER, BOTTOM；
* 处于TOP状态时，ImgShotView被完全隐藏，而HeadView将被移出视线之外，而contentview里面tabBar被固定在toolbar下面，直到contentView里面的滑动控件处于顶部时，tabBar才能解除固定。
* 处于CENTER状态时，ImgShotView被展示出来，toolbar变全透明，在此状态下，contentView只能获取到横向移动时间。
* 处于BOTTOM状态时，ImgShotView在从CENTER到BOTTOM状态的过程中，显示图片旋转放大动画，在这个状态下，ContentView只能显示headView，并且headView被固定在屏幕底部。

需要解决的问题

通过上面对当乐游戏详情页的简单分析，需要解决的问题有：
* 怎样实现contentView的移动，及其toolbar透明的和不透明之间的渐变。
* 怎样绘制含有3个不同层次View的布局。
* 处于TOP状态时，该如何实现tabBar的固定，及其tabBar解除固定。
* 该如何实现ImgShotView的旋转，填充动画。
* 怎样实现各个控件间焦点的切换。