Constrain Subviews Within View about pinlayout

[lucdion]

Hi @csimmonsbluebook,

Your case is similar to the example "TableView with variable cell's height" in the Sample app. See the UITableViewCell implementation: https://github.com/mirego/PinLayout/blob/master/Example/PinLayoutSample/UI/Tests/TableViewExample/Cells/MethodCell.swift

If you pin your labels's edges, they will be automatically contained inside your container.

For example, these lines will the layout the 2 labels one below the other, they will use the full container's width with a margin of 10 pixels. These lines will also adjust label's height to match their text (sizeToFit()).

label1.pin.top().left().right().margin(10).sizeToFit()
label2.pin.below(of: label1).left().right().margin(10).sizeToFit()

Another similar solution using pinEdges:

label1.pin.top().left().width(100%).pinEdges().margin(10).sizeToFit()
label2.pin.below(of: label1).left().width(100%).pinEdges().margin(10).sizeToFit()

@luc-dion yeah that makes sense, and I was following that example. However, to the left of those labels I want to add an image and to the right of the labels I want to add text. Basically, it looks like a cell for an appointment. I've illustrated below:

[lucdion]

Instead of answering your question without testing it, I've implemented your view! Note that there is always multiple paths to achieve the same results. This is just one of them.

Here is the code:

class SampleView: UIView {
    fileprivate let container = UIView()
    fileprivate let logo = UIImageView(image: UIImage(named: "PinLayout-logo"))
    fileprivate let textLabel = UILabel()
    fileprivate let textLabel2 = UILabel()
    
    init() {
        super.init(frame: .zero)

        logo.contentMode = .scaleAspectFit
        addSubview(logo)
        
        textLabel.text = "12H00\n13h30"
        textLabel.font = .systemFont(ofSize: 14)
        textLabel.numberOfLines = 0
        textLabel.lineBreakMode = .byWordWrapping
        addSubview(textLabel)
        
        textLabel2.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore"
        textLabel2.font = .systemFont(ofSize: 14)
        textLabel2.numberOfLines = 3
        addSubview(textLabel2)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let margin: CGFloat = 12
        logo.pin.top().left().bottom().size(100).align(.center).margin(margin)
        textLabel.pin.right(of: logo, aligned: .center).width(30%).margin(margin).sizeToFit()
        textLabel2.pin.right(of: textLabel, aligned: .center).right().margin(margin).sizeToFit()
    }
}

And the result:

[lucdion]

Please note that I'm also working on another project that will integrate perfectly with PinLayout that would resolve this kind of layout even more easily. Please stay tuned 🙂

[lucdion]

You can now check also my other project that resolves layouts with many views more easily: https://github.com/lucdion/FlexLayout