Swift - animate linear diagram with minimal segment - ios

Question

I have a linear diagram view which basically is nothing but three views. They represent the percentage of certain asset in a portfolio. So, when I click a button, I call update(multipliers: [CGFloat]) and the animation starts. However, I ran into a few issues. Imagine if I have $10000 in stocks, $5000 in bonds and $1 in ETFs. The ETF view won't be visible at all because it's so small. But even in this case I want to show a 10px or something width view. How can I achieve this? Also, my debugger keeps warning me
Unable to simultaneously satisfy constraints. Probably at least one
of the constraints in the following list is one you don't want.
which is understandable, but I don't think is fixable because of multipliers and constants not matching the width.
So, how can I solve the issue?
import UIKit
class StripView: UIView {
var stocksConstraint = NSLayoutConstraint()
var bondsConstraint = NSLayoutConstraint()
var etfConstraint = NSLayoutConstraint()
let stocksView: UIView = {
let view = UIView()
view.backgroundColor = .lightGray
view.layer.cornerRadius = 4
return view
}()
let bondsView: UIView = {
let view = UIView()
view.backgroundColor = .lightGray
view.layer.cornerRadius = 4
return view
}()
let etfView: UIView = {
let view = UIView()
view.backgroundColor = .lightGray
view.layer.cornerRadius = 4
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .clear
layer.cornerRadius = 4
layer.masksToBounds = true
setupViews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func update(multipliers: [CGFloat]) {
stocksView.removeConstraint(stocksConstraint)
stocksConstraint = stocksView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: multipliers[0])
stocksConstraint.isActive = true
bondsView.removeConstraint(bondsConstraint)
bondsConstraint = bondsView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: multipliers[1])
bondsConstraint.isActive = true
etfView.removeConstraint(etfConstraint)
etfConstraint = etfView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: multipliers[2])
etfConstraint.isActive = true
UIView.animate(withDuration: 1.0) {
self.layoutIfNeeded()
self.stocksView.backgroundColor = .systemRed
self.bondsView.backgroundColor = .systemGreen
self.etfView.backgroundColor = .systemBlue
}
}
func setupViews() {
let views = [stocksView, bondsView, etfView]
views.forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
addSubview($0)
}
stocksConstraint = stocksView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.33)
bondsConstraint = bondsView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.33)
etfConstraint = etfView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.33)
NSLayoutConstraint.activate([
stocksView.topAnchor.constraint(equalTo: topAnchor),
stocksView.bottomAnchor.constraint(equalTo: bottomAnchor),
stocksView.leadingAnchor.constraint(equalTo: leadingAnchor),
stocksConstraint,
bondsView.topAnchor.constraint(equalTo: topAnchor),
bondsView.bottomAnchor.constraint(equalTo: bottomAnchor),
bondsView.leadingAnchor.constraint(equalTo: stocksView.trailingAnchor, constant: 2),
bondsConstraint,
etfView.topAnchor.constraint(equalTo: topAnchor),
etfView.bottomAnchor.constraint(equalTo: bottomAnchor),
etfView.leadingAnchor.constraint(equalTo: bondsView.trailingAnchor, constant: 2),
etfConstraint
])
}
}