I'm creating a stackview, inside which there are 5 sub views. (3 custom views divided by 2 separator views). Two separator views's width must be 1 and every sub views must be center and fill equally. Here's my current code and result which doesn't look nice.
var stackView: UIStackView = {
let view = UIStackView()
view.axis = .horizontal
view.alignment = .center
view.distribution = .fillEqually
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
func setUpView() {
containerView.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 8).isActive = true
stackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -8).isActive = true
stackView.leadingAnchor.constraint(equalTo: homeLogoImageView.trailingAnchor , constant: 18).isActive = true
stackView.trailingAnchor.constraint(equalTo: awayLogoImageView.leadingAnchor, constant: -18).isActive = true
stackView.addArrangedSubview(homeWinView)
stackView.addArrangedSubview(seperator1)
stackView.addArrangedSubview(drawView)
stackView.addArrangedSubview(seperator2)
stackView.addArrangedSubview(awayWinView)
seperator1.widthAnchor.constraint(equalToConstant: 1).isActive = true
seperator1.heightAnchor.constraint(equalToConstant: 60).isActive = true
seperator2.widthAnchor.constraint(equalToConstant: 1).isActive = true
seperator2.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
Output:
CodePudding user response:
fillEqually
doesn't work, when you just want some of your views in your stack view to fill equally.
Change fillEqually
to fill
, and add the "equally" part using constraints yourself.
NSLayoutConstraint.activate([
homeWinView.widthAnchor.constraint(equalTo: drawView.widthAnchor),
homeWinView.widthAnchor.constraint(equalTo: awayWinView.widthAnchor),
])