带有图像和文本字段的自动布局表格单元格?

I'm looking to do a table view cell with a photo and wrapping text with auto layout. I've managed a lot with auto layout, but I'm at a loss on how to do this one.

我想做一个表格视图单元格与照片和包装文本与自动布局。我对自动布局管理了很多，但是我不知道怎么做这个。

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

As the text expands, I want to keep the photo in the top left and expand the cell. However, the cell should never shrink below the minimum required to show 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'm requiring iOS 8 or later.

我需要iOS 8或更高版本。

I've tried doing this with just the three views listed, and also by putting the left item and right items in two views. Every combination I try seems to ignore the photo's minimum size.

我已经尝试过使用列出的三个视图来实现这一点，还尝试过将左项和右项放在两个视图中。我尝试的每一种组合似乎都忽略了照片的最小尺寸。

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

(顺便说一句，对任何好奇的人来说:图文并茂。)

1 个解决方案

#1

Try having the following relationships:

尝试拥有以下关系:

Photo:

照片:

width = X
宽度= X
height = Y
身高= Y
left = Cell + Z
左=单元格+ Z
top = Cell + Z
top = Cell + Z

Title:

标题:

left = Photo + Z
左=照片+ Z
right = Cell - Z
right = Cell - Z。
top = Cell + Z
top = Cell + Z

the label will auto calculate the height based on content

标签将根据内容自动计算高度。

Body:

身体:

Left = Title
左=标题
Right = Title
正确的=标题
Top = Title.Bottom + Z
=标题。底+ Z

Cell: (this is the important part)

细胞:(这是重要的部分)

Bottom >= (equal to or greater than) Body.Bottom + Z
底部>=(等于或大于)主体。底+ Z
Bottom >= Photo.Bottom + Z
底> =照片。底+ Z

this will force the cell to be, at all times, either taller than the image + offset or taller than the label + offset

这将迫使单元格始终高于图像+偏移量，或高于标签+偏移量

#1