How to add an UIImageView programmatically into a UIStackView (Storyboard)

Question

I've designed the layout mostly in Storyboard. However now I want to remove/hide a UIButton (storyboard) for then to add a UIImageView instead programmatically.

I've managed to hide the UIButton programmatically, but struggle to show the UIImageView correctly within the UIStackView.

The UIStackView already contain a UIView designed in Storyboard. I need to add the UIImageView to the right of the UIView in this horizontal UIStackView programmatically.

Any tips?

import UIKit
import Firebase
import Photos
import Kingfisher

class editProfileVC: UIViewController {

    var userArray = [User]()

    // StackView outlets needed to set background color
    @IBOutlet weak var backgroundStackView: UIStackView!

    // Normal outlets
    @IBOutlet weak var firstName: UITextField! // required
    @IBOutlet weak var lastName: UITextField! // required - type of hunt
    @IBOutlet weak var email: UITextField! // required - weapon name
    @IBOutlet weak var city: UITextField! // optional (eg. 1)
    @IBOutlet weak var country: UITextField! // optional (eg. 2)
    @IBOutlet weak var primaryHunt: UITextField! // optional short description of the hunt

    @IBOutlet weak var saveBtn: UIButton!
    @IBOutlet weak var cancelBtn: UIButton!

    @IBOutlet weak var addImageBtn: UIButton!
    @IBOutlet weak var addImageStackView: UIStackView!

    override func viewDidLoad() {
        super.viewDidLoad()

        if Auth.auth().currentUser == nil {
            let authVC = self.storyboard?.instantiateViewController(withIdentifier: "authVC") as? authVC
            self.present(authVC!, animated: true, completion: nil)
        }

        pinBackground(backgroundView, to: backgroundStackView)

        // Get userdata from Firebase
        let userId = (Auth.auth().currentUser?.uid)!

        DataService.instance.getUserdata(userId: userId) { (returnedUserArray) in

            if returnedUserArray.isEmpty == false {

                // if user exist populate textfields with information from database
                self.firstName.text = returnedUserArray[0].firstName
                self.lastName.text = returnedUserArray[0].lastName
                self.city.text = returnedUserArray[0].city
                self.country.text = returnedUserArray[0].country
                self.primaryHunt.text = returnedUserArray[0].defaultHunt

                if returnedUserArray[0].profileImageURL.isEmpty == false {
                    // hide addImageBtn
                    self.addImageBtn.isHidden = true

                    // show profile image
                    let imageView = UIImageView()
                    imageView.kf.setImage(with: URL.init(string:returnedUserArray[0].profileImageURL))
                    self.addImageStackView.addSubview(imageView)

                    imageView.translatesAutoresizingMaskIntoConstraints = false
                    imageView.heightAnchor.constraint(equalToConstant: 50).isActive = true
                    imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
                }
            }
        }
    }
}

The UIStackView is the top section under the green bar. The addImageBtn in the gray profile icon with the text "add profile image".

Upholder Of Truth Upholder Of Truth · Accepted Answer · 2018-01-14T18:47:39

To add any view to a UIStackView you do the following:

stackView.addArrangedSubview(view)

If you want to add the view at a certain position then do this:

stackView.insertArrangedSubview(view, at: 1) // Be careful you get the index correct.

Ff you then need to remove the view you do this:

stackView.removeArrangedSubview(view)
view.removeFromSuperview() // This is needed because the view still remains a sub view of the UIStackView.

How it looks will depend on how you have setup your stack view.

How to add an UIImageView programmatically into a UIStackView (Storyboard)

1 Answers