rulebreaker4 rulebreaker4 - 1 month ago 17
iOS Question

How to make waved progress bar in swift?

I am beginner IOS developer and often see in design patterns that people use

Heart Beat or Waves
as the progression bar (i.e. song progress). Sometimes these
progress bars go around the
Album Art etc.

How can i achieve such thing? I am aware of
combined with
but couldn't find anything to achieve such as following for song slider.

enter image description here

Answer Source

You could make a custom View, and draw the vertical lines manually. The main procedure for reference:

import UIKit

class WavedProgressView: UIView {

    var lineMargin:CGFloat = 2.0
    var volumes:[CGFloat] = [0.5,0.3,0.2,0.6,0.4,0.5,0.8,0.6,0.4]

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.darkGray

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = UIColor.darkGray

    override var frame: CGRect {

    var lineWidth:CGFloat = 3.0{

    func drawVerticalLines() {
        let linePath = CGMutablePath()
        for i in 0..<self.volumes.count {
            let height = self.frame.height * volumes[i]
            let y = (self.frame.height - height) / 2.0
            linePath.addRect(CGRect(x: lineMargin + (lineMargin + lineWidth) * CGFloat(i), y: y, width: lineWidth, height: height))

        let lineLayer = CAShapeLayer()
        lineLayer.path = linePath
        lineLayer.lineWidth = 0.5
        lineLayer.strokeColor = UIColor.white.cgColor
        lineLayer.fillColor = UIColor.white.cgColor

The effect is:
enter image description here

And please make it more perfect by yourself, like: handling event, applying default and highlighted color etc.