How to create your own custom animation badge (Swift/iOS) 

Custom Animation Badge Control

Customize Badge view for ios (Swift-5) is simply attach BadgeController to any UIView’s subclasses and easily control the badge.

Customize size, position, background color, text color, border width, border color and animation of the badge.

BadgeControl
BadgeControl
BadgeControl
  • language: Swift 5
  • platform: ios
  • device: iphone
  • license: MIT

Setup of Badge Control

Setup with CocoaPods (iOS 9+)

  • If you are using CocoaPods add this text to your Podfile and run pod install.
    pod 'BadgeControl'

Add source (iOS 9+)

  • Add BadgeController.swift, BadgeView.swift, BadgeCenterPosition.swift and BadgeAnimations.swift to your project.

Usage

Add import BadgeControl to your source code (unless you used the file setup method).

Simply attach BadgeController to your UIView (or its subclass).

let badge = BadgeController(for: myUIView)

Add an empty badge and present it with animation.

badge.addOrReplaceCurrent(animated: true)

Add a badge with text and present it with animation.

badge.addOrReplaceCurrent(with: "1", animated: true)

Remove badge from its view.

badge.remove(animated: true)

Simply increment or decrement the value on your badge (if it is numeric) and present it with animation.

badge.increment(animated: true)
badge.decrement(animated: true)

You can also set animateOnlyWhenBadgeIsNotYetPresent = true if you don’t want animation when badge is already present on the view.

Customization Badge view

You can customize badge’s text font, background color, text color, border width, border color, size, center position and animation.

Text font, background color, text color, border width, border color and size

badge.badgeTextFont = UIFont.systemFont(ofSize: 15)
badge.badgeBackgroundColor = UIColor.blue
badge.badgeTextColor = UIColor.yellow
badge.borderWidth = 3 // in px
badge.borderColor = UIColor.black // black is default
badge.badgeHeight = 20 // badge will have height of 20px

Center position

You can choose following center positions: upperLeftCorner, upperRightCorner, lowerLeftCorner, lowerRightCorner.

You can also choose custom position by calling .custom(x: Double, y: Double).

badge.centerPosition = .upperLeftCorner
badge.centerPosition = .custom(x: 10, y: 20)

Animations of Badge view

You can choose one of the following animations:

Default animation of Badge

animation Badge in Swift
badge.animation = BadgeAnimations.default

Left-right animation of Badge

custom animation Badge in Swift
badge.animation = BadgeAnimations.leftRight

Right-left animation of Badge

animation BadgeView
badge.animation = BadgeAnimations.rightLeft

Fade in animation of Badge

fade animation Badge in Swift
badge.animation = BadgeAnimations.fadeIn

Rolling animation of Badge

multiple animation Badge in Swift
badge.animation = BadgeAnimations.rolling

Custom Badge

You can also provide your own animation of type ((UIView) -> Void).

badge.animation = { badgeView in
    ...
  }

Initialisation

You can use this initalizer with default values:

public init(for view: UIView,
            in centerPosition: BadgeCenterPosition = .upperRightCorner,
            badgeBackgroundColor: UIColor = .red,
            badgeTextColor: UIColor = .white,
            badgeTextFont: UIFont? = nil,
            borderWidth: CGFloat = 0.0,
            borderColor: UIColor = .black,
            animation: ((UIView) -> Void)? = BadgeAnimations.defaultAnimation,
            badgeHeight: Int? = nil
            animateOnlyWhenBadgeIsNotYetPresent: Bool = false)

Download

BadgeControl

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *