Home > Software design >  set width for button inside a stackView
set width for button inside a stackView

Time:10-06

I have three items inside of the stackView and I need to set one element width is lower than the stack view How can I do that?

Here is 3 items

private var productNameLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 2
        label.textColor = .white
        return label
    }()
    
    private var priceLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        return label
    }()
    
    private lazy var buyButton: UIButton = {
        let button = UIButton()
        button.configuration = .filled()
        button.configuration?.title = Constants.buyButton
        button.configuration?.baseForegroundColor = .orange
        button.configuration?.baseBackgroundColor = .white
        button.addTarget(self, action: #selector(goToDescriptionScreen),for: .touchUpInside)
        return button
    }()
    
    private lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [productNameLabel, priceLabel, buyButton])
        stackView.axis = .vertical
        stackView.distribution = .fillEqually
        stackView.spacing = 30
        return stackView
    }()

Here is configurator

addSubview(stackView)
        stackView.snp.makeConstraints { make in
            make.centerY.equalToSuperview()
            make.left.right.equalToSuperview().inset(30)
            make.width.equalTo(200)
        }
        
        buyButton.snp.makeConstraints { make in
            make.width.equalTo(30)
        }

The problem is my button width makes like stackView = 200

CodePudding user response:

You can add a UIView as a container inside the UIStackView and inside the UIView you can add the UIButton you want with the specified width. Add constraints to UIButton inside UIView (top, leading, trailing, bottom) and you are good to go.

  • Related