UITableView Cell overlaid with UIProgressView and updates as audio plays

Question

I'm looking for a post/link/guide that'll programmatically help me add a UIProgressView over UITableViewCell. Currently, each cell I hold down plays audio streamed from Firebase and when I let go, the audio stops. I would like to add a ProgressView that covers the entire frame of the cell with a clear tint at first but turns light blue or some other color depicting it's progress from left to right. The duration of the audio will determine the rate of speed of the progress view. I have searched through SO and can only find similar posts written in Obj C years ago; looking for something written in the latest Swift language. Below is a random gif I Googled that shows what I'm looking for. Any help is greatly appreciated.

UPDATE 1: I mananged to get the duration and apply to the progress. The UIProgressView registers the duration the progress goes left to right accordingly. The only problem is now that when I press onto a any cell to play its respective audio, the progress bar for the first cell plays. Below is the code I'm using.

@objc func updateProgress(){
    let duration = Float((player.currentItem?.duration.seconds)!)
    let currentTime = Float((player.currentItem?.currentTime().seconds)!)
    let progressTotal = currentTime/duration

    let indexPath = IndexPath(row: self.tag, section: 0)
    if progressTotal > 0 {
        if let cell = tableView.cellForRow(at: indexPath) as? PostTableViewCell {
            if currentTime != duration || currentTime/duration != 1 {
                cell.progressBar.progress = progressTotal
                cell.progressBar.progressTintColor = UIColor.blue
            } else {
                timer?.invalidate()
                if timer != nil {
                    timer?.invalidate()
                    timer = nil
                    print("Timer Stopped")
                }
            }
        }
    }
}

score 0 · Answer 1 · answered Aug 28 '18 at 05:23

You can take UIProgressView inside tableview cell and daynamic height of progressbar set by an extension like bellow

extension UIProgressView {

@IBInspectable var barHeight : CGFloat {
    get {
        return transform.d * 2.0
    }
    set {
        // 2.0 Refers to the default height of 2
        let heightScale = newValue / 2.0
        let c = center
        transform = CGAffineTransform(scaleX: 1.0, y: heightScale)
        center = c
    }
}}

and you can set it from storyboard

now you can manage the progress by reloading single cell plaese refer bellow code i have done using time you can manage by using the timer of song,

class ProgressCell: UITableViewCell {
@IBOutlet weak var lblTitle: UILabel!
@IBOutlet weak var progressBar: UIProgressView!}

class ViewController: UIViewController {

var progress = 0.0
var progressTimer: Timer!

@IBOutlet weak var tblProgress: UITableView!

func reloadProgress(at index: Int) {
    let indexPath = IndexPath(row: index, section: 0)

    // start the timer
    progressTimer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(timerAction), userInfo: ["indexPath":indexPath], repeats: true)
}

// called every time interval from the timer
@objc func timerAction() {
    progress += 0.05
    if Int(progress) == 1 {
        progressTimer.invalidate()
    }else{
    let indexPath = (progressTimer.userInfo as! [String:Any])["indexPath"] as! IndexPath
    tblProgress.reloadRows(at: [indexPath], with: .none)
    }
}}

extension ViewController: UITableViewDataSource,UITableViewDelegate {

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
}

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

    cell.lblTitle.text = "house of highlights"
    cell.progressBar.progress = Float(progress)
    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    progress = 0.0
    reloadProgress(at: indexPath.row)
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
}}

Thank you for the reply, @pradip. I'm limited to programmatically adding the `UIProgressView`. I have edited my post and added the code snippet of what I have come up with so far. This function is tied to a `UIGestureRecognizer` in which `if sender.state == .began` initiates(long pressing the cell plays the respective audio. Audio plays very well but the progressView doesn't start up. If there is any further advice you can offer, I appreciate it. — Joe Vargas, Aug 29 '18 at 13:58

UITableView Cell overlaid with UIProgressView and updates as audio plays

1 Answers1