The FlipNumberView is simulating an analog flip display (like those for the departure time on the airport). It's well abstracted and damn easy to use. Please open a Github issue, if you think anything is missing or wrong.
pod 'JDFlipNumberView'
including the default imagespod 'JDFlipNumberView/Core'
without default images (to use your own images)pod 'JDFlipNumberView/FlipImageView'
, only theJDFlipImageView
(for flipping images)
See Customization below for infos, on how to use your own images.
(For infos on cocoapods, have a look the cocoapods website)
- Add all files from
JDFlipNumberView/JDFlipNumberView/*.{h,m}
to your project - Add the
JDFlipNumberView.bundle
, if you want to use the default images - Link against the
QuartzCore.framework
The main classes are
-
JDFlipNumberView
The Standard FlipNumberView. It shows an integer value as FlipView. It has a choosable amount of digits. Can be animated in any way described in this document. -
JDFlipImageView
An Image View with flip animations. Use it like a regular UIImageView, but set new images animated viasetImageAnimated:duration:completion:
.
For specific usecases you may use on of these:
-
JDDateCountdownFlipView
A date countdown. Just init with a target date and it will show the remaining days, hours, minutes and seconds until that date. -
JDFlipClockView
A digital clock. Displays the hour and minutes of the current time as flipViews. Seconds can also be enabled. Always shows the current time. -
UIView+JDFlipImageView
A UIView category that makes it possible to transition between any two views using a flip animation.
In any case, after installing, you only need to follow some simple steps to get started. Here is a full example usage:
Example: A 4 digit FlipNumberView animating down every second.
// create a new FlipNumberView, set a value, start an animation
JDFlipNumberView *flipNumberView = [[JDFlipNumberView alloc] initWithDigitCount:4];
flipNumberView.value = 1337;
[flipNumberView animateDownWithTimeInterval: 1.0];
// add to view hierarchy and resize
[self.view addSubview: flipNumberView];
flipNumberView.frame = CGRectMake(20,100,300,100);
That's it. This will display a working, flipping, animating countdown view!
See the example project for other examples.
Basic animations (Single Flip):
- (void)setValue:(NSInteger)newValue animated:(BOOL)animated;
- (void)animateToNextNumber;
- (void)animateToPreviousNumber;
Targeted animation over time (Flipping through all numbers, until target is reached):
- (void)animateToValue:(NSInteger)newValue duration:(CGFloat)duration;
Timed animation without target value (Flipping once per timeInterval
):
- (void)animateUpWithTimeInterval:(NSTimeInterval)timeInterval;
- (void)animateDownWithTimeInterval:(NSTimeInterval)timeInterval;
You may use the original .psd
file from the gfx
folder to create custom numbers.
A) Replace original images
Replace the images within the JDFlipNumberView.bundle
. (In the Finder just Rightclick > Show Contents
to see the images.)
When using Pods, make sure to use
pod 'JDFlipNumberView/Core'
, so the default bundle won't be copied. Just create a bundle namedJDFlipNumberView.bundle
in your project yourself.
B) Use multiple bundles
Add another graphics bundle to your project. A bundle is nothing else, than a regular folder, but named with .bundle
as extension. You need one image per digit. 0.png, 1.png, 2.png, etc.
See the next section on how to use multiple bundles.
To use your own bundles, create the FlipViews like this:
[JDFlipNumberView initWithDigitCount:<#count#>
imageBundleName:<#imageBundleName#>];
or for a DateCountDown like this:
[JDDateCountdownFlipView initWithDayDigitCount:<#count#>
imageBundleName:<#imageBundleName#>];
I'm @calimarkus on Twitter. Feel free to post a tweet, if you like the FlipNumberView.