[赶时髦]我的一个自定义滑动特效的Gallery及其Kotlin重构

0x0 前言

今年五月底针对Android app开发的kotlin终于转正成功,这掀起了一股学习kotlin的热潮。于是我也赶了一下时髦,看了几天官网上的文档,大致了解了一下kotlin的语法,也手痒痒着想做点什么,正巧之前的项目里有一个自定义view想剥离出来写成一个lib供以后其他项目复用,就用kotlin写来练练手吧。

这个自定义view实现功能类似一个Gallery,可以左右滑动切换图片,每张图片安装原始分辨率显示,如果图片的分辨率高于屏幕,可通过手势滑动图片显示超出屏幕的部分。

之所以不用系统自带的Gallery,是因为我不太满意那个gallery的滑动特效,以及当显示图片分辨率大于屏幕时默认做缩小处理的特性,正巧我也需要一个机会学习写自定义的view,于是就自己写了。最终效果如下:

device-2017-08-22-000814.gif
device-2017-08-05-231517.gif

0x1 简单的实现原理

这个东西最初版本是用java写的,我就先以java版本为例简要介绍一下它的实现原理,想要更深入的了解感兴趣的细节,可以参考我上传到github上的源码:

https://github.com/knightingal/KSlideView/tree/java_init

布局文件中加载YImageSlider这个view的子类,这个类初始化时会添加三个YImageViewhideLeftcontentViewhideRightYImageSlider主要任务是管理这三个YImageView在滑动中的切换。假设我们有一组数量为n的图片pic[n],当前显示的是图片中的第i张图pic[i],则由contentView加载pic[i]显示于屏幕上,而hideLefthideRight分别加载pic[i-1],pic[i+1]隐藏于屏幕的左右两侧,当我们通过手势将contentView向左滑动导致当前显示的图片切换至pic[i+1]时,hideRight变为新的contentViewcontentView变为新的hideLefthideLeft变为新的hideRight,在这个过程中,原先的hideLeft即新的hideRight会丢弃原先加载的pic[i-1],转而加载pic[i+2]。由此可知无论n为多大,同一时间YImageSlider只需要加载三张图片在内存中,在一次切换过程中只重新加载一张图片。

YImageView主要任务是根据自己的定位(hideLeftcontentViewhideRight),将图片按照正确的大小显示在正确的位置,以及处理在手势滑动和图片切换时的动画处理。
YImageView首先override了setFrame方法,根据localIndex获取自己在YImageSlider中的定位信息,再根据图片的长宽,计算lefttoprightbottom数值,最后调用方法super.setFrame(0, top,bitmap_W, top +bitmap_H);将图片安照原始分辨率显示。

而手势滑动效果,和其他自定义view一样,主要由override onTouchEvent(MotionEventevent)方法实现,onTouchDown和onTouchMove完成对手势的跟踪,计算图片当前位置和运动速度,onTouchUp则略微复杂,它首先需要判断是否需要进行图片的切换,如果不需要进行图片切换,则仅完成图片的滑动和回弹即可。滑动和回弹均模拟经典力学中的匀变速运动。我设置了固定的动画运行时间,那么在知道初始速度的情况下,套用匀变速运动公式就可以计算出当动画停止时,我们的物体,即图片滑动的距离。这里还有一个问题,就是在滑动过程中图片的某一边缘越过了屏幕的边缘,需要进行回弹。假设滑动过程中只有图片的左侧边缘越过屏幕左侧边缘,而上下边缘都没有越过屏幕边缘,则只需要在x轴方向上进行滑动+回弹,y轴方向只需滑动。为了使动画自然,x轴的滑动+回弹动画必须和y轴的滑动动画同时结束。那么在计算x轴的滑动动画的参数时必须调整动画预设的持续时间,以便空出时间完成回弹的动画。回弹动画的计算就很简单了,只需在滑动动画结束以后(onAnimationEnd(Animatoranimation)回调方法中),再追加一个以当前位置为起点,以屏幕边缘为终点,总持续时间减去滑动动画持续时间的剩余为持续时间的匀加速动画即可。

0x2 kotlin实现

最终用kotlin实现的版本在这里

https://github.com/knightingal/KSlideView

用kotlin重写的KSlideView和java版本在逻辑上是一样的。不同之处在于采用了一些kotlin特有的语法

去getter和setter

这大概是kotlin的诸多语法糖中最为人熟知,也是最简便易用的。它的普遍适用性让人甚至察觉不到它的存在。比如在java版本的YImageView中大量存在的this.getY()this.getX()等,在kotlin中只需要一个yx即可。

setXE.setDuration(duration);
setXE.setInterpolator(new AccelerateInterpolator());

在kotlin中可以简化为

setXE.duration = duration
setXE.interpolator = AccelerateInterpolator()

尽管View.xView.yAnimatorSet.durationAnimatorSet.interpolator本身依然是定义在java代码中的私有成员变量。只要提供了标准的setter和getter方法,kotlin就可以按照公共成员变量一样对其进行访问。

这样的语法糖在kotlin中随处可见俯拾皆是,这里就不一一列举了。

if expression

kotlin中另一个有趣的语法糖。它可以将java中的类似

int max;
if (a > b) {
    max = a;
} else {
    max = b;
}

的结构转化为

val max = if (a > b) a else b

有些类似java中的三元操作符?:,但是比三元操作符更具扩展性,可以容纳更多了逻辑操作,比如这样

val max = if (a > b) {
    print("Choose a")
    a
} else {
    print("Choose b")
    b
}

于是我们可以看到原先java代码中的这样的代码块:

if (locationIndex == 1) {
    if (yImageSlider.getAlingLeftOrRight() == 0) {
        left = contentImageWidth + YImageSlider.SPLITE_W;
        top = 0;
        right = contentImageWidth + YImageSlider.SPLITE_W + bitmap_W;
        bottom = bitmap_H;
    } else {
        left = screamW + YImageSlider.SPLITE_W;
        top = 0;
        right = screamW + YImageSlider.SPLITE_W + bitmap_W;
        bottom = bitmap_H;
    }
} else if (locationIndex == -1) {
    if (yImageSlider.getAlingLeftOrRight() == 0) {
        left = -bitmap_W - YImageSlider.SPLITE_W;
        top = 0;
        right = -YImageSlider.SPLITE_W;
        bottom = bitmap_H;
    } else {
        left = -(bitmap_W + YImageSlider.SPLITE_W + contentImageWidth - screamW);
        top = 0;
        right = -(YImageSlider.SPLITE_W + contentImageWidth - screamW);
        bottom = bitmap_H;
    }
} else {
    if (yImageSlider.getAlingLeftOrRight() == 0) {
        left = 0;
        top = 0;
        right = bitmap_W;
        bottom = bitmap_H;
    } else {
        left = -(contentImageWidth - screamW);
        top = 0;
        right = screamW;
        bottom = bitmap_H;
    }
}

在kotlin中被简化为

val left = if (locationIndex == 1)
    if (yImageSlider.alingLeftOrRight == 0)
        contentImageWidth + YImageSlider.SPLITE_W
    else
        screamW + YImageSlider.SPLITE_W
else if (locationIndex == -1)
    if (yImageSlider.alingLeftOrRight == 0)
        -bitmap_W - YImageSlider.SPLITE_W
    else
        -(bitmap_W + YImageSlider.SPLITE_W + contentImageWidth - screamW)
else
    if (yImageSlider.alingLeftOrRight == 0)
        0
    else
        -(contentImageWidth - screamW)

val right = if (locationIndex == 1)
    if (yImageSlider.alingLeftOrRight == 0)
        contentImageWidth + YImageSlider.SPLITE_W + bitmap_W
    else
        screamW + YImageSlider.SPLITE_W + bitmap_W
else if (locationIndex == -1)
    if (yImageSlider.alingLeftOrRight == 0)
        -YImageSlider.SPLITE_W
    else
        -(YImageSlider.SPLITE_W + contentImageWidth - screamW)
else
    if (yImageSlider.alingLeftOrRight == 0)
        bitmap_W
    else
        screamW

什么,你不觉得这是简化?哈哈,其实写完这段代码以后我也觉得,这里有点滥用之嫌。反而原先java的版本更清晰易读。

总之语法糖很好,不要滥用,一切奇技淫巧都要为清晰简洁服务。比如

val destX:Float = if (x > 0) 0.toFloat() else minX.toFloat()

这样就很好嘛。

回调函数

这个就不再是语法糖之流的小打小闹了。kotlin的函数式特性不仅体现在引入了lambda,它的函数定义也可以脱离类独立存在,并且无论是独立的函数还是类中的函数,都可以作为对象进行引用和传递,这一特性的引入还是将android开发中的回调场景从大量的listener中解放出来了。

以前我们用java开发android,为了解决回调问题各类的listener层出不穷非常烦人。比如为了让YImageSlider响应YImageView越过屏幕边缘时触发的事件我不得不在YImageView中定义接口:

interface EdgeListener {
    void onXEdge(YImageView yImageView);

    void onYEdge(YImageView yImageView);

    void onGetBackImg(YImageView yImageView);

    void onGetNextImg(YImageView yImageView);
}

然后让YImageSlider实现EdgeListener,定义EdgeListener中的四个回调操作。并且在每一个YImageView实例初始化时持有YImageSlider的引用edgeListener,之后通过edgeListener进行回调操作。这种套路在座的各位Android开发时也算是见得多了,就不啰嗦了。主要说一下在Kotlin中有了函数式加持之后的变化。

Kotlin中取消了YImageView.EdgeListener接口,取而代之的是四个成员函数的声明

lateinit var postGetBackImg: ()->Unit
lateinit var postGetNextImg: ()->Unit

lateinit var postXEdgeEvent: ()->Unit
lateinit var postYEdgeEvent: ()->Unit

这里的声明形式和普通的以fun关键字开始的函数声明不太一样,因为其实这四个是lambda。我们可以看到,和java的interface类型中的方法一样,只是声明了名字和形式,没有具体实现,从形式上来看,这里更像是声明了四个变量:postGetBackImgpostGetNextImgpostXEdgeEventpostYEdgeEvent是这四个变量的名字,()->Unit是类型,代表了一个没有入参,没有返回值的函数。类型声明中没有?,代表这个变量不可以为null,但是需要在初始化后动态的赋值,所以使用了lateinit关键字,表示初始化时不赋值。由于需要在初始化后动态赋值,所以不可以声明为常量,使用var关键字。这意味这放弃编译器对变量是否为空,是否有重新赋值进行检查,程序员必须自己保证在四个函数在调用时已经被赋值了,否则一个大大的空指针异常在等着你。

当然我也可以在构造函数中对这四个变量赋值,那么也就不需要什么lateinit修饰,不用担心空指针异常,但是这样会导致构造函数变得像臭名昭著的mfc里面那些一样复杂,想想还是算了。

下面的关注点是如何在YImageSlider中将回调函数赋进去,以下四种赋值形式都是等效的。

contentView.postGetBackImg = this::onGetBackImg

其中YImageSlider.onGetBackImg是一个函数:

fun onGetBackImg() {
    //略
}

这种形式是将函数的引用赋值给lambda,注意针对对象方法的引用,使用的是双冒号符号。

contentView.postGetNextImg = { onGetNextImg() }

这种是通过创建匿名lambda调用函数的方式实现间接赋值。onGetNextImg是一个和onGetBackImg类似的方法。这里的onGetNextImg是在匿名lambda中被调用而非引用,所以完整的写法是this.onGetNextImg(),和java一样,这个this可以省略。

contentView.postXEdgeEvent = this.onXEdge

其中onXEdge是lambda

val onXEdge : ()->Unit = {
}

这种形式是将lambda的引用赋值给lambda变量,很好理解

contentView.postYEdgeEvent = { onYEdge() }

postGetNextImg一样也是创建匿名lambda的方式实现间接引用,只不过这里调用的是另一个lambda。

0x3 结语

关于这个项目要说的大约就是这些。kotlin还有一些其他有意思的地方,比如类似es6的字符串模板,打印日志的时候不要太好用,比起java还在傻傻的用+号拼接字符串,甚至更傻的用StringBuilder/StringBuffer来做这些事情,真是高不知道哪去了。

最后还有一些高级特性,暂时没有使用到的场合,自然也没有领会到这些高级特性的妙处,等以后用到了再说吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,085评论 25 707
  • 前言 人生苦多,快来 Kotlin ,快速学习Kotlin! 什么是Kotlin? Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,201评论 9 118
  • Google在今年的IO大会上宣布,将Android开发的官方语言更换为Kotlin,作为跟着Google玩儿An...
    蓝灰_q阅读 76,857评论 31 489
  • 不重要的废话 前段时间看了一遍《Programming Kotlin》,主要目的是想提高自己的英文阅读能力,能力提...
    珞泽珈群阅读 3,359评论 1 7
  • 牛市特征就是慢涨快跌,这个过程伴随了比特币从1500到10000的全过程。值得注意的是,比特币如果强势上涨,一些弱...
    李宁117阅读 116评论 0 0