Fill UIView from bottom to top - ios

Question

I have this UIView that right now has that static light gray filled, I need it to fill based on a number I give it that comes from an API. I tried a couple of ways but don't work for me. What's the simplest approach to this? Doesn't have to have fancy effects or anything, just a simple animation that slowly fills up the circle by giving it a number.
The API returns Int that are 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 and 100.
So given those numbers I have to use them to fill the circle. They are basically percentages. So 10 should make the circle fill 10%.
This is the code that I have right now, it's in the same file as the ViewController but I don't think it's the best way, or at least it's not working because when I try to update the coeff it doesn't do it.
class BadgeView: UIView {
private let fillView = UIView(frame: CGRect.zero)
private var fillHeightConstraint: NSLayoutConstraint!
private(set) var coeff: CGFloat = 0.2 {
didSet {
updateFillViewFrame()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
public func setupView() {
layer.cornerRadius = bounds.height / 2.0
layer.masksToBounds = true
fillView.backgroundColor = UIColor(red: 220.0/255.0, green: 220.0/255.0, blue: 220.0/255.0, alpha: 0.4)
fillView.translatesAutoresizingMaskIntoConstraints = false // ensure autolayout works
addSubview(fillView)
// pin view to leading, trailing and bottom to the container view
fillView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
fillView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
fillView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
// save the constraint to be changed later
fillHeightConstraint = fillView.heightAnchor.constraint(equalToConstant: 0)
fillHeightConstraint.isActive = true
updateFillViewFrame()
}
public func updateFillViewFrame() {
fillHeightConstraint.constant = bounds.height * coeff // change the constraint value
layoutIfNeeded() // update the layout when a constraint changes
}
public func setCoeff(coeff: CGFloat, animated: Bool) {
if animated {
UIView.animate(withDuration: 0.5, animations:{ () -> Void in
self.coeff = coeff
})
} else {
self.coeff = coeff
}
}
}
The exact thing that it's not working is here:
if let ElapsedPercentual:Int = JSON.value(forKeyPath: "ResponseEntity.ElapsedPercentual") as? Int {
porcentaje = ElapsedPercentual
print(porcentaje)
>>> BadgeView().setCoeff(coeff: CGFloat(porcentaje)/100, animated: true)
That line isn't actually updating the coeff, so it's always 0.2 as previously setted. Instead it should go from 0.0 to 1.0.

Answer 1

First of all: I strongly suggest using a framework for build constrains programatically. Something like SnapKit.
Using a basic setup where you have a UIView (Container) that contains another UIView (myView). Where myView is used to fill the Container.
You could use the following code (didn't fully test that though) to animate the constraint and have the effect of filling up the container with the myView
self.myView.snp_makeConstraints { make in
make.left.right.bottom.equalTo(self.myContainer)
make.height.equalTo(0)
}
let newPercentage = 10
UIView.animateWithDuration(0.3) {
self.myView.snp_updateConstraints { make in
make.height.equalTo(self.myContainer.frame.height / 100 * newPercentage)
}
self.myView.superview.layoutIfNeeded()
}