美文网首页
类似京东快报文字跑马灯效果

类似京东快报文字跑马灯效果

作者: 彭小先生 | 来源:发表于2018-05-22 14:28 被阅读0次

    商城类App基本都会需要这种跑马灯(上下切换效果),这里简易实现了一下。

    主要代码
    //
    //  PZScrollLabel.m
    //  跑马灯
    //
    //  Created by peng on 2018/5/22.
    //  Copyright © 2018年 peng. All rights reserved.
    //
    
    #import "PZScrollLabel.h"
    
    @interface PZScrollLabel ()
    @property (nonatomic, strong)NSArray      *contenArray;
    @property (nonatomic, strong)NSTimer      *scrollTimer;
    @property (nonatomic, assign)NSInteger     index;
    @property (nonatomic, strong)UILabel      *upLabel;
    @property (nonatomic, strong)UILabel      *downLabel;
    @property (nonatomic, assign)CGFloat       height;
    @end
    @implementation PZScrollLabel
    
    - (instancetype)initWithFrame:(CGRect)frame WithContens:(NSArray *)contentArr
    {
        if(self = [super initWithFrame:frame])
        {
            self.contentSize = CGSizeMake(frame.origin.x, frame.size.height*contentArr.count);
            self.pagingEnabled = YES;
            self.contenArray = contentArr;
            self.index = 0;
            self.height = frame.size.height;
            [self addSubview:self.upLabel];
            [self addSubview:self.downLabel];
            //开启定时器 自动滚动
            [[NSRunLoop  currentRunLoop] addTimer:self.scrollTimer forMode:NSRunLoopCommonModes];
            //添加点击手势
            UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapScrollLabelAction:)];
            [self addGestureRecognizer:tap];
        }
        return self;
    }
    #pragma mark --  Method
    - (void)scrollTimerBegin
    {
        [[NSRunLoop  currentRunLoop] addTimer:self.scrollTimer forMode:NSRunLoopCommonModes];
    }
    //选择某个文字进行操作  利用block传递选择了某个
    - (void)tapScrollLabelAction:(UITapGestureRecognizer *)tap
    {
        [self.scrollTimer invalidate];
        self.scrollTimer = nil;
        if(self.selectScrollLabel)
        {
            self.selectScrollLabel(self.index);
        }
    }
    //定时器操作  10.0以下
    - (void)scrollTimerAction
    {
        self.index ++;
        if(self.index >= self.contenArray.count)
        {
            self.index = 0;
        }
        [UIView transitionWithView:self.upLabel duration:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            CGRect upFrame = self.upLabel.frame;
            upFrame.origin.y = -self.height;
            self.upLabel.frame = upFrame;
            CGRect downFrame = self.downLabel.frame;
            downFrame.origin.y = 0;
            self.downLabel.frame = downFrame;
            [self.downLabel setText:self.contenArray[self.index]];
            
        } completion:^(BOOL finished) {
            CGRect upFrame = self.upLabel.frame;
            upFrame.origin.y = self.height;
            self.upLabel.frame = upFrame;
            UILabel *tempLabel = self.upLabel;
            self.upLabel = self.downLabel;
            self.downLabel = tempLabel;
        }];
    }
    - (UILabel *)upLabel
    {
        if(_upLabel == nil)
        {
            _upLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.height)];
            [_upLabel setText:self.contenArray[self.index]];
        }
        return _upLabel;
    }
    - (UILabel *)downLabel
    {
        if(_downLabel == nil)
        {
            _downLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, self.frame.size.height, self.frame.size.width, self.height)];
        }
        return _downLabel;
    }
    - (NSTimer *)scrollTimer
    {
        if(_scrollTimer == nil)
        {
            
            if (@available(iOS 10.0, *)) {
                _scrollTimer = [NSTimer scheduledTimerWithTimeInterval:2.0 repeats:YES block:^(NSTimer * _Nonnull timer) {
                    self.index ++;
                    if(self.index >= self.contenArray.count)
                    {
                        self.index = 0;
                    }
                    [UIView transitionWithView:self.upLabel duration:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                        CGRect upFrame = self.upLabel.frame;
                        upFrame.origin.y = -self.height;
                        self.upLabel.frame = upFrame;
                        CGRect downFrame = self.downLabel.frame;
                        downFrame.origin.y = 0;
                        self.downLabel.frame = downFrame;
                        [self.downLabel setText:self.contenArray[self.index]];
                        
                    } completion:^(BOOL finished) {
                        CGRect upFrame = self.upLabel.frame;
                        upFrame.origin.y = self.height;
                        self.upLabel.frame = upFrame;
                        UILabel *tempLabel = self.upLabel;
                        self.upLabel = self.downLabel;
                        self.downLabel = tempLabel;
                    }];
                }];
            } else {
                _scrollTimer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(scrollTimerAction) userInfo:nil repeats:YES];
            }
        }
        return _scrollTimer;
    }
    @end
    
    
    #import <UIKit/UIKit.h>
    
    typedef void(^selectScrollLabelBlock)(NSInteger);
    
    @interface PZScrollLabel : UIScrollView
    //copy 修饰block  使其在堆上 可以在作用域外访问
    @property (nonatomic, copy)selectScrollLabelBlock selectScrollLabel;
    - (instancetype)initWithFrame:(CGRect)frame WithContens:(NSArray *)contentArr;
    @end
    

    注:使用的时候只需要传入我们要显示内容数组即可。

    相关文章

      网友评论

          本文标题:类似京东快报文字跑马灯效果

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