CODEWITHSUNDEEP
iosswift
John
John

Reputation: 1015

Issue with adding constraints to UIImage programmatically | Swift

How can I set up constraints for an image to sit on the top center directly above the titleLabel of the following tableview extention.

The code below currently displays a titleLabel and a messageLabel right under it:

extension UITableView {
    func setEmptyView(title: String, message: String) {
        let emptyView = UIView(frame: CGRect(x: self.center.x, y: self.center.y, width: self.bounds.size.width, height: self.bounds.size.height))
        let titleLabel = UILabel()
        let messageLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.textColor = UIColor.black
        titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
        messageLabel.textColor = UIColor.lightGray
        messageLabel.font = UIFont(name: "HelveticaNeue-Regular", size: 23)
        emptyView.addSubview(titleLabel)
        emptyView.addSubview(messageLabel)
        titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true
        titleLabel.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
        messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
        messageLabel.leftAnchor.constraint(equalTo: emptyView.leftAnchor, constant: 20).isActive = true
        messageLabel.rightAnchor.constraint(equalTo: emptyView.rightAnchor, constant: -20).isActive = true
        titleLabel.text = title
        messageLabel.text = message
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center
        // The only tricky part is here:
        self.backgroundView = emptyView
        self.separatorStyle = .none
    }
    func restore() {
        self.backgroundView = nil
        self.separatorStyle = .singleLine
    }
}

I have tried adding the code below but it does not make it centered is off to the top left side:

let emptyImage = UIImage()
emptyImage = false
emptyView.addSubview(emptyImage)
emptyImage.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
emptyImage.bottomAnchor(equalTo: titleLabel.topAnchor, constant: 20).isActive = true

The image is a square of around 50x50

Upvotes: 0

Views: 561

Answers (1)

DonMag
DonMag

Reputation: 77452

You need to add a UIImageView as a subview, and then constrain it to the title label.

Give this a try - it will add an image view, centered above the title view, with a width of 50 and a height equal to its width (so, 50x50):

extension UITableView {
    func setEmptyView(title: String, message: String) {
        let emptyView = UIView(frame: CGRect(x: self.center.x, y: self.center.y, width: self.bounds.size.width, height: self.bounds.size.height))
        emptyView.backgroundColor = .cyan
        let titleLabel = UILabel()
        let messageLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.textColor = UIColor.black
        titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 25)
        messageLabel.textColor = UIColor.lightGray
        messageLabel.font = UIFont(name: "HelveticaNeue-Regular", size: 23)
        emptyView.addSubview(titleLabel)
        emptyView.addSubview(messageLabel)
        titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true
        titleLabel.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
        messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
        messageLabel.leftAnchor.constraint(equalTo: emptyView.leftAnchor, constant: 20).isActive = true
        messageLabel.rightAnchor.constraint(equalTo: emptyView.rightAnchor, constant: -20).isActive = true
        titleLabel.text = title
        messageLabel.text = message
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center

        // start of add image view code
        let imgView = UIImageView()
        imgView.translatesAutoresizingMaskIntoConstraints = false
        if let img = UIImage(named: "s1") {
            imgView.image = img
        }
        emptyView.addSubview(imgView)
        NSLayoutConstraint.activate([
            imgView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: 0.0),
            imgView.centerXAnchor.constraint(equalTo: titleLabel.centerXAnchor, constant: 0.0),
            imgView.widthAnchor.constraint(equalToConstant: 50.0),
            imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: 1.0),
            ])
        // end of add image view code

        // The only tricky part is here:
        self.backgroundView = emptyView
        self.separatorStyle = .none
    }
    func restore() {
        self.backgroundView = nil
        self.separatorStyle = .singleLine
    }
}

If you want the image view to have a little spacing above the title view, set the constant on this line (to a negative number):

// this will add 20-pts vertical spacing between the 
// bottom of the image view and the top of the title label
imgView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: -20.0),

Edit If you want to adjust the vertical positioning, change this line:

titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true

to this:

titleLabel.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor, constant: 20).isActive = true

and set the constant value until you're happy with it.

Upvotes: 1

Related Questions