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

YImageView主要任务是根据自己的定位(hideLeft，contentView，hideRight)，将图片按照正确的大小显示在正确的位置，以及处理在手势滑动和图片切换时的动画处理。
YImageView首先override了setFrame方法，根据localIndex获取自己在YImageSlider中的定位信息，再根据图片的长宽，计算left，top，right，bottom数值，最后调用方法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中只需要一个y，x即可。

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

在kotlin中可以简化为

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

尽管View.x，View.y，AnimatorSet.duration，AnimatorSet.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类型中的方法一样，只是声明了名字和形式，没有具体实现，从形式上来看，这里更像是声明了四个变量：postGetBackImg、postGetNextImg、postXEdgeEvent、postYEdgeEvent是这四个变量的名字，()->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来做这些事情，真是高不知道哪去了。

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