sli

SlidingNumberView

A custom view for animating though initial number and final number with sliding animation

Showing:

Popularity

Downloads/wk

0

GitHub Stars

66

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Categories

Readme

SlidingNumberView

CI Status Version License Platform

How it looks

Example Project

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

  • iOS 10.0+
  • Swift 4.2+

Installation

SlidingNumberView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SlidingNumberView'

Usage

  • Import SlidingNumberView in the class you want to use.
import SlidingNumberView
  • Initialize a SlidingNumberView object with a starting number and a final number as String parameters (Numbers, as of now, are only supported up to 11 Digits). You can also specify a custom font. However, custom fonts can cause undesirable clipping.
var numberView = SlidingNumberView(startNumber: "1234", endNumber: "5678")

\\ or 

var numberView = SlidingNumberView(startNumber: "1234", endNumber: "5678", font: UIFont.systemFont(ofSize: 26))
  • (Optional) You can specify the total animation duration
numberView.animationDuration = 3
  • Add to the container view so constraints can be added
self.view.addSubview(numberView)
numberView.translatesAutoresizingMaskIntoConstraints = false
  • SlidingNumberView has its own weight and height constraint calculated from your font size. So you only need to give its x and y position constraints.
numberView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true

numberView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true
  • Call the object's startCounting method to start animation.
numberView.startCounting(completion: {finish in
    print("Counting Done")
})
  • The startCounting method has a completion handler so you can change to another endNumber through its properties and start the counting again. (It is crucial to note that the startNumber and endNumber are meant to accept strings of the same digit size).
numberView.startCounting(completion: {finish in
    self.numberView.endNumber = "0000"
    self.numberView.startCounting(completion: { finish in 
        print("Counting Finally done")
    })
})

Full Code Block

numberView = SlidingNumberView(startNumber: "0100", endNumber: "1250", font: UIFont.systemFont(ofSize: 26))
numberView.animationDuration = 3
        
self.view.addSubview(numberView)
numberView.translatesAutoresizingMaskIntoConstraints = false

numberView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true
numberView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true
self.view.layoutIfNeeded()
        
numberView.startCounting(completion: {finish in
    self.numberView.endNumber = "0000"
    self.numberView.startCounting(completion: { finish in 
        print("Counting Finally done")
    })
})

Accessible Properties

/// Spacing of the Digits
numberView.digitSpacing = 10

/// Digit Font
numberView.font = .systemFont(ofSize: 42)

/// The whole animation duration
numberView.animationDuration = 3

/// Boolean. Is it still counting?
numberView.inProgress

Known Limitations

  • SlidingNumberView is in alpha state.
  • SlidingNumberView can only be initialized programmatically like the usage above. (Can now be set as a custom class for UIView in storyboard.)
  • Only numbers of the same digits can be animated (Increasing-digits will smoothly animate through its change, Decreasing ones are snappy)

To be implemented

  • Multiple font weights
  • Support for animating through different digit numbers
  • Support for initializing through storyboard objects and IBOutlets

Author

bupstan, bupstan.dev@gmail.com

License

SlidingNumberView is available under the MIT license. See the LICENSE file for more info.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100