UIView horizontal bar animation in swift

Question

I am working on this animation where a number will be received every second and progress bar has to fill or go down based on the double value.

I have created the views and have added all the views in the UIStackView. Also made the outlet collection for all the views. (sorting them by the tag and making them round rect).

I can loop the views and change their background color but trying to see if there is a better way to do it. Any suggestions?

Thanks

allenh · Accepted Answer

I'm a firm believer in learning through solving organic problems and slowly building my global knowledge on a subject. So I'm afraid I don't have any good tutorials for you.

Here is an example that will jump start you, though.

// For participating in Simulator's "slow animations"
@_silgen_name("UIAnimationDragCoefficient") func UIAnimationDragCoefficient() -> Float

import UIKit

@IBDesignable
class VerticalProgessView: UIControl {

    @IBInspectable
    var numberOfSegments: UInt = 0

    @IBInspectable
    var verticalSegmentGap: CGFloat = 4.0

    @IBInspectable
    var outerColor: UIColor = UIColor(red: 33, green: 133, blue: 109)

    @IBInspectable
    var unfilledColor: UIColor = UIColor(red: 61, green: 202, blue: 169)

    @IBInspectable
    var filledColor: UIColor = UIColor.white

    private var _progress: Float = 0.25
    @IBInspectable
    open var progress: Float {
        get {
            return _progress
        }
        set {
            self.setProgress(newValue, animated: false)
        }
    }

    let progressLayer = CALayer()

    let maskLayer = CAShapeLayer()

    var skipLayoutSubviews = false

    open func setProgress(_ progress: Float, animated: Bool) {

        if progress < 0 {
            _progress = 0
        } else if progress > 1.0 {
            _progress = 1
        } else {
            // Clamp the percentage to discreet values
            let discreetPercentageDistance: Float = 1.0 / 28.0
            let nearestProgress = discreetPercentageDistance * round(progress/discreetPercentageDistance)

            _progress = nearestProgress
        }

        CATransaction.begin()
        CATransaction.setCompletionBlock { [weak self] in
            self?.skipLayoutSubviews = false
        }
        if !animated {
            CATransaction.setDisableActions(true)
        } else {
            CATransaction.setAnimationDuration(0.25 * Double(UIAnimationDragCoefficient()))
        }

        let properties = progressLayerProperties()
        progressLayer.bounds = properties.bounds
        progressLayer.position = properties.position

        skipLayoutSubviews = true
        CATransaction.commit() // This triggers layoutSubviews
    }

    override func prepareForInterfaceBuilder() {
        awakeFromNib()
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        self.backgroundColor = UIColor.clear

        self.layer.backgroundColor = unfilledColor.cgColor

        // Initialize and add the progressLayer
        let properties = progressLayerProperties()
        progressLayer.bounds = properties.bounds
        progressLayer.position = properties.position
        progressLayer.backgroundColor = filledColor.cgColor
        self.layer.addSublayer(progressLayer)

        // Initialize and add the maskLayer (it has the holes)
        maskLayer.frame = self.layer.bounds
        maskLayer.fillColor = outerColor.cgColor
        maskLayer.fillRule = kCAFillRuleEvenOdd
        maskLayer.path = maskPath(for: maskLayer.bounds)
        self.layer.addSublayer(maskLayer)

        // Layer hierarchy

        // self.maskLayer
        // self.progressLayer
        // self.layer
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        if skipLayoutSubviews {
            // Crude but effective, not fool proof though
            skipLayoutSubviews = false
            return
        }

        let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        // Doesn't work for 180° rotations
        let duration = UIApplication.shared.statusBarOrientationAnimationDuration * Double(UIAnimationDragCoefficient())

        CATransaction.begin()
        CATransaction.setAnimationTimingFunction(timingFunction)
        CATransaction.setAnimationDuration(duration)

        let properties = progressLayerProperties()
        progressLayer.bounds = properties.bounds
        progressLayer.position = properties.position

        let size = self.bounds.size

        let anchorPoint = CGPoint(x: 0.5, y: 1.0)
        maskLayer.anchorPoint = anchorPoint
        maskLayer.bounds = CGRect(origin: CGPoint.zero, size: size)
        maskLayer.position = CGPoint(x: size.width * anchorPoint.x, y: size.height * anchorPoint.y)

        // Animate the segments

        let pathChangeAnimation = CAKeyframeAnimation(keyPath: "path")
        let finalPath = maskPath(for: maskLayer.bounds)

        pathChangeAnimation.values = [maskLayer.path!, finalPath]
        pathChangeAnimation.keyTimes = [0, 1]
        pathChangeAnimation.timingFunction = timingFunction
        pathChangeAnimation.duration = duration
        pathChangeAnimation.isRemovedOnCompletion = true
        maskLayer.add(pathChangeAnimation, forKey: "pathAnimation")

        CATransaction.setCompletionBlock {
            // CAAnimation's don't actually change the value
            self.maskLayer.path = finalPath
        }

        CATransaction.commit()
    }

    // Provides a path that will mask out all the holes to show self.layer and the progressLayer behind
    private func maskPath(for rect: CGRect) -> CGPath {

        let horizontalSegmentGap: CGFloat = 5.0

        let segmentWidth = rect.width - horizontalSegmentGap * 2
        let segmentHeight = rect.height/CGFloat(numberOfSegments) - verticalSegmentGap + verticalSegmentGap/CGFloat(numberOfSegments)

        let segmentSize = CGSize(width: segmentWidth, height: segmentHeight)
        let segmentRect = CGRect(x: horizontalSegmentGap, y: 0, width: segmentSize.width, height: segmentSize.height)

        let path = CGMutablePath()
        for i in 0.. (bounds: CGRect, position: CGPoint) {
        let frame = self.bounds
        let height = frame.height * CGFloat(progress)
        let y = frame.height * CGFloat(1 - progress)
        let width = frame.width

        let anchorPoint = maskLayer.anchorPoint

        let bounds = CGRect(x: 0, y: 0, width: width, height: height)
        let position = CGPoint(x: 0 + width * anchorPoint.x, y: y + height * anchorPoint.x)

        return (bounds: bounds, position: position)
    }

    // TODO: Implement functions to further mimic UIProgressView
}

extension UIColor {
    convenience init(red: Int, green: Int, blue: Int) {
        self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1)
    }
}

UIView horizontal bar animation in swift

Answers (2)

Using in a storyboard

Enjoy the magic

Related Questions