3 views next to each other programmatically constraints

Question

I'm trying to create a custom callOutView and for this i have a bubbleView, which is a subclass of a UIView in this view i want to create 3 views next to eachother. First an imageView, which has an static width and height on 60. Then an UIView which has a dynamically width depending on the total width of the bubbleView. Then in the end there is another imageView with an static height and width again at 60. How can i achieve this? i've tried below with snapKit, but does not seem to work.

Illustration of what i want

Code i've tried

        bubbleView = BubbleView()
        bubbleView?.clipsToBounds = true
        bubbleView?.layer.masksToBounds = true
        self.addSubview(bubbleView!)

        let logoImageView = UIImageView()
        logoImageView.contentMode = UIViewContentMode.ScaleAspectFill
        logoImageView.image = UIImage(data: logoImage!)
        bubbleView?.contentView.addSubview(logoImageView)
        logoImageView.backgroundColor = UIColor.whiteColor()

        let informationView = UIView()
        bubbleView?.contentView.addSubview(informationView)
        informationView.backgroundColor = UIColor.redColor()

        let discView = UIImageView()
        discView.contentMode = UIViewContentMode.ScaleAspectFill
        discView.image = UIImage(data: logoImage!)
        bubbleView?.contentView.addSubview(discView)
        discView.backgroundColor = UIColor.whiteColor()



        logoImageView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(bubbleView!).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(informationView)

        }

        informationView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(logoImageView).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(discView).offset(0)
        }

        discView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(bubbleView!).offset(0)
            make.left.equalTo(informationView).offset(0)
            make.height.equalTo(60)
            make.right.equalTo(bubbleView!)

        }

Answer 1

You need to set

• width constraint on leftView and rightView equal to 60.
• middleView.leading equal leftView.trailing
• middleView.trailing equal rightView.leading.
• all.height equal to 60.
• all.top equal parent.top

---

You can try this in Playground.

import UIKit
import XCPlayground

let parentView = UIView()

parentView.frame.size = CGSize(width: 450, height: 60)
parentView.backgroundColor = UIColor.whiteColor()

let leftView = UIView()
leftView.translatesAutoresizingMaskIntoConstraints = false
leftView.backgroundColor = .blackColor()

let rightView = UIView()
rightView.translatesAutoresizingMaskIntoConstraints = false
rightView.backgroundColor = .grayColor()

let middleView = UIView()
middleView.translatesAutoresizingMaskIntoConstraints = false
middleView.backgroundColor = .lightGrayColor()

// add subview
parentView.addSubview(leftView)
parentView.addSubview(middleView)
parentView.addSubview(rightView)

// config constraints
leftView.leadingAnchor.constraintEqualToAnchor(parentView.leadingAnchor).active = true
leftView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
leftView.heightAnchor.constraintEqualToConstant(60).active = true
leftView.widthAnchor.constraintEqualToConstant(60).active = true

rightView.trailingAnchor.constraintEqualToAnchor(parentView.trailingAnchor).active = true
rightView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
rightView.heightAnchor.constraintEqualToConstant(60).active = true
rightView.widthAnchor.constraintEqualToConstant(60).active = true

middleView.leadingAnchor.constraintEqualToAnchor(leftView.trailingAnchor).active = true
middleView.trailingAnchor.constraintEqualToAnchor(rightView.trailingAnchor).active = true
middleView.topAnchor.constraintEqualToAnchor(parentView.topAnchor).active = true
middleView.bottomAnchor.constraintEqualToAnchor(parentView.bottomAnchor).active = true

XCPlaygroundPage.currentPage.liveView = parentView

Answer 2

try the following:

    let bubbleView = UIView()
    bubbleView.translatesAutoresizingMaskIntoConstraints = false

    let logoImageView = UIImageView()
    logoImageView.translatesAutoresizingMaskIntoConstraints = false
    logoImageView.backgroundColor = .darkGrayColor()
    bubbleView.addSubview(logoImageView)

    let informationView = UIView()
    informationView.translatesAutoresizingMaskIntoConstraints = false
    informationView.backgroundColor = .lightGrayColor()
    bubbleView.addSubview(informationView)

    let discImageView = UIImageView()
    discImageView.translatesAutoresizingMaskIntoConstraints = false
    discImageView.backgroundColor = .darkGrayColor()
    bubbleView.addSubview(discImageView)

    let views = ["logoImageView": logoImageView, "informationView": informationView, "discImageView": discImageView]

    bubbleView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[logoImageView(60)][informationView][discImageView(60)]|", options: [.AlignAllBottom, .AlignAllTop], metrics: nil, views: views))
    bubbleView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[logoImageView(60)]|", options: [], metrics: nil, views: views))

    // helper constraint so that the information view is at least two times the imageviews' width
    bubbleView.addConstraint(NSLayoutConstraint(item: informationView, attribute: .Width, relatedBy: .GreaterThanOrEqual, toItem: logoImageView, attribute: .Width, multiplier: 2.0, constant: 0.0))

    view.addSubview(bubbleView)
    view.addConstraint(NSLayoutConstraint(item: bubbleView, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1.0, constant: 0.0))
    view.addConstraint(NSLayoutConstraint(item: bubbleView, attribute: .CenterY, relatedBy: .Equal, toItem: view, attribute: .CenterY, multiplier: 1.0, constant: 0.0))

result: