自己实现的一个可以滚动展示数字的控件：DPScrollNumberLabel

Posted on |

写在前面

第一次写博客，有点小激动，同时也害怕写的很烂，所以希望大家能够包容，如果大家觉得看不下去我的博客，可以直接翻到最后有源码和demo的github地址。开发ios也有大半年了，所以想要尝试一下写点博客，好了废话不多说了下面开始正题了。

正文

简介

由于公司前段时间项目里要用到一个可以滚动的数字标签，所以就写了这样一个控件，现在有时间了，就写篇博客记录一下实现这个控件的过程。


上一张gif动画

image

​
这个控件的逻辑是当个位数从0~9~0时十位数向上滚动1，当十位完成一个0~9~0循环时，百位向上滚动1依次类推

实现思路

先说一下我实现这个控件的思路，其实比较简单，数字的每一列都是一个很长的UILabel，然后由上至下是数字0~9，当数字改变时，让这个label上下移动，产生滚动的动画，只需要计算循环的次数，滚动的方向，滚动的时间就可以了。

Talk is cheap，show you The code！

首先看一下头文件里的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//  DPScrollNumberLabel.h
//  DPScrollNumberLabelDemo
//
//  Created by Dai Pei on 16/5/23.
//  Copyright © 2016年 Dai Pei. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface DPScrollNumberLabel : UIView
@property (nonatomic, strong)NSNumber *displayedNumber;
- (instancetype)initWithNumber:(NSNumber *)originNumber fontSize:(CGFloat)size;
- (instancetype)initWithNumber:(NSNumber *)originNumber fontSize:(CGFloat)size textColor:(UIColor *)color;
- (instancetype)initWithNumber:(NSNumber *)originNumber font:(UIFont *)font;
- (instancetype)initWithNumber:(NSNumber *)originNumber font:(UIFont *)font textColor:(UIColor *)color;
- (instancetype)initWithNumber:(NSNumber *)originNumber fontSize:(CGFloat)size rowNumber:(NSUInteger)rowNumber;
- (instancetype)initWithNumber:(NSNumber *)originNumber fontSize:(CGFloat)size textColor:(UIColor *)color rowNumber:(NSUInteger)rowNumber;
- (instancetype)initWithNumber:(NSNumber *)originNumber font:(UIFont *)font textColor:(UIColor *)color rowNumber:(NSUInteger)rowNumber;//rowNumber should less than or equal 8
- (void)changeToNumber:(NSNumber *)number animated:(BOOL)animated;
- (void)changeToNumber:(NSNumber *)number interval:(CGFloat)interval animated:(BOOL)animated;
@end

可以看到头文件里有7个初始化方法，分为两大类：规定列数和不规定列数。当规定列数时，则控件的列数固定，当传入的数字大于列数限制时函数直接返回，当不规定列数时，以初始化传入的数字的列数为初始列数，当后面传入的数字大于初始列数时，会自动在左边补加列（最大列数不能超过8列）

其中最重要的一个参数是字体的大小，我需要这个参数去计算此控件的大小。
另外两个方法当需要显示的数字改变时调用，animated传入YES时会有动画，传入NO时直接改变不播放动画。

下面只贴上其中一个init方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (instancetype)initWithNumber:(NSNumber *)originNumber fontSize:(CGFloat)size textColor:(UIColor *)color rowNumber:(NSUInteger)rowNumber {
    self = [super init];
    if (self) {
        self.displayedNumber = originNumber;
        self.font = [UIFont systemFontOfSize:size];
        self.textColor = color;
        self.isAnimation = NO;
        self.finishedAnimationCount = 0;
        self.rowNumber = (rowNumber > 0 && rowNumber <= 8) ? rowNumber : 0;
        self.maxRowNumber = (self.rowNumber == 0) ? 8 : rowNumber;
        [self commonInit];
    }
    return self;
}

初始化后进入commonInit方法：

1
2
3
4
- (void)commonInit {
    [self initCell];
    [self initParent];
}

然后先初始化cell，再初始化parent：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- (void)initCell {
    int originNumber = self.displayedNumber.intValue;
    //如果没有规定列数 就自己计算 方法具体实现会在后面贴出
    if (self.rowNumber == 0) {
        self.rowNumber = [self calculateRowNumber:originNumber];
    }
    //用于保存所有的cell
    self.cellArray = [[NSMutableArray alloc] init];
    NSString *text = @"0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0";
    //这个方法很赞 可以直接根据内容来计算一个view的大小
    CGRect rect = [text boundingRectWithSize:CGSizeZero
    options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName:self.font} context:nil];
	//然后保存宽度和高度值，后面很多地方都会用到
    self.cellWidth = rect.size.width;
    self.cellHeight = rect.size.height;
    //拿到每个位数上显示的数字并保存在一个数组中
    NSArray *displayNumberArray = [self getCellDisplayNumberWithNumber:self.displayedNumber.integerValue];
    //初始化每个cell 并且保存在数组中
    for (NSInteger i = 0; i < self.rowNumber; i++) {
        UILabel *scrollCell = [self makeScrollCell];
        scrollCell.frame = CGRectMake((self.rowNumber - 1 - i) * self.cellWidth, 0, self.cellWidth, self.cellHeight);
        scrollCell.text = text;
        NSNumber *displayNum = [displayNumberArray objectAtIndex:i];
        //此方法调整cell的位置，使其显示相应的数字 方法具体实现会在后面贴出
        [self setScrollCell:scrollCell toNumber:displayNum.integerValue];
        [self.cellArray addObject:scrollCell];
    }
}
#pragma mark - Getters
- (UILabel *)makeScrollCell {
    UILabel *cell = [[UILabel alloc] init];
    cell.font = self.font;
    cell.numberOfLines = 11;
    cell.textColor = self.textColor;
    return  cell;
}

然后是实现parent：

1
2
3
4
5
6
7
- (void)initParent{
    self.bounds = CGRectMake(0, 0, self.rowNumber * self.cellWidth, self.cellHeight / 11);
    self.backgroundColor = [UIColor clearColor];
    self.layer.masksToBounds = YES;
    //把cell布局到parent中 
    [self layoutCell:self.rowNumber withAnimation:YES];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
- (void)layoutCell:(NSUInteger)rowNumber withAnimation:(BOOL)animated{
    //先将子view全部移除 此处移除是有原因的
    for (UIView *subView in self.subviews) {
        [subView removeFromSuperview];
    }
    //再添加进去
    for (UILabel *cell in self.cellArray) {
        [self addSubview:cell];
    }
    //此处用动画重新排列所有的cell
    __weak typeof(self) weakSelf = self;
    [UIView animateWithDuration:0.2 * (rowNumber - self.rowNumber) animations:^{
        for (int i = 0; i < rowNumber; i++) {
            UILabel *cell = [weakSelf.cellArray objectAtIndex:i];
            cell.frame = CGRectMake((rowNumber - 1 - i) * weakSelf.cellWidth,
                                    cell.frame.origin.y,
                                    weakSelf.cellWidth,
                                    weakSelf.cellHeight);
        }
        self.frame = CGRectMake(self.frame.origin.x,
                                self.frame.origin.y,
                                rowNumber * self.cellWidth,
                                self.cellHeight/11);
    } completion:nil];
}

至此，初始化的工作全部完成

下面让我们关注头文件里另外的两个公有方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
- (void)changeToNumber:(NSNumber *)number animated:(BOOL)animated {
- 
    [self changeToNumber:number interval:0 animated:animated];
}
- (void)changeToNumber:(NSNumber *)number interval:(CGFloat)interval animated:(BOOL)animated {
    //因为没有做负数部分，所以当传入的数字小于0 直接返回
    if (number.integerValue < 0) {
        return ;
    }
    //当大于最大行数，直接返回
    if ([self calculateRowNumber:number.integerValue] > self.maxRowNumber) {
        return ;
    }
    //如果传入数字和本身显示相同，直接返回
    if (number.integerValue == self.displayedNumber.integerValue) {
        return ;
    }
    //当传入数字时，当前动画还没有播放完成，加入数组，等待动画播放完成
    if (self.isAnimation) {
        if (!self.taskArray) {
            self.taskArray = [NSMutableArray array];
        }
        [self.taskArray addObject:@{keyTaskDisplayNumber:number, keyTaskChangeNumber:@(number.integerValue - self.displayedNumber.integerValue),keyTaskInterval:@(interval)}];
    }else {
        if (animated) {
        //animated 为YES时 进入此方法
            [self playAnimationWithChange:number.integerValue - self.displayedNumber.integerValue displayNumber:number interval:interval];
            self.isAnimation = YES;
        }else {
        //animated 为NO时 直接改变
        //这个方法在前面说过，具体实现会在后面贴出
            NSArray<NSNumber *> *displayNumbers = [self getCellDisplayNumberWithNumber:number.integerValue];
            for (int i = 0; i < displayNumbers.count; i++) {
                [self setScrollCell:self.cellArray[i] toNumber:displayNumbers[i].integerValue];
            }
        }
    }
    self.displayedNumber = number;
}

下面就要进入动画部分了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
static const CGFloat bufferModulus = 0.7f;
- (void)playAnimationWithChange:(NSInteger)changeNumber displayNumber:(NSNumber *)displayNumber interval:(CGFloat)interval{
    //改名后的列数
    NSInteger nextRowNumber = [self calculateRowNumber:displayNumber.intValue];
    //只有当列数增加时才重新布局
    if (nextRowNumber > self.rowNumber) {
        [self reInitCell:nextRowNumber];
        [self layoutCell:nextRowNumber withAnimation:YES];
        self.rowNumber = nextRowNumber;
    }
    //储存每一位循环次数的数组
    NSArray *repeatCountArray = [self getRepeatTimesWithChangeNumber:changeNumber displayNumber:displayNumber.integerValue];
    //储存每一位将显示的数值
    NSArray *willDisplayNums = [self getCellDisplayNumberWithNumber:displayNumber.integerValue];
    
    //如果没有设置动画间隔，则根据改变的大小来进行计算
    if (interval == 0) {
        interval = [self getIntervalWithOriginalNumber:displayNumber.integerValue - changeNumber displayNumber:displayNumber.integerValue];
    }
    //获得滚动的方向
    ScrollAnimationDirection direction = (changeNumber > 0)? ScrollAnimationDirectionUp : ScrollAnimationDirectionDown;
    
    CGFloat delay = 0.0f;
    
    if (repeatCountArray.count != 0) {
        for (NSInteger i = 0; i < repeatCountArray.count; i++) {
            NSNumber *repeat = [repeatCountArray objectAtIndex:i];
            NSInteger repeatCount = repeat.integerValue;
            NSNumber *willDisplayNum = [willDisplayNums objectAtIndex:i];
            UILabel *cell = [self.cellArray objectAtIndex:i];
            CGFloat startDuration = 0;
            //当不是一个完整0~9~0循环时，只进行一个Single动画（我将这里的动画分为两类：single和multi）
            if (repeatCount == 0) {
                [self makeSingleAnimationWithCell:cell duration:interval delay:delay animationCount:repeatCountArray.count displayNumber:willDisplayNum.integerValue];
            }else {
            //当>=一个循环时，进行multi动画
                if (direction == ScrollAnimationDirectionUp) {
                //此处计算三个部分的动画时间
                    startDuration = interval * (10 - [self getDisplayNumberOfCell:cell]) / ceilf(fabs(changeNumber / pow(10, i)));
                    CGFloat cycleDuration = interval * 10 / fabs(changeNumber / pow(10, i));
                    if (repeatCount == 1) {
                        cycleDuration = 0;
                    }
                    CGFloat endDuration = bufferModulus * pow(willDisplayNum.integerValue, 0.3) / (i + 1);
                    NSDictionary *attribute = @{keyStartDuration:   @(startDuration),
                                                keyStartDelay:      @(delay),
                                                keyCycleDuration:   @(cycleDuration),
                                                keyEndDuration:     @(endDuration),
                                                keyRepeatCount:     @(repeatCount - 1),
                                                keyDisplayNumber:   willDisplayNum};
                    [self makeMultiAnimationWithCell:cell direction:direction animationCount:repeatCountArray.count attribute:attribute];
                }else if (direction == ScrollAnimationDirectionDown) {
                    startDuration = interval * ([self getDisplayNumberOfCell:cell] - 0) / ceilf(fabs(changeNumber / pow(10, i)));
                    CGFloat cycleDuration = interval * 10 / fabs(changeNumber / pow(10, i));
                    //此处可能有些疑问，因为这个repeatCount不是真正循环的次数，是cycle的次数加end部分的1，所以如果repeat为1 真正循环次数是0
                    if (repeatCount == 1) {
                        cycleDuration = 0;
                    }
                    CGFloat endDuration = bufferModulus * pow(10 - willDisplayNum.integerValue, 0.3) / (i + 1);
                    NSDictionary *attribute = @{keyStartDuration:   @(startDuration),
                                                keyStartDelay:      @(delay),
                                                keyCycleDuration:   @(cycleDuration),
                                                keyEndDuration:     @(endDuration),
                                                keyRepeatCount:     @(repeatCount - 1),
                                                keyDisplayNumber:   willDisplayNum};
                    [self makeMultiAnimationWithCell:cell direction:direction animationCount:repeatCountArray.count attribute:attribute];
                }
            }
            delay = delay + startDuration;
        }
    }
}

动画分为single和multi两种，multi动画里包括3个部分start，cycle，end；start部分是当前数值~9的动画，cycle部分是0~9的数次循环，end部分为0~最终数值（此处以数字增加举例，数字减少时相反）

下面贴出single和multi两种动画的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
- (void)makeSingleAnimationWithCell:(UILabel *)cell duration:(CGFloat)duration delay:(CGFloat)delay animationCount:(NSInteger)count displayNumber:(NSInteger)displayNumber{
    
    [UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseOut animations:^{
        [self setScrollCell:cell toNumber:displayNumber];
    } completion:^(BOOL finished) {
    //当动画结束，检查是否有待执行的动画
        [self checkTaskArrayWithAnimationCount:count];
        NSLog(@"single animation finish!");
    }];
}
- (void)makeMultiAnimationWithCell:(UILabel *)cell
                         direction:(ScrollAnimationDirection)direction
                    animationCount:(NSInteger)count
                         attribute:(NSDictionary *)attribute{
    NSNumber *startDuration = [attribute objectForKey:keyStartDuration];
    NSNumber *cycleDuration = [attribute objectForKey:keyCycleDuration];
    NSNumber *endDuration = [attribute objectForKey:keyEndDuration];
    NSNumber *repeatCount = [attribute objectForKey:keyRepeatCount];
    NSNumber *willDisplayNum = [attribute objectForKey:keyDisplayNumber];
    NSNumber *startDelay = [attribute objectForKey:keyStartDelay];
    
    [UIView animateWithDuration:startDuration.floatValue delay:startDelay.floatValue options:UIViewAnimationOptionCurveEaseIn animations:^{
    //这是开始部分的动画
        [self setScrollCell:cell toNumber:(direction == ScrollAnimationDirectionUp)?10 : 0];
    } completion:^(BOOL finished) {
        NSLog(@"start animation finish!");
        //开始动画结束后将cell归位到循环开始的地方
        [self setScrollCell:cell toNumber:(direction == ScrollAnimationDirectionUp)?0 : 10];
        
        if (cycleDuration.floatValue == 0) {
        //当循环次数为0，直接执行结束部分的动画
            [UIView animateWithDuration:endDuration.floatValue delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                [self setScrollCell:cell toNumber:willDisplayNum.integerValue];
            } completion:^(BOOL finished) {
                [self checkTaskArrayWithAnimationCount:count];
                NSLog(@"end animation finish!");
            }];
        }else {
        //否则进入循环动画
            [UIView animateWithDuration:cycleDuration.floatValue delay:0 options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionRepeat animations:^{
                [UIView setAnimationRepeatCount:repeatCount.integerValue];
                switch (direction) {
                    case ScrollAnimationDirectionUp:
                        [self setScrollCell:cell toNumber:10];
                        break;
                    case ScrollAnimationDirectionDown:
                        [self setScrollCell:cell toNumber:0];
                        break;
                    default:
                        break;
                }
            } completion:^(BOOL finished) {
                NSLog(@"cycle animation finish!");
                [self setScrollCell:cell toNumber:(direction == ScrollAnimationDirectionUp)?0 : 10];
                //这是循环后的结束动画
                [UIView animateWithDuration:endDuration.floatValue delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                    [self setScrollCell:cell toNumber:willDisplayNum.integerValue];
                    } completion:^(BOOL finished) {
                        [self checkTaskArrayWithAnimationCount:count];
                        NSLog(@"end animation finish!");
                    }];
            }];
        }
    }];
}

核心动画部分代码都已经贴出来了，下面看下一些privite方法

首先是每个动画结束的checkTaskArrayWithAnimationCount:方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//这里传入的cout是一次变化总共的动画次数
- (void)checkTaskArrayWithAnimationCount:(NSInteger)count {
	//每个动画结束，计数加一，当等于count时，说明所有动画都已经结束了
    self.finishedAnimationCount++;
    if (self.finishedAnimationCount == count) {
        self.finishedAnimationCount = 0;
        if (self.taskArray.count != 0) {
            NSDictionary *task = [self.taskArray objectAtIndex:0];
            [self.taskArray removeObject:task];
            NSNumber *displayNumber = [task objectForKey:keyTaskDisplayNumber];
            NSNumber *changeNumber = [task objectForKey:keyTaskChangeNumber];
            NSNumber *interval = [task objectForKey:keyTaskInterval];
            //如果taskArray里有task，则进行下一次动画
            [self playAnimationWithChange:changeNumber.integerValue displayNumber:displayNumber interval:interval.floatValue];
        }else {
            self.isAnimation = NO;
        }
    }
}

计算列数的方法：calculateRowNumber:

这个方法很简单，就不做解释了

1
2
3
4
5
6
7
- (NSInteger)calculateRowNumber:(NSInteger)number {
    NSInteger rowNumber = 1;
    while ((number = number / 10) != 0) {
        rowNumber++;
    }
    return rowNumber;
}

使指定cell显示相应数值的方法：setScrollCell: toNumber:

1
2
3
4
5
6
- (void)setScrollCell:(UILabel *)cell toNumber:(NSInteger)number {
    CGFloat originX = cell.frame.origin.x;
    CGFloat floatNumber = number;
    CGFloat y = - ((CGFloat)floatNumber / 11) * self.cellHeight;
    cell.frame = CGRectMake(originX, y, self.cellWidth, self.cellHeight);
}

计算repeatCount的方法：getRepeatTimesWithChangeNumber: displayNumber:

这个方法我想用几个小例子来解释，等看完这个例子，再去看代码就不会觉得那么难懂了：比如当前展示数为521，要让它改变到530，注意个位数要循环多少次呢，其实它只有开始部分和结束部分，并没有循环部分，我代码的操作是将个位置0，520和530，530-520=10，10/10^1=1所以得到的循环次数是1，而我前面说过这个1不是真正的循环次数，而是循环次数加上end部分的1，所以当repeatCount=1时，只会有开始动画和结束动画。再举一个例子：521和542，先置0，520和540，520-540=20，20/10^1=2，repeatCount=2，而真正循环次数为1，我们看，当521经过开始动画变位530，随后经过一个循环变为540，再经过结束动画到达542，那么真正循环确实是1次，说明这种算法没有问题。当然这只举了个位为例，其它位以此类推都是相同的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (NSArray<NSNumber *> *)getRepeatTimesWithChangeNumber:(NSInteger)change displayNumber:(NSInteger)number{
    NSMutableArray *repeatTimesArray = [[NSMutableArray alloc] init];
    NSInteger originNumber = number - change;
    if (change > 0) {
        do {
            number = (number / 10) * 10;
            originNumber = (originNumber / 10) * 10;
            NSNumber *repeat = @((number - originNumber) / 10);
            [repeatTimesArray addObject:repeat];
            number = number / 10;
            originNumber = originNumber / 10;
        } while ((number - originNumber) != 0);
    }else {
        do {
            number = (number / 10) * 10;
            originNumber = (originNumber / 10) * 10;
            NSNumber *repeat = @((originNumber - number) / 10);
            [repeatTimesArray addObject:repeat];
            number = number / 10;
            originNumber = originNumber / 10;
        } while ((originNumber - number) != 0);
    }
    return repeatTimesArray;
}

将一个数字准换为各位上应当展示的数值的方法：getCellDisplayNumberWithNumber:

举个例子就是这个数字是：521，则返回一个数组：[@1,@2,@5]

1
2
3
4
5
6
7
8
9
10
11
- (NSArray<NSNumber *> *)getCellDisplayNumberWithNumber:(NSInteger)displayNumber {
    NSMutableArray *displayCellNumbers = [[NSMutableArray alloc] init];
    NSInteger tmpNumber;
    for (NSInteger i = 0; i < self.rowNumber; i++) {
        tmpNumber = displayNumber % 10;
        NSNumber *number = @(tmpNumber);
        [displayCellNumbers addObject:number];
        displayNumber = displayNumber / 10;
    }
    return displayCellNumbers;
}

获得指定cell展示的数值的方法：getDisplayNumberOfCell:

1
2
3
4
5
6
- (NSInteger)getDisplayNumberOfCell:(UILabel *)cell {
    CGFloat y = cell.frame.origin.y;
    CGFloat tmpNumber = (- (y * 11 / self.cellHeight));
    NSInteger displayNumber = (NSInteger)roundf(tmpNumber);
    return displayNumber;
}

计算动画总时间的方法：getIntervalWithOriginalNumber: displayNumber:

这个时间是根据最高位改变的位数来计算的，位数越高，每改变一次时间就越长。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
static const CGFloat normalModulus = 0.3f;
- (CGFloat)getIntervalWithOriginalNumber:(NSInteger)number displayNumber:(NSInteger)displayNumber {
    
    NSArray *repeatTimesArray = [self getRepeatTimesWithChangeNumber:displayNumber - number displayNumber:displayNumber];
    NSUInteger count = repeatTimesArray.count;
    NSInteger tmp1 = displayNumber / (NSInteger)pow(10, count - 1);
    NSInteger tmp2 = number / (NSInteger)pow(10, count - 1);
    
    NSLog(@"tmp1:%ld tmp2:%ld", (long)tmp1, (long)tmp2);
    NSInteger maxChangeNum = labs(tmp1 % 10 - tmp2 % 10);
    
    return normalModulus * count * maxChangeNum;
    
}

代码部分到此结束

github地址：https://github.com/948080952/DPScrollNumberLabel

如果觉得我的代码对你有用处，请在github上给我一个赞，谢谢！