0

I want to have a progress bar (= statusbar) in the background of my CollectionView Cells. I want to implement this using a UIView (by changing its width). This is how it looks ("statusbar": The Green background UIView):

screenshot

My Code:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var statusbar: UIView!
    
    override func layoutSubviews() {
        // cell rounded section
        self.layer.cornerRadius = 15.0
        self.layer.masksToBounds = true
        super.layoutSubviews()
        statusbar.frame = CGRect(x: 0, y: 0, width: 5, height: self.frame.height)
    }
}

extension MyCollectionViewCell{
    
    func setStatusbar(completedTasks: Int, totalTasks: Int){
        print(self.frame.width)
        let newWidth = 80 //(self.frame.width * (CGFloat(completedTasks / totalTasks)))
        statusbar.backgroundColor = .orange
        statusbar.frame = CGRect(x: 0, y: 0, width: newWidth, height: Int(self.frame.height))
        reloadInputViews()
    }
}

And call it like this:

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
        
        // Use the outlet in our custom class to get a reference to the UILabel in the cell
        cell.myLabel.text = self.items[indexPath.row] // The row value is the same as the index of the desired text within the array.
        cell.backgroundColor = UIColor(rgb: 0xF444444)
        cell.setStatusbar(completedTasks: 5, totalTasks: 25) //!!! HERE !!!
        return cell
    }

PROBELM:

It does not change the width of the UIView (stays at width = 5, should be width = 80)

EDIT: This is what it looks like:

screen

  • So to boil down your question, the status bar part stuff is currently not the problem but your subview does not size at all, not even to a hardcoded value. Is that right? – de. Jan 02 '21 at 22:38
  • Maybe check this thread, seems related: https://stackoverflow.com/questions/15303100/uicollectionview-cell-subviews-do-not-resize – de. Jan 02 '21 at 22:38
  • @de. It should be a progress bar and I cannot resize it. The width of the progress bar (= Statusbar) equals the progress. So if my cell is 100px wide and the statusbar 50px, the progress is at 50%. Thats why your linked question doesn't fit that well - the statusbar shouldn't have the same width as my cell... I hope you understood me :) Thank you! – user12473575 Jan 02 '21 at 23:04
  • I understand this this is the ultimate goal but looking at your code I am seeing a hardcoded value `let newWidth = 80` which is not respected in the screenshot. – de. Jan 02 '21 at 23:07
  • @de. Yes and even with the hardcoded 80, the width stays at 5. But I still had to call the func in the other class in order to test the hardcoded 80 – user12473575 Jan 02 '21 at 23:09
  • So you are setting a frame to your view in `cellForItemAt indexPath` but it doesn't work. So either you are setting it to another value elsewhere (e.g. `cellWillDisplay`) or collectionView does some magic which brings me back to the thread linked above – something with autoresizingMasks or autoLayout. – de. Jan 02 '21 at 23:26
  • @de. it looks like that if you once set a CGRect to the uiviews layout, you cannot change it – user12473575 Jan 02 '21 at 23:32
  • Don't try and manipulate the frame. Set a width constraint and alter the `constant` property. – Paulw11 Jan 03 '21 at 00:07

0 Answers0