iOS 跑马灯Label

一、跑马灯Label的设计

  • 当UILabel限定只能显示一行时,如果文字超过Label的width就会被省略;
  • 跑马灯Label所要做的就是当文字超过Label的width时自动滚动。
  • 有如下特点:
    • 文字长度小于Label的width时,不滚动;
    • 文字长度大于Label的width时,自动滚动;
    • 当文字完全滚动显示后停止一段时间再滚动。

二、成果展示

Github 传送门

ZScollLabel.gif

三、接入使用

1.接入

直接将我的项目中中的ZScrollLabel文件夹中的内容添加到工程中即可。

2.使用

- (ZScrollLabel *)contentLabel {
    if (!_contentLabel) {
        _contentLabel = [[ZScrollLabel alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 120) / 2.0, 80, 120, 20)];
        _contentLabel.textColor = [UIColor redColor];
        _contentLabel.font = [UIFont systemFontOfSize:18.0f];
        _contentLabel.scrollDuration = 13;
        _contentLabel.layer.borderWidth = 0.5;
        _contentLabel.layer.borderColor = [UIColor lightGrayColor].CGColor;
        _contentLabel.layer.cornerRadius = 3.0;
    }
    return _contentLabel;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.automaticallyAdjustsScrollViewInsets = NO;
    
    self.contentLabel.text = @"一身诗意千寻瀑,万古人间四月天";
    [self.view addSubview:self.contentLabel];
}


3.注意事项

如果使用ZScollLabel的ViewControler有NavigationController,那么请务必要在-(void)viewDidLoad方法中添加self.automaticallyAdjustsScrollViewInsets = NO;让ZScrollLabel的Frame计算从屏幕顶部开始,而不是从导航栏的底部开始。

四、实现原理

  • 在contentView(UIView)上添加两个UILabel,左右排列。当文字长度超过contentView的宽度时,展示两个Label,添加动画;当文字长度小于contentView的宽度时,将右侧的Label隐藏,不添加动画;
  • 向左的滚动动画:使用UIView的UIViewAnimation做属性动画,更改contgentView的frame的x值;
  • 滚动结束后,延迟若干秒再次调用滚动动画;
  • 当app进入后台,动画会取消,再进入前台时动画不会恢复,所以需要添加通知在app再次进入前台时开启动画。
  • 当更新Label的文字的时候,需要先停止动画再计算是否需要开启动画。

滚动动画的代码

[UIView beginAnimations:@"scrollLabel" context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
[UIView setAnimationDuration:self.scrollDuration];
    
if (self.label.frame.size.width > self.frame.size.width) {
    self.contentView.frame = CGRectMake(-(self.label.frame.size.width + _paddingBetweenLabels), 0, size.width, size.height);
} else {
    self.contentView.frame = CGRectMake(0, 0, size.width, size.height);
}
    
[UIView commitAnimations];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,241评论 4 61
  • 跟她的名字一样,一脸灿烂的笑,连我一个女子都能被惊到,这是有怎样的魅力! 初遇是在好友熊的生日的KTV...
    竹妮阅读 235评论 0 1
  • 小景活到十八岁,家里待不下去了,他跟着一个不认识的人,跑到省城,第一件事就是吃饭。 三百六十行,行行都是为了吃饭,...
    于洛阅读 312评论 0 1
  • 今天去口腔医院拔牙,真的是劳累心碎的一天。等待就医时,拿出手机来玩儿,发现刷不出东西,给老妈打个电话吧,打不出去,...
    灼兮阅读 255评论 0 0
  • 形态完整的鹅掌,插在水里,可以保鲜很久。 在大空间或者走廊里,序列一排,可以提供很好的观感,还省心。
    陈稳阅读 272评论 0 0