2016-10-17 87 views
0

我知道這可能不是最好的問題,但我真的需要一個起點:自動佈局表視圖單元複合視圖

如果我想創建一個佈局下一個(使用自動配置) :

enter image description here

我想什麼:

  • 把三個零水平堆疊視圖
  • 然後在水平堆棧視圖中放置三個標籤(帖子,關注者,以下)。
  • 然後將上述兩個水平堆棧視圖放到垂直堆棧視圖中。
  • 然後,我將這個灰色按鈕添加到上面創建的垂直堆棧視圖中(posts,followers,following)標籤下方。所以最後我有一個垂直堆棧視圖,它由兩個水平堆棧視圖和灰色按鈕組成。
  • 最後,我在上面的步驟中創建的垂直堆棧視圖的左側添加了圖像,該視圖創建了最終的水平堆棧視圖。這一步完全破壞了我的佈局。使圖像像500寬度,使堆棧視圖離開屏幕。所以我在包含圖像,灰色按鈕和兩個水平堆棧視圖的最後一個水平堆棧上設置佈局約束至Bottom Space: 140, Top space 10, Leading Space 20, Trailing space 20。 (我沒有碰到這個最終堆棧視圖中的堆棧視圖,我只在這個步驟中創建的主要水平堆棧視圖中放置了佈局)。

4bar建議後:

enter image description here

請注意,我沒有碰過的第一個名字,facebook.com,或在底部的生物標籤。

回答

1

如果你還沒有爲您的最外層的水平疊層視圖的分配方式,則默認爲UIStackViewDistributionFill,在這種情況下,安排子視圖將延伸根據自己的擁抱優先加滿整個寬度。增加圖像視圖上的內容擁抱優先級(比如說251),以防止它拉伸。此外,如果圖像尺寸大於您想要投入的空間,則可能還需要在圖像上設置其他寬度或高度約束以覆蓋其固有尺寸。

要理解的主要事情是UIStackView的大小是由其排列的子視圖的內在大小和間距驅動的。在填充模式下,如果有太多可用空間,則使用內容擁抱優先級來確定要拉伸哪個視圖;如果可用空間太少,則使用抗壓優先級來確定要壓縮哪個視圖。

+0

好的,所以我改變了分配模式以平等填充。現在看起來好多了。我已經更新了它在我上面的帖子中的外觀。現在繼續圖像。我是否可以限制圖像視圖的寬度和高度,並使模式方面適合。它似乎就像我上面的帖子中顯示的那樣工作。 – CapturedTree

+0

由於某些原因,即使posts標籤在主Storyboard中顯示爲「p ...」,出於某種原因,當我運行實際應用程序時,它顯示爲「posts」。你知道這個的原因嗎?那是因爲壓縮阻力是在我運行應用時計算出來的,它會根據我在主要情節串聯板中的約束期間設置的壓縮阻力優先級來檢查壓縮阻力嗎? – CapturedTree

+1

爲了給右側垂直堆棧留出最大的空間量,您可能需要填充而不是FillEqually;然後調整相關內容擁抱優先級,以便右側視圖延伸,而左側視圖不延伸。然後,您可以,也可以在圖像視圖上設置寬度,高度和/或寬高比限制。 – 4bar

0

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

enter image description here

1

如果您希望圖像看起來像一個正方形,則必須將圖像的寬度和高度固定爲相同的值。然後將模式設置爲AspectFit,以便圖像看起來不會拉長。 固定標籤的寬度,如'帖子'。以便他們能夠顯示整個文本。