如何将tableView的特定行单元格的图像设置为动态图像

时间：2019-10-09 11:29:59

标签： ios swift uiimageview tableview animated-gif

如下gif所示，在tableView的特定行中，播放歌曲的图像（Just Dance.mp3）更改为动态图像。

我的主要问题是如何在我的App中使用GIF图像或其他方法实现这种效果？在这里需要建议。

我想达到什么效果：

  1. 在播放歌曲时，特定行单元格的图像将更改为动态图像。 （主要问题）
  2. 如果歌曲已暂停，则动态图像将停止播放。
  3. 当选择播放另一首歌曲时，上一首歌曲的（单元格）图像将恢复到其专辑封面。

这是我的代码，由于不确定是否应该使用GIF或其他方法，因此我尚未对其进行测试。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

        if resultSearchController.isActive {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = filteredTableData[indexPath.row].songName
            cell.songArtist.text = filteredTableData[indexPath.row].artistName
            cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork
            return cell
        } else {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = tableData[indexPath.row].songName
            cell.songArtist.text = tableData[indexPath.row].artistName
            cell.songArtwork.image = tableData[indexPath.row].albumArtwork
            return cell
        }

        // set image of specific tableView row cell to GIF image
        if indexPath.row == SongData.currentTrack {
            let image = UIImage(named: "playing-gif-image")
            cell.songArtwork.image = image
        } else {
            // do nothing
        }
    }

enter image description here

================================================ ====================

根据ATV的答案更新代码，目前我使用静态图像设置播放单元的不同状态。好吧，我对这种奇妙的CAShapeLayer :)感兴趣，并且我需要时间来学习它，然后为特定单元格设置动态图像。

/ / /模型，SongData.swift 

import UIKit

class SongData: NSObject, NSCoding {

    var songName: String
    var artistName: String
    var albumName: String
    var albumArtwork: UIImage
    var url: URL

    static var songList = [SongData]()
    static var shuffleSongList = [SongData]()
    static var currentTrack = 0
    static var showCurrentPlayingSong = false
    static var repeatSequence = "repeatList"
    static var isPlaying = false

    enum PlayingCellState {
        case nonState
        case playing
        case paused
    }

    init(songName: String, artistName: String, albumName: String, albumArtwork: UIImage, url: URL) {
        self.songName = songName
        self.artistName = artistName
        self.albumName = albumName
        self.albumArtwork = albumArtwork
        self.url = url
    } 
...
}

/ / / CustomCell.swift 

import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var songTitle: UILabel!
    @IBOutlet weak var songArtist: UILabel!
    @IBOutlet weak var songArtwork: UIImageView!
    @IBOutlet weak var addButton: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        songArtwork.layer.cornerRadius = 8.0
    }

    func config(forState state: SongData.PlayingCellState) {
        // setup your cell depends on state
        switch state {
        case .nonState:
            print("nonState") //update cell to default state
        case .playing:
            songArtwork.image = UIImage(named: "Play")
        case .paused:
            songArtwork.image = UIImage(named: "Pause")
        }
    }
}

/// TableViewController 

 // use for track cell state, for playing dynamic image usage
    func stateForCell(at indexPath: IndexPath) -> SongData.PlayingCellState {
        // when firstly open the tab song list/app(with no song played), do not attach playing state image
        if SongData.songList.count == 0 {
            return .nonState
        } else {
            if indexPath.row == SongData.currentTrack {
                return SongData.isPlaying ? .playing : .paused
            } else {
                return .nonState
            }
        }
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

        if resultSearchController.isActive {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = filteredTableData[indexPath.row].songName
            cell.songArtist.text = filteredTableData[indexPath.row].artistName
            cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork
            // return cell
        } else {
            cell.addButton.tag = indexPath.row
            cell.songTitle.text = tableData[indexPath.row].songName
            cell.songArtist.text = tableData[indexPath.row].artistName
            cell.songArtwork.image = tableData[indexPath.row].albumArtwork
            // return cell
        }

        cell.config(forState: stateForCell(at: indexPath))
        return cell
    }

enter image description here

///更新，最后，我使它起作用，包括了lottie-ios库，并将其导入CustomCell.swift，在playAnimation()中实现了，但是遗憾的是动画重复模式是不起作用，即使我设置loopMode，动画也只会重复一次。稍后我会查找问题所在。

import UIKit
import Lottie

class CustomCell: UITableViewCell {

    @IBOutlet weak var songTitle: UILabel!
    @IBOutlet weak var songArtist: UILabel!
    @IBOutlet weak var songArtwork: UIImageView!
    @IBOutlet weak var view: UIView!
    @IBOutlet weak var addButton: UIButton!

    let animationView = AnimationView()

    override func awakeFromNib() {
        super.awakeFromNib()
        songArtwork.layer.cornerRadius = 8.0
    }

    func playAnimation(){
        let animation = Animation.named("366-equalizer-bounce")
        animationView.animation = animation
        // weird thing is that animation repeat is not working here...
        animationView.loopMode = LottieLoopMode.repeat(3600.0)
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
    }

    func config(forState state: SongData.PlayingCellState) {

        // setup your cell depends on state
        switch state {
        case .nonState:
            print("nonState")
            view.isHidden = true
        case .playing:
            view.isHidden = false
            playAnimation()
        case .paused:
            view.isHidden = false
            // to set this latter 
            // songArtwork.image = UIImage(named: "Pause")
        }
    }
}

1 个答案:

答案 0 :(得分：1)

  1. 用于实施：

“是否使用了GIF图像或其他动态图像？” -您可以选择以下更适合您的选项：

  • 您可以使用GIF图片（the similar question）
  • 你甚至可以 使用UIBezierPath和CAShapeLayer（some examples）绘制它
  • 或者使用lottie-ios库，该库可以与Adobe After Effects动画配合使用（例如，您可以使用this）

  1. 更改单元格状态：

    //e.g. add it to your presenter or wherever you are storing info about `currentTrack`
...
enum PlayingCellState {
    case default
    case playing
    case paused
    ...
}
...
func stateForCell(at indexPath: IndexPath) -> PlayingCellState {
    if indexPath.row == SongData.currentTrack {
        return isPlaying? .playing : .paused
    } else {
        return .default
    } 
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell

    if resultSearchController.isActive {
        cell.addButton.tag = indexPath.row
        cell.songTitle.text = filteredTableData[indexPath.row].songName
        cell.songArtist.text = filteredTableData[indexPath.row].artistName
        cell.songArtwork.image = filteredTableData[indexPath.row].albumArtwork
        return cell
    } else {
        cell.addButton.tag = indexPath.row
        cell.songTitle.text = tableData[indexPath.row].songName
        cell.songArtist.text = tableData[indexPath.row].artistName
        cell.songArtwork.image = tableData[indexPath.row].albumArtwork
        return cell
    }

    cell.config(forState: stateForCell(at: indexPath)
}

//add to your CustomCell 
func config(forState state: PlayingCellState) {
// setup your cell depends on state
}
相关问题
最新问题