iOS：一用就上瘾的跑马灯视图

简介

在产品开发过程中，有可能会遇到这样一个情况：一个UILabel设计为仅能显示一行，但是在小屏手机中，因为宽度不够，最终会显示省略号...。但是这些信息又比较重要、不能省略，却没有充足的空间换行显示。那么问题来了，该怎么办呢？这个时候，聪明的产品经理摸了摸下巴，突然双眼放光“用跑马灯啊”

好吧，既然产品都给出了精妙绝伦的方案，程序员的使命就是义无反顾地实现它！

Github地址

喜欢就给颗小星星哟❤️ JXMarqueeView地址️

动图预览

JXMarqueeType.left：往左滚动
JXMarqueeType.right：往右滚动
JXMarqueeType.reverse：循环反转
图片滚动
自定义View

原理

使用CADisplayLink，每次屏幕刷新的时候，调整视图的位置就行。为了达到循环显示，需要添加两个一样的视图。
为了扩大跑马灯的使用范围，我进行了抽象化处理，并没有写死用UILabel来实现，而是暴露了一个属性contentView: UIView。只要是UIView及其子类，都可以用来进行跑马灯显示。对于复杂的视图，需要自己重写contentView的sizeThatFits方法，返回正确的size即可。

这里分享两个骚操作：

如何实现UIView的拷贝？

//骚操作：UIView是没有遵从拷贝协议的。可以通过UIView支持NSCoding协议，间接来复制一个视图
let otherContentViewData = NSKeyedArchiver.archivedData(withRootObject: validContentView)
let otherContentView = NSKeyedUnarchiver.unarchiveObject(with: otherContentViewData) as! UIView
otherContentView.frame = CGRect(x: validContentView.bounds.size.width + contentMargin, y: 0, width: validContentView.bounds.size.width, height: self.bounds.size.height)
containerView.addSubview(otherContentView)

如何断开CADisplayLink的循环引用？大家知道CADisplayLink和NSTimer都会对Target强持有，Target一般也会强持有它们。如果使用闭包回调的API，可以解决这个问题，但是这些API要求iOS的系统都比较高。所以，还是需要直面这个问题。

override func willMove(toSuperview newSuperview: UIView?) {
        //骚操作：当视图将被移除父视图的时候，newSuperview就为nil。在这个时候，停止掉CADisplayLink，断开循环引用，视图就可以被正确释放掉了。
        if newSuperview == nil {
            self.stopMarquee()
        }
    }

使用

UILabel使用示例

let label = UILabel()
label.textColor = UIColor.red
label.font = UIFont.systemFont(ofSize: 30, weight: .medium)
label.text = "abcdefghijklmnopqrstuvwxyz"

marqueeView.contentView = label
marqueeView.contentMargin = 50
marqueeView.marqueeType = .left
self.view.addSubview(marqueeView)

UIImageView使用示例

let imageView = UIImageView(image: UIImage(named: "haizeiwang.jpeg"))
imageView.contentMode = .scaleAspectFill

marqueeView.contentView = imageView
marqueeView.marqueeType = .reverse
self.view.addSubview(marqueeView)

拷贝自定义View

如果contentView带有圆角、阴影等，通过NSCoding协议拷贝的View会丢失掉这些信息。这种特殊情况需要自己重新创建一个同样的自定义View。重写JXMarqueeViewCopyable协议的func copyMarqueeView() -> UIView方法即可。具体可以参考demo里面的源码。

Github地址

喜欢就给颗小星星哟❤️ JXMarqueeView地址️