CODEWITHSUNDEEP
swiftxcode
Primico
Primico

Reputation: 2465

Positioning elements in TableViewCell using withVisualFormat

Using the code below, I would expect my text to be lined up beneath my title, however it is shifted, as seen in the image. I am new to using withVisualFormat, so any advice would help. Thanks

enter image description here

override init(style: UITableViewCellStyle, reuseIdentifier: String!)
    {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        self.imgIcon = UIImageView(image: UIImage(named: "icon_tack_b_f"))
        self.imgIcon.frame.size = CGSize(width: 40, height: 40)
        self.lblTitle = UILabel()
        self.lblText = UILabel()
        self.imgStatus = UIImageView(image: UIImage(named: "icon_checked"))
        self.imgStatus.frame.size = CGSize(width: 30, height: 30)

        imgIcon.translatesAutoresizingMaskIntoConstraints = false
        lblTitle.translatesAutoresizingMaskIntoConstraints = false
        lblText.translatesAutoresizingMaskIntoConstraints = false
        imgStatus.translatesAutoresizingMaskIntoConstraints = false

        contentView.addSubview(imgIcon)
        contentView.addSubview(lblTitle)
        contentView.addSubview(lblText)
        contentView.addSubview(imgStatus)

        let viewsDict = [
            "icon" : imgIcon,
            "title" : lblTitle,
            "text" : lblText,
            "status" : imgStatus,
            ] as [String : Any]

        contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[icon(40)]-[title]-[status(30)]-|", options: [], metrics: nil, views: viewsDict))
        contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[title]-[text]-|", options: [], metrics: nil, views: viewsDict))
        contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-40-[text]-30-|", options: [], metrics: nil, views: viewsDict))
    }

Upvotes: 0

Views: 24

Answers (1)

iWheelBuy
iWheelBuy

Reputation: 5679

Try setting distance between objects in you first visual constraint:

"H:|-0-[icon(40)]-0-[title]-0-[status(30)]-0-|"

Also, don't forget about the height of each image

"V:|[icon(40)]"
"V:|[status(30)]"

So, the result would be:

contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[icon(40)]-0-[title]-0-[status(30)]-0-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[title]-[text]-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-40-[text]-30-|", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[icon(40)]", options: [], metrics: nil, views: viewsDict))
contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[status(30)]", options: [], metrics: nil, views: viewsDict))

Upvotes: 1

Related Questions