表格視圖單元格中復雜視圖的自動布局

Question

我知道這可能不是最好的問題，但我確實需要一個起點：

如果要創建以下布局（使用自動布局）：

我試過的是：

• 將三個零放在水平堆棧視圖中
• 然后將三個標簽（帖子，關注者，跟隨者）放在水平堆棧視圖中。
• 然后將上面的兩個水平堆棧視圖放入垂直堆棧視圖。
• 然后，我在（帖子，關注者，關注對象）標簽下方添加了灰色按鈕，將其添加到上方創建的垂直堆棧視圖中。 所以最后我有了一個垂直堆棧視圖，其中包括兩個水平堆棧視圖和灰色按鈕。
• 最后，我將圖像添加到在上述步驟中創建的垂直堆棧視圖的左側，從而形成了最終的水平堆棧視圖。 這一步完全破壞了我的布局。 使圖像具有500寬度，從而使堆棧視圖脫離屏幕。 因此，我在最后一個包含圖像，灰色按鈕和兩個水平堆棧視圖的水平堆棧上將布局約束設置為Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20 。 （我沒有在此最終堆棧視圖中觸摸堆棧視圖。我僅將布局放在在此步驟中創建的主水平堆棧視圖上）。

經過4bar建議：

請注意，我沒有觸摸底部的名字，facebook.com或生物標簽。

Answer 1

如果您尚未為最外面的水平堆棧視圖設置分布模式，它將默認為UIStackViewDistributionFill，在這種情況下，已排列的子視圖將根據其擁抱優先級拉伸以填充整個寬度。 增加圖像視圖上具有優先級的內容（例如，增加到251）以防止其拉伸。 另外，如果圖像尺寸大於您要占用的空間，則可能還需要在圖像上設置其他寬度或高度約束，以覆蓋其固有尺寸。

要了解的主要內容是，UIStackView的大小由其排列的子視圖的固有大小加上間距驅動。 在“填充”模式下，如果可用空間過多，則使用內容包含優先級來確定要拉伸的視圖； 如果可用空間太小，則使用抗壓縮優先級來確定要壓縮的視圖。

Answer 2

如果要使圖像看起來像正方形，則必須將圖像的寬度和高度固定為相同的值。 然后將“模式”設置為AspectFit，以使圖像看起來不會拉伸。 固定標簽的寬度，例如“帖子”。 這樣他們將顯示整個文本。

Answer 3

如下所示，您需要設置包含圖像的stackView的寬度。