Question

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

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

第一个方法是在播放音频的相应单元格上设置Button image（“ media-pause”）。

第二个是将所有肯定不会播放的按钮图像（“播放按钮”）设置为静止状态。

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
}

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

1 个答案: