Giter VIP home page Giter VIP logo

zscrolllabel's Introduction

iOS 跑马灯Label

一、跑马灯Label的设计

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

二、成果展示

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];

zscrolllabel's People

Contributors

jixinzhang avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.