在 Tableview 上滚动时按钮图像发生变化

Question

我需要认真的帮助，因为我正在 Tableview 上播放音频并使用 AVPlayer 管理（播放/暂停/停止）它。所有功能都运行良好。

但问题是如何在滚动时管理 TableView 中的 ONLY Button 图像？ 主要有两点需要考虑

• 第一个是在播放音频的相应单元格上设置按钮图像（“媒体暂停”）。

• 第二个是设置休息所有肯定没有播放的按钮图像（“播放按钮”）。

  class AudiosController: UIViewController {
  
      //outlets
      @IBOutlet weak var tableView: UITableView!
  
      //properties
      let  menuArray: [String] = [
                                          "Song 1",
                                          "Song 2”,
                                          "Song 3”,
                                          "Song 4”,
                                          “Song 5”,
                                          “Song 6”,
                                          "Song 7”,
                                          "Song 8”,
                                          "Song 9”,
                                          “Song 10”,
                                          “Song 11”,
                                          “Song 12”]
      let  audioUrl: [String] = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
                          "http://transom.org/wp-content/uploads/2004/03/200206.hodgman8.mp3",
                          "https://www.hrupin.com/wp-content/uploads/mp3/testsong_20_sec.mp3",
                          "https://ia801409.us.archive.org/12/items/1HourThunderstorm/1HrThunderstorm.mp3",
                          "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
                          "http://transom.org/wp-content/uploads/2004/03/200206.hodgman8.mp3",
                          "https://www.hrupin.com/wp-content/uploads/mp3/testsong_20_sec.mp3",
                          "https://ia801409.us.archive.org/12/items/1HourThunderstorm/1HrThunderstorm.mp3",
                          "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
                          "http://transom.org/wp-content/uploads/2004/03/200206.hodgman8.mp3",
                          "https://www.hrupin.com/wp-content/uploads/mp3/testsong_20_sec.mp3",
                          "https://ia801409.us.archive.org/12/items/1HourThunderstorm/1HrThunderstorm.mp3"]
      var previous = UIButton().tag
      var player : AVPlayer?
      var previousCell:PlayerCell?
      var currentCell:PlayerCell?
  
      //MARK: - View Life Cycle
      override func viewDidLoad() {
          super.viewDidLoad()
  
          //TableView Config
          tableView.dataSource = self
          tableView.rowHeight = UITableViewAutomaticDimension
          tableView.estimatedRowHeight = 44
      }
  
      //MARK: - Actions
      @IBAction func play_pauseButtonPressed(_ sender: UIButton) {
          let cell = sender.superview?.superview?.superview as! PlayerCell
          currentCell = cell // current cell
  
          let currentIndex = sender.tag // current Button tag value
  
          let current = sender  // current Button
  
          if player?.isPlaying == true && previous == currentIndex {
              player?.pause()
              sender.setImage(UIImage(named: "play-button"), for: .normal)
              previous = currentIndex
          } else if player?.isPlaying == true {
              player?.pause()
              previousCell?.play_pauseButton.setImage( imageLiteral(resourceName: "play-button"), for: .normal)
              current.setImage(UIImage(named: "media-pause"), for: .normal)
              play(audioUrl: audioUrl[currentIndex])
              previous = currentIndex
          } else {
              current.setImage(UIImage(named: "media-pause"), for: .normal)
              play(audioUrl: audioUrl[currentIndex])
              current.isSelected = true
              previous = currentIndex
          }
  
          previousCell = cell
      }
  
      func play(audioUrl: String) {
          guard let url = URL.init(string: audioUrl) else { return }
          let playerItem = AVPlayerItem.init(url: url)
          player = AVPlayer.init(playerItem: playerItem)
          player?.play()
     }
  }
  
  //MARK: - AVPlayer
  extension AVPlayer {
  
      var isPlaying: Bool {
          return ((rate != 0) && (error == nil))
      }
  }
  
  //MARK: - UITableViewDataSource
  extension AudiosController: UITableViewDataSource {
  
      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
          return menuArray.count
      }
  
      func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
          let cell = tableView.dequeueReusableCell(withIdentifier: "PlayerCell", for: indexPath) as! PlayerCell
          cell.txtLabel.text = menuArray[indexPath.item]
  
          cell.play_pauseButton.tag = indexPath.row
  
          return cell
      }
  }
  

这是 PlayerCell 类

   class PlayerCell: UITableViewCell {
        @IBOutlet weak var play_pauseButton: UIButton!
        @IBOutlet weak var txtLabel: UILabel!
    }

Answer 1

可以做的是在配置单元格时重置所有图像。因为tableView 正在重用单元格，所以某些属性在上次更改时被保留。如果这是问题，代码可以修复为：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "PlayerCell", for: indexPath) as! PlayerCell
    cell.txtLabel.text = menuArray[indexPath.item]

    cell.play_pauseButton.tag = indexPath.row

    if player?.isPlaying == true && indexPath.row == previous { //Sets the "media-pause" image to the currently played cell
        cell.play_pauseButton.setImage(UIImage(named: "media-pause"), for: .normal)
    } else { //Every other cell that is not the playing one is reseted to the "play-button" image
        cell.play_pauseButton.setImage(UIImage(named: "play-button"), for: .normal)
    }

    return cell
}