【IOS】自定义可点击的多文本跑马灯YFRollingLabel

2023-01-14 07:37:34

需求

项目中需要用到跑马灯来仅展示一条消息，长度合适则不滚动，过长则循环滚动。

虽然不是我写的，但看了看代码，是在一个UIView里面放入两个UILabel，

在前一个快结束的时候，另一个显示。然而点击处理的确是UIView的点击事件。

然而看到比如地铁、公交里面的跑马灯是分了很多段显示的。虽然说可以将多段合并为一段来显示，

但是如果各个需要点击事件又该如何处理呢？于是我来自己实现可点击的多段跑马灯。

所以这篇随笔我要实现的跑马灯包含下面这种效果:（图中有5段点击不同文本可触发相应的事件）

弯路

还记得上一篇随笔【IOS】将字体大小不同的文字底部对齐么？

虽然不能够做到多个UILabel的底部对齐，但是我们可以通过继承UILabel来改变文本竖直方向的位置。

所以呢，我最初的想法是继承UILabel,可以保持其继承性, 通过NSTimer来直接慢慢移动UILable里面的文本。

这里出现了两个问题：（以@"这是自定义跑马灯里面要移动的文本"为例）

1.移动是可以移动，但是在文本左移至快要看不见(只剩下"移动的文本")的时候, 如何让@"这是.."开始从右侧出现呢？

2.文本过长的时候，看不见的部分将被截断，所以在移动的时候，只有部分文本了。

第一种好像没有办法，UILabel只存在一个文本的bounds, 不可能让他一部分在左边, 一部分在右边。

第二种就因为存在默认的属性NSLineBreakMode:NSLineBreakByWordWrapping,就算不截断文本也只会变为省略号。

所以这种方法作罢。。。。

实现

首先要明确的是本跑马灯继承了UIView且需要两个UILabel、定时器NSTimer。

在初始化时，传入字符串数组，并计算各个字符串的自适应大小

CGRect textRect = [((NSString *)_textArray[i]) boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:kFont} context:nil];

[_textRectArray addObject:[NSValue valueWithCGRect:textRect]];

如果传入的字符串数组个数为1且自适应宽度<UIView宽度，则不会滚动。重新写一个UILabel用于显示就行了

其他情况下，就是可以滚动的, 在此实例化两个UILabel，并打开定时器了:

定时器相关:

_timer = [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];

[[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
//为什么要将定时器起放入LOOP中呢?
//如果此RunLoop正在执行一个连续性的运算，timer就会被延时出发。
//也就是说，如果你将跑马灯放入scrollview上，当滑动scrollview的时候，定时器就不会动了

//相关方法:
//[_timer setFireDate:[NSDate date]]; 　　开始

//[_timer setFireDate:[NSDate distantFuture]];   暂停
//取消定时器
//[_timer invalidate];

//_timer = nil;　　//防止野指针

//定时器执行事件：

-(void)timerAction:(NSTimer *)timer{}

现在我们要做的就是在每次进入该方法的时候来设置两个UILabel。

好了，现在假设传入了4个字符串@[@"这个是第0个字符串",@"这个是第1个字符串",@"这个是第2个字符串",@"这个是第3个字符串"];

只有两个Label, 不管向右滚动还是向左滚动，我们将最初显示的定为Labels[0], 后来显示的定位Labels[1]

定义一个变量，实时的存放前一个UILabel的origin.X值，从0开始

1.每次前一个UILabel暂未完全隐藏前，后一个UIlabel就已经出现（两者间有一个固定的距离 internalWidth）

还需要根据speed的值更改Labels[0]的大小的增减来控制Labels[0]的位置（更改offsetX值)。

通过这个距离和前一个的位置则可以实时的计算后一个UILabel的位置（origin.X值）。

2.每次前一个UILabel完全隐藏时就需要重新设置一个值，此时刻在每次前一个UILabel完全看不到后只进入一次

同时将左右两个UILabel变换一下位置。往左滚动: A<--B，A消失后，A跑到B右边去了; 成为B<--A，B消失后，又要到A右边去。

所以只需要设置offsetX = _labels[1].frame.origin.x;//A消失后，将后面的B位置作为下一个将消失的label的位置，A变为后面一个，

　　　　　　　　　　　　　　　　　　　　　　 //其位置根据B的位置实时计算出来。每次前一个消失后，如此循环的更换。

但是这样只更改了位置，文本以及大小却没有变换，见3.

3.对于只有一个文本来说，AB的内容都是一样的。但是对于传入的四个字符串而言，每次重新设置值的时候，需要更改AB内容。

同时，对于长度不等的字符串，需要根据不同的文本大小来设置相应AB的Frame。

所以需将四个字符串文本大小，文本内容在之前保存为一个数组。定义一个始终记录当前正准备消失的（前一个）UIlabel的位置：_currentIndex

在步骤1中：从两个数组中分别获取用于显示在A.B里的文本数组：labelTextArray frame数组:labelArray（从中取得宽和高）

每次AB位置交换的时候，需将currentIndex+1 : 即_currentIndex = (_currentIndex + 1) % _textArray.count;以供交换后使用。

之后分别取得当前以及下一个的Text和frame 分别保存到长度为2的数组以便使用

上面太多、太乱。。。。。。我不想看我不想看我不想看。。。。。。

这里有图: 看完上面还完全不懂的请看这个吧。

再次解释

<===============左移==================

================右移=================>

现在只看颜色 从图中看可以到无论左滚右滚绿色始终是Labels[0](将要消失的Label) 红色始终是Label[1]

正常滚动情况下:

　　绿色的offsetX值随着speed而变 : self.offsetX = self.offsetX - sign * self.speed;

　　红色的X值会随着绿色的offsetX和固定间距的关系而变 : CGFloat nextOffX = self.offsetX + sign * (((self.orientation == RollingOrientationLeft)? firstRect.size.width : lastRect.size.width) + 　　self.internalWidth);

　　通过_currentIndex值从保存到的数据中获取到红色、绿色的内容和大小后赋值:

当绿色消失的一瞬间:

　　本该是在右边的红色一下子吓绿了 : self.offsetX = _labels[1].frame.origin.x;

　　消失的绿色又将会按照正常滚动的情况下变为红色

　　 _currentIndex指得始终是绿色内容的索引: _currentIndex = (_currentIndex + 1) % _textArray.count;

　　通过这个值又将会获取按照正常滚动的情况下红色、绿色的大小和文本内容

　　(两个又将会进行的流程将会在"正常滚动情况下"的蓝色部分操作)

}

好了解释到此结束看着好累。。。。慢着还有点击事件没写完

点击事件：在给UILabel添加了Tap手势后进行处理

-(void)labelTap:(UITapGestureRecognizer *)gesture{

    NSInteger tag = ((UILabel *)[gesture view]).tag - ;

    NSInteger index;

    if(tag == ){   //如果是(Labels[0])绿色

        index = _currentIndex;

    }else if (tag == ){  //如果是(Labels[1])红色  就是当前点击的后一个

        index = (_currentIndex + ) % _textArray.count;

    }else{

        index = _currentIndex;

    }   
    if(self.labelClickBlock){

        self.labelClickBlock(index);

    }

}

终点

代码见GitHub: ====> YFRollingLabel PS：源码以及GitHub文档都是用蹩脚的英语写的，也不知道会不会有人看。。

另外说明记录存在的问题：

对于放入的文本数组长度不能太短因为里面只有两个UILabel 如果长度太短的话并且间距也小的情况下

在绿色刚消失后，又会立马变为红色，出现在目前的绿色右边，而不是慢慢的移动出现。

文本太长太长的话(几百个中文，正常情况下不会设置这么多吧), 会导致获取的文本宽度过长，UILabel宽度过长，文本直接就不显示了，但点击事件还是有的说明了还存在。。。这就搞不懂。。。

好了，终于写完了，Windows 10 Mobile 万岁！！！

PS:新的知识点:CADisplayLink

CADisplayLink是一个能让我们以和屏幕刷新率相同的频率（每秒60次）将内容画到屏幕上的定时器。

但如果调用的方法比较耗时，超过了屏幕刷新周期，就会导致跳过若干次回调调用机会。

//创建

CADisplayLink displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(doSomeThing:)];

[displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];

//设置是否停止

displayLink.Pause = NO/YES;

//释放

[displayLink invalidate];

displayLink = nil;

码农公寓

PS:新的知识点:CADisplayLink

相关文章