Search code examples
swiftsnapkitstackview

StackView horizontally wrap content

what I need

what I need

my result

my result

Why mystackViewHorizontal doesn't wrap content horizontally ?

my code: 

        airView.snp.makeConstraints { (make) in
            make.height.width.equalTo(45)
        }

        airImg.snp.makeConstraints { (make) in
            make.center.equalToSuperview()
        }

        sleepImg.snp.makeConstraints { (make) in
            make.center.equalToSuperview()
        }

        sleepView.snp.makeConstraints { (make) in
            make.height.width.equalTo(45)
        }

        let stackViewAir = UIStackView(arrangedSubviews: [airView, airLbl])
        stackViewAir.distribution = .fill
        stackViewAir.alignment = .fill
        stackViewAir.spacing = 4
        stackViewAir.axis = .vertical

        let stackViewSleep = UIStackView(arrangedSubviews: [sleepView, sleepLbl])
        stackViewSleep.distribution = .fillProportionally
        stackViewSleep.alignment = .fill
        stackViewSleep.spacing = 4
        stackViewSleep.axis = .vertical

        stackViewHorizontal.addArrangedSubview(stackViewAir)
        stackViewHorizontal.addArrangedSubview(stackViewSleep)
        stackViewHorizontal.distribution = .fillProportionally
        stackViewHorizontal.spacing = 60
        stackViewHorizontal.axis = .horizontal

        stackViewHorizontal.snp.makeConstraints { make in
            make.centerY.centerX.equalToSuperview()
        }
Solution

  • Have you tried changing the alignment of stackViewAir and stackViewSleep to .center? I think that will do the trick here. Thanks