Home > Mobile >  How to set specific width to stackview child, swift?
How to set specific width to stackview child, swift?

Time:05-23

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:

enter image description here

Expectation: enter image description here

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),
])
  • Related