Autostart table cell with images and text fields?

Question

I want to make a table cell with a snapshot and wrap the text with an automatic layout. I managed a lot with the auto layout, but I don’t understand how to do it.

┌─────────────────────────────────────────────────────┐ │ ┌──────────┐ ┌────────────────────────────────────┐ │ │ │ │ │ Title (might wrap) │ │ │ │ │ └────────────────────────────────────┘ │ │ │ Photo │ ┌────────────────────────────────────┐ │ │ │ │ │ Body text. May wrap, may contain │ │ │ │ │ │ multiple lines. │ │ │ │ │ └────────────────────────────────────┘ │ │ └──────────┘ │ └─────────────────────────────────────────────────────┘ 

As the text expands, I want to save the photo in the upper left corner and expand the cell. However, the cell should not decrease below the minimum size required to display the photo (with margins).

 ┌─────────────────────────────────────────────────────┐ │ ┌──────────┐ ┌────────────────────────────────────┐ │ │ │ │ │ Title (might wrap) │ │ │ │ │ │ Maybe even to two lines. │ │ │ │ Photo │ └────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ Body text. May wrap, may contain │ │ │ │ │ │ multiple lines. │ │ │ └──────────┘ │ │ │ │ │ Text could require more vertical │ │ │ │ space than the photo. │ │ │ └────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘ 

I need iOS 8 or later.

I tried to do this with only three views viewed, and also placing the left element and the right elements in two views. I try to ignore the minimum photo size for each combination.

(Btw, for anyone curious: Graphics via Monodraw.)

Answer 1

Try the following relationships:

Photo:

• width = X
• height = Y
• left = Cell + Z
• top = Cell + Z

Title:

• left = Photo + Z
• right = Cell - Z
• top = Cell + Z

the label will automatically calculate the height based on the content

Body:

• Left = Title
• Right = Title
• Up = Name .Bottom + Z

Cell: (this is an important part)

• Bottom> = (equal to or greater) Body.Bottom + Z
• Bottom> = Photo.Bottom + Z

this will make the cell always be higher than image + offset or higher than label + offset