你的位置:首页 > 操作系统

[操作系统]【IOS】自定义可点击的多文本跑马灯YFRollingLabel


需求

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

虽然不是我写的,但看了看代码,是在一个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 - 100;  NSInteger index;  if(tag == 0){  //如果是(Labels[0])绿色    index = _currentIndex;  }else if (tag == 1){ //如果是(Labels[1])红色 就是当前点击的后一个    index = (_currentIndex + 1) % _textArray.count;  }else{     index = _currentIndex;  }  
if(self.labelClickBlock){ self.labelClickBlock(index); }}

 

终点

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

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

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

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

  

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

好了,终于写完了,Windows 10 Mobile 万岁!!!