How to put a UIStackview inside a UIView in Swift programatically

Question

I want to put a Stackview of 5 images inside a UIView. Basically what I want is to make a rounded button with a shadow and inside the button 5 different small images horizontally.

What I already have is a viewcontroller with each a declaration and setup function. I am able to make the UIView.

Here is an image of what I am trying to achieve:

How do I solve this?

Some code I already have:

private let btnUIView: UIView = {
        let btnUIView = UIView(frame: CGRect(x: 50, y: 50, width: 343, height: 77))
        btnUIView.layer.shadowColor = UIColor.black.cgColor
        btnUIView.layer.shadowOpacity = 0.5
        btnUIView.layer.shadowOffset = .zero
        btnUIView.layer.shadowRadius = 3
        btnUIView.backgroundColor = .white
        btnUIView.translatesAutoresizingMaskIntoConstraints = false
        btnUIView.layer.borderWidth = 0
        btnUIView.layer.borderColor = UIColor.gray.cgColor
        return btnUIView
    }()

 private let btnStackView: UIStackView = {
        let image = UIStackView()
        image.translatesAutoresizingMaskIntoConstraints = false
        image.distribution = .fillEqually
//        image.spacing = 60
        return image
    }()




func setupBtnView(){
        view.addSubview(btnUIView)
        btnUIView.addSubview(btnStackView)
        NSLayoutConstraint.activate([
            btnUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            btnUIView.topAnchor.constraint(equalTo: btnText.bottomAnchor, constant: 15),
            btnUIView.heightAnchor.constraint(equalToConstant: btnUIView.frame.height),
            btnUIView.widthAnchor.constraint(equalToConstant: btnUIView.frame.width),
        ])


let imgone = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgtwo = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgthree = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))
        let imgfour = UIImageView(image: #imageLiteral(resourceName: "imgtst1"))
        let imgfive = UIImageView(image: #imageLiteral(resourceName: "imgtest1"))




btnStackView.addArrangedSubview(imgone)
btnStackView.addArrangedSubview(imgtwo)
btnStackView.addArrangedSubview(imgthree)
btnStackView.addArrangedSubview(imgfour)
btnStackView.addArrangedSubview(imgfive)

imgone.contentMode = .scaleAspectFill
imgtwo.contentMode = .scaleAspectFill
imgthree.contentMode = .scaleAspectFill
imgfour.contentMode = .scaleAspectFill
imgfive.contentMode = .scaleAspectFill


imgone.clipsToBounds = true
imgtwo.clipsToBounds = true
imgthree.clipsToBounds = true
imgfour.clipsToBounds = true
imgfive.clipsToBounds = true
    }


func setupImages(){
        view.addSubview(btnStackView)
        NSLayoutConstraint.activate([
            btnStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            btnStackView.topAnchor.constraint(equalTo: btnUIView.bottomAnchor, constant: 20),
            btnStackView.widthAnchor.constraint(equalToConstant: btnStackView.frame.width)
        ])

What I see in the app, an empty UIView:

Answer 1

This seems pretty straightforward. It took me about two minutes to write the code that gets us this:

That's just a sketchy rendering of what you're after, but it shows that the basic idea is simple enough. All I did was:

1. Create the outer view, configure it with a rounded border, and add it as a subview.

2. Create the stack view, configure it with equal spacing etc., and add it as a subview to the outer view.

3. Create five image views with images (just circles here) and add them as arranged subviews to the stack view.

Literally just 11 lines of code inside my viewDidLoad .

---

As for your code (which you have now shown), the chief problem is likely that the constraints make no sense. Here's my correction of your code (substituting my own circle image, for test purposes); this is the entire code of my test app view controller:

private let btnUIView: UIView = {
    let btnUIView = UIView()
    btnUIView.layer.shadowColor = UIColor.black.cgColor
    btnUIView.layer.shadowOpacity = 0.5
    btnUIView.layer.shadowOffset = .zero
    btnUIView.layer.shadowRadius = 3
    btnUIView.backgroundColor = .white
    btnUIView.translatesAutoresizingMaskIntoConstraints = false
    btnUIView.layer.borderWidth = 0
    btnUIView.layer.borderColor = UIColor.gray.cgColor
    return btnUIView
}()
private let btnStackView: UIStackView = {
    let image = UIStackView()
    image.translatesAutoresizingMaskIntoConstraints = false
    image.distribution = .fillEqually
    image.alignment = .center
    return image
}()

override func viewDidLoad() {
    super.viewDidLoad()
    let r = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30))
    let im = r.image { _ in UIBezierPath.init(ovalIn: CGRect(x: 1, y: 1, width: 28, height: 28)).stroke() }

    let imgone = UIImageView(image: im)
    let imgtwo = UIImageView(image: im)
    let imgthree = UIImageView(image: im)
    let imgfour = UIImageView(image: im)
    let imgfive = UIImageView(image: im)
    
    btnStackView.addArrangedSubview(imgone)
    btnStackView.addArrangedSubview(imgtwo)
    btnStackView.addArrangedSubview(imgthree)
    btnStackView.addArrangedSubview(imgfour)
    btnStackView.addArrangedSubview(imgfive)
    
    setupBtnView()
}

func setupBtnView(){
    view.addSubview(btnUIView)
    btnUIView.addSubview(btnStackView)
    NSLayoutConstraint.activate([
        btnUIView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        btnUIView.topAnchor.constraint(equalTo: view.topAnchor, constant: 40),
        btnUIView.heightAnchor.constraint(equalToConstant: 100),
        btnUIView.widthAnchor.constraint(equalToConstant: 300),
    ])
    NSLayoutConstraint.activate([
        btnStackView.leadingAnchor.constraint(equalTo: btnUIView.leadingAnchor),
        btnStackView.trailingAnchor.constraint(equalTo: btnUIView.trailingAnchor),
        btnStackView.topAnchor.constraint(equalTo: btnUIView.topAnchor),
        btnStackView.bottomAnchor.constraint(equalTo: btnUIView.bottomAnchor),
    ])
}

Result: