How to get the width value of an UIView which is inside an UIStackView

Question

I have my own custom view, ProgressBar, which I create it programatically:

let pb = ProgressBar(frame: CGRect(x: 0, y: 0, width: 200, height: 16))

I create it using a width of 200, but then I add this to a horizontal stack view. Because of this, the view will grow depending on the screen size, for example on iPhone X will grow to 250.

Inside this custom view I am trying to use the width, but it's always 200 and it is causing all kinds of issues.

What I really need is the value that the view has inside stack view, in my case 250.

Is there a way to get that value, inside my custom view ?
Or what are my alternatives ?

edit - added some code:

class CustomTableViewCell: UITableViewCell {
  func configure() {
     let progressBar: ProgressBar = {
         let pb = ProgressBar(frame: CGRect(x: 0, y: 0, width: 200, height: 16))
     }()
  }
}

And this code is called from the view controller:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell1") as! CustomTableViewCell
            cell.configure()
            return cell
}

edit 2 - custom view code:

class ProgressBar: UIView {

    var progressView: UIView = {
        let v = UIView()
        v.backgroundColor = .white
        return v
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }

    func configure() {
        backgroundColor = UIColor(white: 1.0, alpha: 0.1)
        layer.cornerRadius = 8.0
        clipsToBounds = true

        progressView.frame = bounds
        progressView.frame.size.width = 0.0
        addSubview(progressView)
    }

    func animate(_ pct: CGFloat) -> Void {
        UIView.animate(withDuration: 1.0, animations: {
            self.progressView.frame.size.width = self.bounds.size.width * pct
        })
    }
}

edit3 - calling animate

    let progressBar: ProgressBar = {
        let pb = ProgressBar(frame: CGRect(x: 0, y: 0, width: 200, height: 16))
        pb.translatesAutoresizingMaskIntoConstraints = false

        if data.count >= i {
            if let session = data[i - 1].session {
                let values = Array(session).sorted(by: { $0.date.compare($1.date) == .orderedDescending })
                var sum = 0.0
                for value in values {
                    sum += Double(value.score)
                }
                pb.animate(CGFloat(sum / 40)) // returns a value between 0 and 1
            }
        }

        return pb;
    }()

edit 4:

edit 5 - added debug constraints:

Printing description of $16:
<UIView: 0x107d6a100; frame = (0 0; 200 16); layer = <CALayer: 0x1d003f3c0>>
Printing description of $17:
<StepUp.ProgressBar: 0x107d6c8e0; frame = (54.3333 0; 250 16); clipsToBounds = YES; layer = <CALayer: 0x1d0220880>>

Answer 1

As I've mentioned in the comment section that it's not a wise idea to have the progress view inside the stack view, this will require tedious steps to achieve the width change animation.

First of all you need to get rid of the explicitly setting the frame that is: don't specify width & height when you use Auto Layout. Use CGRectZero instead.

Then you need to configure your stack view (I'm assuming you use vertical stack view) as:

stackView.alignment = .leading

You can't use any of the fill types here. Because if you use fill, then all of the arranged sub views should have the whole widths of the stack view. As a result you won't be able to modify any of their widths for your animation to take place.

Now as soon as you provide your stack view .leading alignment your ordinary views (the views that don't have intrinsic content size) will be given the width of zero. So when you run your application you will see none of your views. Here you need to do the tedious work, giving each of them widths. One solution may be: you enumerate through the subviews of your stack view and give all the views equal width as of your stack view leaving the progress view to have zero widths

// update these when the sub views of the view are layout already
// otherwise stack view won't have it's own size yet 
stackView.subviews.forEach { (view) in
    if view == progressView {
        // save this constraint for use when animating
        progressViewWidthConstraint = view.widthAnchor.constraint(equalToConstant: 0)
        progressViewWidthConstraint.isActive = true
    } else {
        view.widthAnchor.constraint(equalToConstant: stackView.frame.size.width).isActive = true
    }
}

Now your animation should be working as:

view.layoutIfNeeded()
progressViewWidthConstraint.constant = stackView.frame.size.width
UIView.animate(withDuration: 2) {
    self.view.layoutIfNeeded()
}

Here is the result: Animate UIView as progress view inside a UIStackView

I've made a demo if you are stuck anywhere in the process. Cheers