UIButton inside a UIView subclass is not working, Swift

Question

I've seen similar SO questions, the most promising ones advised to set .isUserInteractionEnabled = true and .bringSubview(toFront: subView) however both these don't seem to work in my case (not sure if I am using it correctly). I am neither able to set the backgroundColor and border for the view.

Please advise where I am going wrong.

I would like to call a function on click of a editButton which is inside a subview.

This is what I get when I run the code:

Here is the code:

class ProfilePhotoView: UIView{

    var profileImage    =   UIImageView()
    var editButton      =   UIButton()
    var currentViewController   : UIViewController



    init(frame: CGRect, viewController : UIViewController){
        self.currentViewController = viewController

        super.init(frame: frame)
        self.isUserInteractionEnabled = true
        setup()
    }



    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    func setup(){

        profileImage.image = #imageLiteral(resourceName: "profilePlaceHolder")
        editButton.setTitle("edit", for: .normal)
        editButton.setTitleColor(Colors.curieBlue, for: .normal)
        editButton.isUserInteractionEnabled = true
        editButton.addTarget(self, action: #selector(editPhoto), for: .touchUpInside)

        profileImage.translatesAutoresizingMaskIntoConstraints  =   false

        editButton.translatesAutoresizingMaskIntoConstraints     =   false

        self.addSubview(profileImage)
        self.addSubview(editButton)


        let viewsDict = [ "profileImage"    :   profileImage,
                          "editButton"       :   editButton
        ] as [String : Any]

        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[profileImage]", options: [], metrics: nil, views: viewsDict))
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[profileImage]", options: [], metrics: nil, views: viewsDict))



        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[editButton]", options: [], metrics: nil, views: viewsDict))
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[profileImage]-10-[editButton]", options: [], metrics: nil, views: viewsDict))

    }

    func editPhoto(){
        Utils.showSimpleAlertOnVC(targetVC: currentViewController, title: "Edit Button Clicked", message: "")
    }


}

ViewController using ProfilePhotoView

class ProfilePhotoViewVC: UIViewController {

    var profilePhotoView    :   ProfilePhotoView!
    //let imagePickerController   =   UIImagePickerController() // Initializing imagePicker
    //var imagePickerDelegate     =   ProfilePhotoDelegate()



    override func viewDidLoad() {
        super.viewDidLoad()

        let profilePhotoFrame               = CGRect(x: 0, y: 0, width: 300, height: 800)
        profilePhotoView                    =   ProfilePhotoView(frame: profilePhotoFrame, viewController: self)
        profilePhotoView.isOpaque           = false
        profilePhotoView.backgroundColor    = Colors.lightGrey
        profilePhotoView.layer.borderWidth  = 1
        profilePhotoView.layer.borderColor  = Colors.iOSBlue.cgColor
        profilePhotoView.translatesAutoresizingMaskIntoConstraints   =   false

        view.addSubview(profilePhotoView)
        view.bringSubview(toFront: profilePhotoView)

        view.isUserInteractionEnabled = true

        let viewsDict = [ "profilePhotoView"    :   profilePhotoView] as [String : Any]

        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[profilePhotoView]", options: [], metrics: nil, views: viewsDict))
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[profilePhotoView]", options: [], metrics: nil, views: viewsDict))

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

Answer 1

As soon as you set this:

profilePhotoView.translatesAutoresizingMaskIntoConstraints = false

your profilePhotoView 's width and height get set to 0 , and you need to specify them with constraints. Add (==300) and (==800) to your visual formats to set them:

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[profilePhotoView(==300)]", options: [], metrics: nil, views: viewsDict))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[profilePhotoView(==800)]", options: [], metrics: nil, views: viewsDict))

Also, consider using NSLayoutConstraint.activate() to activate the constraints instead of adding them to the view. iOS will add the constraints to the correct views for you. Also, options has a default value of [] , so you can leave that off:

NSLayoutConstraint.activate(NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-10-[profilePhotoView(==300)]",
    metrics: nil, views: viewsDict)
)
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(
    withVisualFormat: "V:|-10-[profilePhotoView(==800)]",
    metrics: nil, views: viewsDict)
)