图文可编排的跑马灯效果

近日，实现公司要求，完成可编排跑马灯效果。因此，初步实现需求。下述为主要代码

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@protocol RPLoopQueueViewDelegate <NSObject>

@optional
-(void)didClickArrayBtn:(UIButton *)sender;

@end


@interface RPLoopQueueView : UIView

@property (nonatomic, strong) NSArray * infoArr;//输入数据源

@property (nonatomic, assign) int keepSecond;   //静止展示时间,秒

/**代理 */
@property (weak, nonatomic) id <RPLoopQueueViewDelegate> delegate;

@end

NS_ASSUME_NONNULL_END

#import "RPLoopQueueView.h"
#import "UIView+Ext.h"
#import "UIImageView+WebCache.h"

#define Width [UIScreen mainScreen].bounds.size.width
#define Height [UIScreen mainScreen].bounds.size.height
#define randomColor [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1.0f]

@interface RPLoopQueueView ()

@property (nonatomic, strong) UIScrollView * bgScrollView;
/**link */
@property (strong, nonatomic) CADisplayLink *link;
@property (nonatomic,assign) int cellScroTimer_yu; //cell滚动用定时器f阈值
@property (nonatomic,assign) int cellScroTimer_yu_jsh; //cell滚动用定时器f阈值计数

@end

@implementation RPLoopQueueView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.width, 40)];
        bgView.layer.cornerRadius = 10.0f;
        bgView.clipsToBounds = YES;
        bgView.backgroundColor = [UIColor colorWithRGB:0xF3F7FF];
        
        [self addSubview:bgView];
        [self addSubview:self.bgScrollView];
        
        _keepSecond = 2;    //默认2s
    }
    return self;
}

- (void)setKeepSecond:(int)keepSecond
{
    _keepSecond = keepSecond;
}

- (void)setInfoArr:(NSArray *)infoArr
{
    _infoArr = infoArr;
    
    self.bgScrollView.contentSize = CGSizeMake(self.width, infoArr.count*self.height);
    
    [self setLoopView];
}

- (void)setLoopView
{
    for (int i = 0; i<self.infoArr.count+2; i++) {
        
        UIButton * cellBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        cellBtn.frame = CGRectMake(0, self.height*i,self.width, 40);
        cellBtn.tag = 100+i;
        cellBtn.layer.cornerRadius = 10;
        cellBtn.clipsToBounds = YES;
        cellBtn.backgroundColor = [UIColor clearColor];
        [cellBtn addTarget:self action:@selector(cellClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.bgScrollView addSubview:cellBtn];
        
        NSDictionary * cellInfoDic;
        if (i == 0) {
            cellInfoDic = self.infoArr.lastObject;
        }else if (i == self.infoArr.count+1){
            cellInfoDic = self.infoArr.firstObject;
        }else{
            cellInfoDic = self.infoArr[i-1];
        }
        
        // ==================>>>>>>>>>
        // 此处可编辑需要滚动的view内容,可添加自定义subView,对应self.infoArr数据源内容
        
        UIImageView * imgV = [[UIImageView alloc]initWithFrame:CGRectMake(15, 11, 36, 18)];
        imgV.layer.cornerRadius = 3;
        imgV.layer.masksToBounds = YES;
        [cellBtn addSubview:imgV];

        UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(imgV.rightX + 10, 0, cellBtn.width-imgV.width, cellBtn.height)];
//        [label setBackgroundColor:randomColor];
        label.font = PingFangZhongChangGuiForFont(14);
        label.textColor = k333333Color;
        [cellBtn addSubview:label];

        //赋值

        [imgV sd_setImageWithURL: [NSURL URLWithString:[cellInfoDic objectForKey:@"img"]] ];
        label.text = [cellInfoDic objectForKey:@"content"];
        
        // <<<<<<<<<==================
        
        
    }
    
    if (self.infoArr.count > 1) {
        [self addTimer];
    }
}
- (void)cellClick:(UIButton *)btn
{
    if ([self.delegate respondsToSelector:@selector(didClickArrayBtn:)]) {
        [self.delegate didClickArrayBtn:btn];
    }
}

- (void)cellScroTimerFired:(CADisplayLink *)link
{
    
    
//    CLog(@"%.1f,%.1f",self.bgScrollView.contentOffset.y,self.height);
    if (self.cellScroTimer_yu) {
        if (self.bgScrollView.contentOffset.y >= (self.infoArr.count*self.height -1)) {
            self.bgScrollView.contentOffset = CGPointMake(0, 0);
        }
        self.cellScroTimer_yu_jsh = self.cellScroTimer_yu_jsh+1;
        
        if (self.cellScroTimer_yu_jsh == 100*_keepSecond) {
            //触碰阈值计数值,触发阈值变化
            self.cellScroTimer_yu = 0;
            self.cellScroTimer_yu_jsh = 0;
        }
    }else{
        self.cellScroTimer_yu_jsh = self.cellScroTimer_yu_jsh+1;
        if (self.cellScroTimer_yu_jsh == 31) {
            self.cellScroTimer_yu = 1;
            self.cellScroTimer_yu_jsh = 0;
        }else{
            self.bgScrollView.contentOffset = CGPointMake(0, self.bgScrollView.contentOffset.y +self.height / 30.0);
        }
    }
    
}

- (void)addTimer {
    if (self.link) {
        return;
    }
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(cellScroTimerFired:)];
    self.link = link;
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    
}

- (void)removeTimer {
    if (!self.link) {
        return;
    }
    [self.link invalidate];
    self.link = nil;
}

- (void)showMsg:(NSString *)msg
{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:msg message:nil preferredStyle: UIAlertControllerStyleAlert];
    
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    }]];
    
    UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
    [rootViewController presentViewController:alert animated:true completion:nil];
}

- (UIScrollView *)bgScrollView
{
    if (_bgScrollView == nil) {
        _bgScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.width, self.height)];
        _bgScrollView.scrollEnabled = NO;
    }
    return _bgScrollView;
}



@end

实现的方法为

        self.messageView = [[RPLoopQueueView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth - 50, 40)];
        self.messageView.delegate = self;
        [self.contentView addSubview:self.messageView];

可以直接根据您的需要，修改图片文字部件的属性及位置。