跑马灯控件网上也有很多Demo,但都是传NSString类型的字符串,无法满足不同格式显示的需求,所以决定自己写一个同时支持NSString和NSAttributedString的跑马灯控件以方便自己使用。
gif速度有点快。。。
头文件如下所示(非常简单,像平时使用UILabel一样就OK了):
@interface SLMarqueeControl : UIView
@property (nonatomic, readonly) UILabel *marqueeLabel;
@end
核心代码:
监控app从后台进入前台时的通知(解决从后台回来时停止滚动问题)
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(appBecomeActive:)
name:UIApplicationDidBecomeActiveNotification
object:nil
];
利用KVO监控text变化,完成滚动过程。
[self.marqueeLabel addObserver:self
forKeyPath:@"text"
options:NSKeyValueObservingOptionNew
context:nil
];
利用KVO监控attributedText变化,完成滚动过程。
[self.marqueeLabel addObserver:self
forKeyPath:@"attributedText"
options:NSKeyValueObservingOptionNew
context:nil
];
完成动画过程。
- (void)startAnimation {
if (0 == CGRectGetWidth(self.bounds)
|| 0 == CGRectGetHeight(self.bounds)) {
return;
}
[self.innerContainer.layer removeAnimationForKey:@"Marquee"];
[self bringSubviewToFront:self.innerContainer];
CGSize size = [self evaluateMarqueeLabelContentSize];
for (UIView *view in self.innerContainer.subviews) {
if ([view isKindOfClass:[UILabel class]]) {
[view removeFromSuperview];
}
}
CGRect rect = CGRectMake(0.f, 0.f, size.width + kLabelOffset, CGRectGetHeight(self.bounds));
UILabel *label = [[UILabel alloc] initWithFrame:rect];
label.backgroundColor = [UIColor clearColor];
label.text = self.marqueeLabel.text;
label.attributedText = self.marqueeLabel.attributedText;
[self.innerContainer addSubview:label];
if (size.width > CGRectGetWidth(self.bounds)) {
CGRect nextRect = rect;
nextRect.origin.x = size.width + kLabelOffset;
UILabel *nextLabel = [[UILabel alloc] initWithFrame:nextRect];
nextLabel.backgroundColor = [UIColor clearColor];
nextLabel.text = self.marqueeLabel.text;
nextLabel.attributedText = self.marqueeLabel.attributedText;
[self.innerContainer addSubview:nextLabel];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];
animation.keyTimes = @[@0.f, @1.f];
animation.duration = size.width / 50.f;
animation.values = @[@0, @(-(size.width + kLabelOffset))];
animation.repeatCount = INT16_MAX;
animation.timingFunction = [CAMediaTimingFunction functionWithName:@"linear"];
[self.innerContainer.layer addAnimation:animation forKey:@"Marquee"];
} else {
label.frame = self.bounds;
}
}
控件使用很简单:
NSString类型字符串
NSString *string = @"我是跑马灯,我只能不停的滚动才能体现我的价值!请注意,前方高能;呃、其实啥也没有~~~";
self.marqueeControl.marqueeLabel.text = string;
NSAttributedString类型字符串
NSMutableAttributedString *attr = [[NSMutableAttributedString alloc] initWithString:string];
[attr addAttributes:@{NSForegroundColorAttributeName:[UIColor yellowColor]}
range:NSMakeRange(5, 9)];
[attr addAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],
NSFontAttributeName:[UIFont systemFontOfSize:12.f]}
range:NSMakeRange(18, 8)];
[attr addAttributes:@{NSForegroundColorAttributeName:[UIColor greenColor]}
range:NSMakeRange(30, 6)];
self.attrMarqueeControl.marqueeLabel.attributedText = attr;
GitHub demo: 跑马灯