Unable to set constraints for custom view, Swift

Question

I am not able to set leading and top constraints for a custom view inside a tableViewCell, I also get an error message which says

size is ambiguous for profileImageView

However I am able to centre profileImageView to the centre of the cell, but when I try to set the leadingAnchor (As shown in the below function setUp) the centre of the view is being used instead of the leadingAnchor.

This is how my profileImageView is displayed, it goes to the top left corner of the cell.

class CustomCell: UITableViewCell {

var profileImageView        : ProfileImageView!    

func setUp(_viewController : UIViewController){

    let profileImageFrame   = CGRect(x: 0, y: 0, width: 150, height: 150) // Creating a frame for the imageView
            profileImageView        =   ProfileImageView(frame: profileImageFrame, viewController: _viewController, photoWidth: 100.0)

    profileImageView.translatesAutoresizingMaskIntoConstraints = false

    contentView.addSubview(profileImageView) // ContentView refers to the cell contentView

    profileImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true

    profileImageView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true

}

}

Using the below class to create profileImageView

class ProfileImageView: UIView,
                        UIImagePickerControllerDelegate,
                        UINavigationControllerDelegate,
                        TOCropViewControllerDelegate{
    // FOR IMAGE CROPPER
    var photoDiameter:  CGFloat           =   100.0
    var photoFrameViewPadding : CGFloat   =   2.0
    let addButtonTitle = "add\nphoto"

    var didSetupConstraints: Bool = false

    var photoFrameView          :   UIView!
    var addPhotoButton          :   UIButton!

    var editPhotoButton         :   UIButton!
    var currentViewController   =   UIViewController()


    init(frame: CGRect, viewController : UIViewController, photoWidth: CGFloat){
        //Initialise values
        photoFrameView              =   UIView()
        addPhotoButton              =   UIButton()
        editPhotoButton             =   UIButton()
        currentViewController       =   viewController
        photoDiameter               =   photoWidth
        super.init(frame: frame)
        setup()
    }


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



    func setup(){


        // ---------------------------
        // Add the frame of the photo.
        // ---------------------------
        let photoImageViewOrigin = self.frame.origin
        self.frame = CGRect(x: photoImageViewOrigin.x, y: photoImageViewOrigin.y, width: photoDiameter, height: photoDiameter + 20.0)
        self.backgroundColor =  UIColor.clear

        photoFrameView?.backgroundColor = UIColor(red: 182 / 255.0, green: 182 / 255.0, blue: 187 / 255.0, alpha: 1.0)
        //photoFrameView.backgroundColor     = UIColor.gray
        photoFrameView.translatesAutoresizingMaskIntoConstraints = false

        photoFrameView.layer.masksToBounds = true
        photoFrameView.layer.cornerRadius = (photoDiameter + photoFrameViewPadding) / 2
        self.addSubview(photoFrameView!)


        // ----------------
        // Add constraints.
        // ----------------
        //self.setNeedsUpdateConstraints()
        self.setConstraints()
    }



    func setConstraints() {
        //super.updateViewConstraints()
        if didSetupConstraints {
            return
        }
        // ---------------------------
        // The frame of the photo.
        // ---------------------------
        var constraint = NSLayoutConstraint(item: photoFrameView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: (photoDiameter + photoFrameViewPadding))
        photoFrameView?.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: photoFrameView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: (photoDiameter + photoFrameViewPadding))
        photoFrameView?.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: photoFrameView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: 0.0)

        self.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: photoFrameView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0.0)
        self.addConstraint(constraint)


        // ---------------------------
        // The button "add photo".
        // ---------------------------
        constraint = NSLayoutConstraint(item: addPhotoButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: photoDiameter)
        addPhotoButton?.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: addPhotoButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: photoDiameter)
        addPhotoButton?.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: addPhotoButton, attribute: .centerX, relatedBy: .equal, toItem: photoFrameView, attribute: .centerX, multiplier: 1.0, constant: 0.0)
        self.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: addPhotoButton, attribute: .centerY, relatedBy: .equal, toItem: photoFrameView, attribute: .centerY, multiplier: 1.0, constant: 0.0)
        self.addConstraint(constraint)




        // ---------------------------
        // The button "edit photo".
        // ---------------------------
        constraint = NSLayoutConstraint(item: editPhotoButton, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0.0)
        self.addConstraint(constraint)
        constraint = NSLayoutConstraint(item: editPhotoButton, attribute: .top, relatedBy: .equal, toItem: photoFrameView, attribute: .bottom, multiplier: 1.0, constant: -5.0)
        self.addConstraint(constraint)

        didSetupConstraints = true

    }
}

score 0 · Answer 1 · answered Jan 23 '18 at 07:38

Your mistake is here:

profileImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true

profileImageView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true

topAnchor/leadingAnchor.constraint does not set a constraint, it returns a constraint of which you can add into the view hierarchy. Therefore your profileImageView effectively have no constraints.

Furthermore you did not set it's width and height in constraints only in frame. That is the source of your warning.

Solution

let leadingConstraint = profileImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
let topConstraint = profileImageView.topAnchor.constraint(equalTo: contentView.topAnchor)

//These are just examples, make whichever constraints that you need
let widthConstraint = NSLayoutConstraint(item: profileImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 150.0)
let heightConstraint = NSLayoutConstraint(item: profileImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 150.0)

contentView.addConstraints([leadingConstraint,topConstraint, widthConstraint, heightConstraint])

Unable to set constraints for custom view, Swift

1 Answers1