跑马灯

作者: 奋斗的小老鼠 | 来源:发表于2017-02-21 18:07 被阅读16次

在我们的项目中我们时长会遇到一些比较长的标题,但是在项目中由于UI控件的大小限制,我们可能会用到跑马灯去展示

下面我来贴一下我的代码:
#import <UIKit/UIKit.h>

#define TEXTCOLOR [UIColor whiteColor]
#define TEXTFONTSIZE 17

@interface LSPaoMaView : UIView

- (instancetype)initWithFrame:(CGRect)frame title:(NSString*)title;

- (void)start;//开始跑马
- (void)stop;//停止跑马

@end
#import "LSPaoMaView.h"

@implementation LSPaoMaView
{
    
    CGRect rectMark1;//标记第一个位置
    CGRect rectMark2;//标记第二个位置
    
    NSMutableArray* labelArr;
    
    NSTimeInterval timeInterval;//时间
    
    BOOL isStop;//停止
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)initWithFrame:(CGRect)frame title:(NSString*)title
{
    self = [super initWithFrame:frame];
    if (self) {
        //
        title = [NSString stringWithFormat:@"      %@     ",title];//间隔
        
        timeInterval = [self displayDurationForString:title];
        
        self.alpha = 0;
        self.clipsToBounds = YES;
        
        //
        UILabel* textLb = [[UILabel alloc] initWithFrame:CGRectZero];
        textLb.textColor = TEXTCOLOR;
        textLb.font = [UIFont boldSystemFontOfSize:TEXTFONTSIZE];
        textLb.text = title;
        
        //计算textLb大小
        CGSize sizeOfText = [textLb sizeThatFits:CGSizeZero];
        
        rectMark1 = CGRectMake(0, 0, sizeOfText.width, self.bounds.size.height);
        rectMark2 = CGRectMake(rectMark1.origin.x+rectMark1.size.width, 0, sizeOfText.width, self.bounds.size.height);
        
        textLb.frame = rectMark1;
        [self addSubview:textLb];
        
        labelArr = [NSMutableArray arrayWithObject:textLb];

        
        //判断是否需要reserveTextLb
        BOOL useReserve = sizeOfText.width > frame.size.width ? YES : NO;
        
        if (useReserve) {
            //alloc reserveTextLb ...
            
            UILabel* reserveTextLb = [[UILabel alloc] initWithFrame:rectMark2];
            reserveTextLb.textColor = TEXTCOLOR;
            reserveTextLb.font = [UIFont boldSystemFontOfSize:TEXTFONTSIZE];
            reserveTextLb.text = title;
            [self addSubview:reserveTextLb];
            
            [labelArr addObject:reserveTextLb];
            
            [self paomaAnimate];
        }
  
    }
    return self;
}



- (void)paomaAnimate{
    
    if (!isStop) {
        //
        UILabel* lbindex0 = labelArr[0];
        UILabel* lbindex1 = labelArr[1];
        
        [UIView transitionWithView:self duration:timeInterval options:UIViewAnimationOptionCurveLinear animations:^{
            //
            
            lbindex0.frame = CGRectMake(-rectMark1.size.width, 0, rectMark1.size.width, rectMark1.size.height);
            lbindex1.frame = CGRectMake(lbindex0.frame.origin.x+lbindex0.frame.size.width, 0, lbindex1.frame.size.width, lbindex1.frame.size.height);
            
        } completion:^(BOOL finished) {
            //
            
            lbindex0.frame = rectMark2;
            lbindex1.frame = rectMark1;
            
            [labelArr replaceObjectAtIndex:0 withObject:lbindex1];
            [labelArr replaceObjectAtIndex:1 withObject:lbindex0];
            
            [self paomaAnimate];
        }];
    }
}


- (void)start{
    isStop = NO;
    UILabel* lbindex0 = labelArr[0];
    UILabel* lbindex1 = labelArr[1];
    lbindex0.frame = rectMark2;
    lbindex1.frame = rectMark1;
    
    [labelArr replaceObjectAtIndex:0 withObject:lbindex1];
    [labelArr replaceObjectAtIndex:1 withObject:lbindex0];
    
    [self paomaAnimate];
    
}
- (void)stop{
    isStop = YES;
}

- (NSTimeInterval)displayDurationForString:(NSString*)string {
    
    return string.length/5;
//    return MIN((float)string.length*0.06 + 0.5, 5.0);
}

相关文章

  • GitHub上受欢迎的Android UI Library(下)

    跑马灯 MarqueeView★1568 - 垂直翻页公告 MarqueeViewDemo★896 - 跑马灯Vi...

  • Android 基础 UI 之 TextView

    一、显示富文本 效果图image 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯:...

  • textview - 跑马灯

    textview 的跑马灯不用说了吧,大家肯定都知道这是个啥,但是呢我还是放个图吧: 实现单个跑马灯 跑马灯的核心...

  • Kevin Learn Android:TextView

    一、显示富文本 效果图01.png 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯...

  • TextView漏的知识点

    跑马灯效果

  • leetcode ascii码 汇总

    跑马灯效果

  • iOS 跑马灯的实现

    介绍 我们一说起跑马灯第一个想到的就是:山寨机。接下来介绍的跑马灯和那个跑马灯是不一样滴。在iOS中,跑马灯是指l...

  • Android实现跑马灯效果

    实现方式1 跑马灯相关属性 实现方式2:自定义跑马灯类 上面方式1能暂时实现跑马灯效果,但在多次点击事件之后容易失...

  • 流水灯(2016-04-03)

    跑马灯: 左右跑马灯(for循环后面不要加分号) 数码管依次显示0-9

  • flutter跑马灯

    flutter_marquee flutter 插件 flutter 跑马灯可以指定跑马灯的方向可以传入数组,可以...

网友评论

      本文标题:跑马灯

      本文链接:https://www.haomeiwen.com/subject/tevuwttx.html