如何在swift中制作挥手进度条?
How to make waved progress bar in swift?
我是初学者 IOS 开发人员,经常在设计模式中看到人们使用 Heart Beat or Waves
作为进度条(即歌曲进度)。有时这些progress bars go around the
专辑封面等
我怎样才能实现这样的目标?我知道 UISlider
与 AVAudioPlayer
相结合,但找不到任何可以实现的东西,例如跟随歌曲滑块。
您可以制作自定义视图,然后手动绘制垂直线。主要程序供参考:
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)
}
}
效果为:
并请您自行完善,例如:处理事件、应用默认颜色和高亮颜色等
我是初学者 IOS 开发人员,经常在设计模式中看到人们使用 Heart Beat or Waves
作为进度条(即歌曲进度)。有时这些progress bars go around the
专辑封面等
我怎样才能实现这样的目标?我知道 UISlider
与 AVAudioPlayer
相结合,但找不到任何可以实现的东西,例如跟随歌曲滑块。
您可以制作自定义视图,然后手动绘制垂直线。主要程序供参考:
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)
}
}
效果为:
并请您自行完善,例如:处理事件、应用默认颜色和高亮颜色等