IOS uses UICountingLabel to animate changes in numbers

In most financial apps or other places where digital display is required, there will often be the following animation effects:

So how do we do that?

Download UICountingLabel

Download: github.com/dataxpress/… UICountingLabel only supports integer and floating point styles. Styles like the amount displayed in most financial apps (with thousandth delimiters) cannot be displayed, but a solution will be provided later to achieve these effects!

Second, use UICountingLabel

1. Initialization

UICountingLabel inherits UILabel and initializes the same as UILabel as follows:

UICountingLabel* myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(10, 10, 100, 40)];
[self.view addSubview:myLabel];Copy the code

2. Set the text style

It can be set like this:

myLabel.format = @"%d";Copy the code

You can also use block Settings:

myLabel.formatBlock = ^NSString* (CGFloat value) { NSInteger years = value / 12; NSInteger months = (NSInteger)value % 12; if (years == 0) { return [NSString stringWithFormat: @"%ld months", (long)months]; } else { return [NSString stringWithFormat: @"%ld years, %ld months", (long)years, (long)months]; }};Copy the code

3. Set the change range and animation time

[where countFrom: 50, 100 withDuration: 5.0 f];Copy the code

It’s that simple!

Three, the example effect

1. Integer style Number variations

The code is as follows:

UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)]; myLabel.textAlignment = NSTextAlignmentCenter; myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48]; TextColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; mylabel. textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; [self.view addSubview:myLabel]; // set the format mylabel. format = @"%d"; [self.myLabel countFrom:0 to:100 withDuration:1.0f];Copy the code

The renderings are as follows:

2. Floating point style number variations

The code is as follows:

UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)]; myLabel.textAlignment = NSTextAlignmentCenter; myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48]; TextColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; mylabel. textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; [self.view addSubview:myLabel]; // Set the format mylabel. format = @"%.2f"; [self.myLabel countFrom:0.00 to:3198.23 withDuration:1.0f];Copy the code

The renderings are as follows:

3. Floating point style with thousandth delimiter

Since UICountingLabel does not have this style, you need to modify the UICountingLabel file slightly. First add an attribute to the uicountingLabel.h header as shown below:

Uicountinglabel. m – (void)setTextValue:(CGFloat)value:

So UICountingLabel can implement this style.

Let’s start implementing this style as follows:

UICountingLabel *myLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(titleLabel.frame)+1, 280, 45)]; myLabel.textAlignment = NSTextAlignmentCenter; myLabel.font = [UIFont fontWithName:@"Avenir Next" size:48]; TextColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; mylabel. textColor = [UIColor colorWithRed:236/255.0 green:66/255.0 blue:43/255.0 alpha:1]; [self.view addSubview:myLabel]; // Set the format mylabel. format = @"%.2f"; / / set the separator style where. PositiveFormat = @ # # #, # # 0.00 "; [self.myLabel countFrom:0.00 to:3048.64 withDuration:1.0f];Copy the code

The renderings are as follows: