Fill UIView using a percentage - ios

Question

I have an UIView and percentage number that comes from an API. I need to have the UIView fill with some color based on the percentage.
Here's the UIView
I've got the basics from another question here.
class BadgeView: UIView {
private let fillView = UIView(frame: CGRect.zero)
private var coeff:CGFloat = 0.5 {
didSet {
// Make sure the fillView frame is updated everytime the coeff changes
updateFillViewFrame()
}
}
override func awakeFromNib() {
setupView()
}
private func setupView() {
// Setup the layer
layer.cornerRadius = bounds.height/2.0
layer.masksToBounds = true
// Setup filledView backgroundColor and add it as a subview
fillView.backgroundColor = UIColor(red: 220.0/255.0, green: 220.0/255.0, blue: 220.0/255.0, alpha: 0.4)
addSubview(fillView)
// Update fillView frame in case coeff already has a value
updateFillViewFrame()
}
private func updateFillViewFrame() {
fillView.frame = CGRect(x: 0, y: bounds.height*(1-coeff), width: bounds.width, height: bounds.height*coeff)
}
// Setter function to set the coeff animated. If setting it not animated isn't necessary at all, consider removing this func and animate updateFillViewFrame() in coeff didSet
public func setCoeff(coeff: CGFloat, animated: Bool) {
if animated {
UIView.animate(withDuration: 4.0, animations:{ () -> Void in
self.coeff = coeff
})
} else {
self.coeff = coeff
}
}
}
This is the function that returns the percentage:
func cargaOKCheckStatus(resultado: NSDictionary) {
let JSON = resultado
if let ElapsedPercentual:Int = JSON.value(forKeyPath: "ResponseEntity.ElapsedPercentual") as? Int {
porcentaje = ElapsedPercentual
print(porcentaje)
}
}
The API returns 0%, 10%, 20%, 30% and so on. So if it's 10%, the UIView should be filled a 10% with the light gray. Right now, it is always half filled.

Answer 1

Few things:
You can use autolayout to simplify things
Override both init(frame:) and init(coder:) when creating custom views and call the setup in both methods
class BadgeView: UIView {
private let fillView = UIView(frame: CGRect.zero)
private var fillHeightConstraint: NSLayoutConstraint!
private(set) var coeff: CGFloat = 0.0 {
didSet {
updateFillViewFrame()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private 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()
}
private 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: 4.0, animations:{ () -> Void in
self.coeff = coeff
})
} else {
self.coeff = coeff
}
}
}
This should work, assuming that coeff is a value between 0.0 and 1.0