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

时间:2018-12-06 19:46:07

标签: ios swift uitableview uibutton swift4

我需要认真的帮助,因为我正在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!
    }

1 个答案:

答案 0 :(得分:0)

可以完成的是在配置单元后重置所有图像。由于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
}