如何迅速做出揮手的進度條？

Question

我是IOS初學者，經常在設計模式中看到人們使用“ Heart Beat or Waves作為進度條（即歌曲進度）。 有時這些progress bars go around the專輯封面等移動。

我怎樣才能做到這一點？ 我知道與AVAudioPlayer結合使用的UISlider ，但找不到任何可實現的功能，例如跟隨歌曲滑塊。

Answer 1

您可以創建自定義視圖，然后手動繪制垂直線。 主要程序供參考：

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 {
        didSet{
            self.drawVerticalLines()
        }
    }

    var lineWidth:CGFloat = 3.0{
        didSet{
            self.drawVerticalLines()
        }
    }

    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
        self.layer.sublayers?.removeAll()
        self.layer.addSublayer(lineLayer)
    }
}

效果是：

並且請自己使它更完美，例如：處理事件，應用默認顏色和突出顯示的顏色等。