Android App开发进阶与项目实战
上QQ阅读APP看书,第一时间看更新

4.2.2 实现平滑翻书效果

与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图。然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍并不相像。若想让手机电子书更贴近纸质书的阅读体验,就得重新设计上下翻动的视图,比如图4-13所示的平滑翻页效果,上下两页存在遮挡的情况,并且下面那页在未完全显示出来之前呈现阴影笼罩的效果。

图4-13 平滑翻页的显示效果

从图4-13所示的效果图可以看到,此时的书页应当具备下列视图特征:

(1)能够容纳图片在内的多个控件,意味着自定义视图必须由某种布局派生而来。

(2)书页存在两种状态:未遮挡时的高亮状态、被遮挡时的阴影状态。

(3)鉴于书页允许拉动,考虑给它设置左侧间距。左侧间距为零时,该页完整显示;左侧间距为负值时,该页向左缩进。

按照上述三点要求实现的书页视图的示例代码如下:

(完整代码见ebook\src\main\java\com\example\ebook\widget\PageView.java)

接着自定义滑动视图,用来容纳多个书页视图,以便模拟电子书的翻页浏览功能。滑动视图待实现的几处细节说明如下:

(1)支持传入图片路径列表,每张图片都做成书页视图,然后添加至滑动视图容器当中。

(2)重写onTouchEvent方法,根据手势的滑动距离实时设置当前书页的左侧间距。

(3)声明一个滚动器对象,并在手势松开后启动滚动器,同时重写computeScroll方法,在滚动过程中持续计算并设置当前书页的左侧间距。

(4)滚动结束后,确保上层书页视图高亮显示(没有覆盖一层阴影)。

根据上述说明实现的滑动视图的示例代码片段如下:

(完整代码见ebook\src\main\java\com\example\ebook\widget\ViewSlider.java)

滑动视图编写完成之后,在布局文件中添加ViewSlider节点,并在对应的活动页面给滑动视图设置图片路径列表,剩下的手势滑动操作就由滑动视图接管了。运行并测试该App,可通过滑动手势来控制平滑翻书,划了几下观察到翻书效果如图4-14和图4-15所示。图4-14为当前页向左滑动且即将松开手指的画面,由于此时当前页左滑超过二分之一,因此松开后会继续向左滚动,快要滚动结束时的画面如图4-15所示,这便是滑动惯性使然。

图4-14 即将松开手指的画面

图4-15 快要滚动结束时的画面