iOS

来源：互联网发布：日本基因知乎编辑：程序博客网时间：2024/06/05 04:34

简述

SKAutoScrollLabel是一个同时支持水平/垂直两种类型的“跑马灯”效果的自动滚动UILabel。在滚动的边缘使用了梯度褪色来解决滚动边缘生硬的效果问题，总体效果呈现出混然天成的感觉，并且使用简单方便。如果你觉得还不错，请star支持一下吧~

效果图

如何开始

1.从GitHub上Clone-->SKAutoScrollLabel，然后查看Demo

2.直接将目录下的SKAutoScrollLabel拷贝到工程中，或在podfile文件夹中添加 pod 'SKAutoScrollLabel'

使用方法

初始化

SKAutoScrollLabel * leftLabel = [[SKAutoScrollLabel alloc] initWithFrame:CGRectMake(50, 50, [UIScreen mainScreen].bounds.size.width - 100, 50)];[self.view addSubview:leftLabel];

基本设置

leftLabel.backgroundColor = [UIColor blackColor];// 背景色leftLabel.textColor = [UIColor whiteColor];// 字体颜色leftLabel.font = [UIFont systemFontOfSize:16];// 字体大小leftLabel.direction = SK_AUTOSCROLL_DIRECTION_LEFT;// 滚动方向，这是向左滚动leftLabel.text = text;// 显示内容

实现

※ 这里仅列出关键步骤，具体方法请查阅源码

我们需要创建一个数组，来存放我们滚动时所需要展示的label，这里我们只创建两个label存放到数组中即可（滚动只需要两个即可达成持续跑马灯的效果）

// 创建label数组 NSMutableSet * labelSet = [[NSMutableSet alloc] init]; for (NSInteger i = 0; i < kLabelCount; i++) {     UILabel * label = [UILabel new];     label.backgroundColor = [UIColor clearColor];     label.autoresizingMask = self.autoresizingMask;     label.frame = CGRectMake(0, 0, 50, 50);     [self.scrollView addSubview:label];     [labelSet addObject:label]; } self.labels = [labelSet.allObjects copy];

2.区分水平和垂直的UILabel

static void each_object(NSArray *objects, void (^block)(UILabel * label)) {    for (UILabel * label in objects) {        block(label);    }}

__block float offset = 0;     // 遍历label数组中的元素    each_object(self.labels, ^(UILabel *label) {        [label sizeToFit];        CGRect frame = label.frame;        // 垂直        if (self.direction != SK_AUTOSCROLL_DIRECTION_RIGHT && self.direction != SK_AUTOSCROLL_DIRECTION_LEFT) {            // 动态获取长度和高度, 以此达到将label垂直的目的            NSDictionary * attribute = [NSDictionary dictionaryWithObjectsAndKeys:self.font,NSFontAttributeName, nil];            CGSize sizeWord = [@"一" boundingRectWithSize:self.bounds.size options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin attributes:attribute context:nil].size;            CGFloat wordWidth = sizeWord.width;            CGSize sizeStr = [self.text boundingRectWithSize:CGSizeMake(wordWidth, CGFLOAT_MAX) options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin attributes:attribute context:nil].size;            CGFloat wordHeight = sizeStr.height;            frame.origin = CGPointMake((CGRectGetWidth(self.frame) / 2) - (wordWidth / 2), offset);            frame.size = CGSizeMake(wordWidth, wordHeight);            label.frame = frame;            label.numberOfLines = 0;            offset += CGRectGetHeight(label.bounds) + self.labelSpacing;        } else {// 水平            frame.origin = CGPointMake(offset, 0);            frame.size.height = CGRectGetHeight(self.bounds);            label.frame = frame;            offset += CGRectGetWidth(label.bounds) + self.labelSpacing;            // 重新定位label在scrollview中的位置            label.center = CGPointMake(label.center.x, roundf(self.center.y - CGRectGetMinY(self.frame)));        }    });

3.判断滚动条件，是否允许滚动

// (水平方向) 判断当前scrollLabel是否大于self的宽度，如果是就开始滚动    if (CGRectGetWidth(self.scrollLabel.bounds) > CGRectGetWidth(self.bounds)) {        CGSize size = CGSizeMake(CGRectGetWidth(self.scrollLabel.bounds) + CGRectGetWidth(self.bounds) + self.labelSpacing,  CGRectGetHeight(self.bounds));        self.scrollView.contentSize = size;        EACH_LABEL(hidden, NO);        [self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:self.scrolling];        [self scrollLabelIfNeeded];    } else if (CGRectGetHeight(self.scrollLabel.bounds) > CGRectGetHeight(self.bounds)) {// (垂直方向) 判断当前scrollLabel是否大于self的高度，如果是就开始滚动        CGSize size = CGSizeMake(CGRectGetWidth(self.bounds), CGRectGetHeight(self.scrollLabel.bounds) + self.labelSpacing);        self.scrollView.contentSize = size;        EACH_LABEL(hidden, NO);        [self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:self.scrolling];        [self scrollLabelIfNeeded];    } else {        // 隐藏其他label        EACH_LABEL(hidden, self.scrollLabel != label);        // 调整scrollView和scrollLabel        self.scrollView.contentSize = self.bounds.size;        self.scrollLabel.frame = self.bounds;        self.scrollLabel.hidden = NO;        self.scrollLabel.textAlignment = NSTextAlignmentCenter;        [self.scrollView.layer removeAllAnimations];        [self applyGradientMaskForFadeLength:0 enableFade:NO];    }

4.自动滚动动画

switch (self.direction) {// 滚动方向        case SK_AUTOSCROLL_DIRECTION_LEFT:            self.scrollView.contentOffset = CGPointZero;            break;        case SK_AUTOSCROLL_DIRECTION_RIGHT:            self.scrollView.contentOffset = CGPointMake(width + self.labelSpacing, 0);            break;        case SK_AUTOSCROLL_DIRECTION_TOP:            self.scrollView.contentOffset = CGPointZero;            break;        case SK_AUTOSCROLL_DIRECTION_BOTTOM:            self.scrollView.contentOffset = CGPointMake(0, height - 10 - CGRectGetHeight(self.bounds));            break;    }    // 滚动动画, UIViewAnimationOptionRepeat一直重复动画    [UIView animateWithDuration:duration delay:self.autoScrollInterval options:UIViewAnimationOptionRepeat animations:^{        switch (self.direction) {            case SK_AUTOSCROLL_DIRECTION_LEFT:                self.scrollView.contentOffset = CGPointMake(width + self.labelSpacing, 0);                break;            case SK_AUTOSCROLL_DIRECTION_RIGHT:                self.scrollView.contentOffset = CGPointZero;                break;            case SK_AUTOSCROLL_DIRECTION_TOP:                self.scrollView.contentOffset = CGPointMake(0, CGRectGetHeight(self.scrollLabel.bounds) + self.labelSpacing);                break;            case SK_AUTOSCROLL_DIRECTION_BOTTOM:                self.scrollView.contentOffset = CGPointZero;                break;        }    } completion:^(BOOL finished) {        _scrolling = NO;        // 移除阴影        [self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:NO];        // 完成后循调用        if (finished) {            [self performSelector:@selector(scrollLabelIfNeeded)];        }    }];

5.使用CAGradientLayer在滚动边缘的制造梯度褪色效果

        // 创建梯度mask和消失长度        CAGradientLayer * gradientMask = [CAGradientLayer layer];        gradientMask.bounds = self.layer.bounds;        gradientMask.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));        gradientMask.shouldRasterize = YES;        gradientMask.rasterizationScale = [UIScreen mainScreen].scale;        CGFloat fadePoint = 0;        // 垂直方向的梯度褪色        if (self.direction != SK_AUTOSCROLL_DIRECTION_RIGHT && self.direction != SK_AUTOSCROLL_DIRECTION_LEFT) {            gradientMask.startPoint = CGPointMake(CGRectGetMidX(self.frame), 0);            gradientMask.endPoint = CGPointMake(CGRectGetMidX(self.frame), 1);            fadePoint = fadeLength / CGRectGetHeight(self.bounds);        // 水平方向的梯度褪色        } else {            gradientMask.startPoint = CGPointMake(0, CGRectGetMidY(self.frame));            gradientMask.endPoint = CGPointMake(1, CGRectGetMidY(self.frame));            fadePoint = fadeLength / CGRectGetWidth(self.bounds);        }        // 设置渐变mask颜色和位置        id transparent = (id)[UIColor clearColor].CGColor;        id opaque = (id)[UIColor blackColor].CGColor;        gradientMask.colors = @[transparent, opaque, opaque, transparent];        // 计算褪色        NSNumber * leftFadePoint = @(fadePoint);        NSNumber * rightFadePoint = @(1 - fadePoint);        if (!fade) {            switch (self.direction) {                case SK_AUTOSCROLL_DIRECTION_LEFT:                    leftFadePoint = @0;                    break;                case SK_AUTOSCROLL_DIRECTION_RIGHT:                    leftFadePoint = @0;                    rightFadePoint = @1;                    break;                case SK_AUTOSCROLL_DIRECTION_TOP:                    leftFadePoint = @0;                    break;                case SK_AUTOSCROLL_DIRECTION_BOTTOM:                    leftFadePoint = @0;                    rightFadePoint = @1;                    break;            }        }        // 将计算结果交给mask        gradientMask.locations = @[@0, leftFadePoint, rightFadePoint, @1];        [CATransaction begin];        [CATransaction setDisableActions:YES];        self.layer.mask = gradientMask;        [CATransaction commit];

感谢你花时间阅读以上内容, 如果这个项目能够帮助到你，记得告诉我

Email: shevakuilin@gmail.com

3 0