添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
10135

在产品开发过程中,有可能会遇到这样一个情况:一个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地址️

    分类:
    iOS