2017-09-24 8 views
0

私は初心者のIOS開発者であり、人々が進行バー(すなわち、歌の進行)としてHeart Beat or Wavesを使用するデザインパターンでよく見ます。時々これらprogress bars go around theアルバムアート等スピーディーなウェーブ進行バーの作成方法は?

どうすればいいですか?私はUISliderAVAudioPlayerと組み合わせていることを認識していますが、曲のスライダーのように達成するための何かを見つけることができませんでした。

enter image description here

答えて

3

カスタムビューを作成し、手動で縦線を描くことができます。参照のための主な手順:

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) 
    } 
} 

効果がある:
enter image description here

など、自分でそれをより完璧にしてください:デフォルトを適用し、イベントを処理し、色を強調表示など

+0

ありがとうございましたそんなに。 – rulebreaker4

+0

@ rulebreaker4、あなたは大歓迎です。 –

関連する問題