波形图的性能优化

Question

我正在构建一个绘制输入音频数据波形的应用程序.

以下是它的外观的直观表示:

它的行为与Apple的原生VoiceMemos应用程序类似.但它缺乏性能.波形本身是一个UIScrollView子类,我在其中绘制CALayer表示紫色"条形"的实例并将它们添加为子图层.开始时波形为空,当声音输入开始时我用此功能更新波形:

class ScrollingWaveformPlot: UIScrollView {

  var offset: CGFloat = 0
  var normalColor: UIColor?
  var waveforms: [CALayer] = []
  var lastBarRect: CGRect?
  var kBarWidth: Int = 5

  func updateGraph(with value: Float) {

    //Create instance
    self.lastBarRect = CGRect(x: self.offset,
                              y:   self.frame.height / 2,
                              width: CGFloat(self.barWidth),
                              height: -(CGFloat)(value * 2))


    let barLayer = CALayer()
    barLayer.bounds = self.lastBarRect!
    barLayer.position = CGPoint(x: self.offset + CGFloat(self.barWidth) / 2,
                                y: self.frame.height / 2)
    barLayer.backgroundColor = self.normalColor?.cgColor

    self.layer.addSublayer(barLayer)
    self.waveforms.append(barLayer)

    self.offset += 7

  }

...

}

当紫色条的最后一个矩形到达屏幕中间时,我开始增加contentOffset.x波形以使其像Apple的VoiceMemos应用程序一样运行.

问题是:当条形数达到~500 ... 1000时,波形开始出现一些明显的延迟setContentOffset.

self.inputAudioPlot.setContentOffset(CGPoint(x: CGFloat(self.offset) - CGFloat(self.view.frame.width / 2 - 7),y: 0), animated: false)

可以在这里优化什么？任何帮助赞赏.

Answer 1

只需从其超级层中删除滚动到屏幕外的栏即可。如果您想变得更奇特，可以将它们放入队列中以便在添加新样本时重复使用，但这可能不值得付出努力。

\n\n

如果您不\xe2\x80\x99t 让用户在该视图内滚动，那么甚至可能值得完全不使用滚动视图，而是在添加新视图时将可见栏移动到左侧。

\n\n

当然，如果您确实需要让用户滚动，您还有更多工作要做。然后，您首先必须将显示的所有值存储在某处，以便可以取回它们。有了这个，您可以覆盖layoutSubviews以在滚动期间添加所有缺失的栏。

\n\n

这基本上是如何UITableView工作UICollectionView的，因此您可以使用集合视图和自定义布局来实现它。手动执行可能会更容易，而且性能也更好一些。

\n