Android自定义View——从零开始实现书籍翻页效果(二)

本文是Android自定义View系列教程的第二部分,主要介绍了如何完善右侧最大翻页距离限制,添加横向翻页效果,以及增加取消翻页的动画。通过调整坐标计算和使用Scroller、Interpolator实现更流畅的交互体验。

版权声明:本文为博主原创文章,未经博主允许不得转载。
系列教程:Android开发之从零开始系列
源码:github.com/AnliaLee/BookPage,欢迎star

大家要是看到有错误的地方或者有啥好的建议,欢迎留言评论

前言:在上篇Android自定义View——从零开始实现书籍翻页效果(一)博客中,我们实现了 基本的上下翻页效果右侧最大翻页距离的限制,这期我们要将这个view的翻页效果以及动画补齐

本篇只着重于思路和实现步骤,里面用到的一些知识原理不会非常细地拿来讲,如果有不清楚的api或方法可以在网上搜下相应的资料,肯定有大神讲得非常清楚的,我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来(其实就是懒不想写那么多哈哈),大家可以自行传送。为了照顾第一次阅读系列博客的小伙伴,本篇会出现一些在之前系列博客就讲过的内容,看过的童鞋自行跳过该段即可

国际惯例,先上效果图,本次主要补全了翻页效果以及增加取消翻页的动画

目录
  • 完善右侧最大翻页距离的限制
  • 添加横向翻页效果
  • 增加取消翻页的动画

完善右侧最大翻页距离的限制

开讲之前,我先把标识点的位置图贴出来让大家回顾一下

在上篇博客中我们讲了如何限制翻页的最大距离,也就是c点的x坐标不能小于0,虽然目的达到了,但是用户体验并不好,可以很明显地观察到当c点x坐标处于临界值时,翻页会静止不动,如果此时触摸点大范围移动后,会出现翻页“瞬移”,造成一种卡顿的感觉,如下图

要消除这种“瞬移”的现象,我们要在c点x坐标小于0的情况下,让c点强制处于临界位置(左下角),然后翻页页角继续跟随触摸点移动的方向移动,要做到这一点得用到一些相似三角形的数学知识,重新计算出a点的位置绘制View,先来看下实现的原理(请无视我的渣画工╮(╯▽╰)╭ )

图中我们将触摸点标为a1,与a1对应的c点标为c1,此时c1的x坐标是小于0。而a2是我们重新计算得到的a点,也就是最后进行绘制的a点,其对应的c点标为c2c2位于View的左下角(x坐标为0),容易观察到直角三角形a1 c1 m1直角三角形a2 c2 m2相似,此时f点位于View的右下角(在右上角同理),因此我们可以通过相应的公式计算得到a2的坐标为(f.x-w2,f.y-h2),得到计算a2的方法后,我们修改原来的BookPageView

/**
 * 设置触摸点
 * @param x
 * @param y
 * @param style
 */
public void setTouchPoint(float x, float y, String style){
    switch (style){
        case STYLE_TOP_RIGHT:
            f.x = viewWidth;
            f.y = 0;
            break;
        case STYLE_LOWER_RIGHT:
            f.x = viewWidth;
            f.y = viewHeight;
            break;
        default:
            <
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值