Autolayout設置六個方形圖像

Question

我想實現自動佈局以設置六個方形圖像，即使屏幕尺寸發生變化，它們也總是處於正方形。 我嘗試了太多的變化，但沒有這樣做。 在附加的圖像我分享示例視圖，自動佈局將被應用。

Answer 1

好的，我會給你一個簡單的方法來實現這個，但這是我的實現，我很確定有很多實現更容易。

首先，創建一個空的子視圖，並添加約束這樣的觀點總是會在左上角方形：

Trailing Space to superview >= 0 
Trailing Space to superview = 0 @750 
Top Space to superview = 0 
Left Space to superview = 0 
Bottom Space to superview = 0 @750 
Bottom Space to superview >= 0 
Aspect ratio : 1 

現在，在這個廣場新增的廣場上左上角和topRightView：

// TopLeftView constraints : 
Leading Space to superview = 20 
Top Space to superview = 20 
Aspect ratio : 1 

// TopRightView constraints : 
Trailing Space to superview = 20 

// Contraints between TopRightView and TopLeftView 
Align bottom 
Align top 
Equal Width 
Horizontal spacing = 20 

您現在可以通過設置「等寬」約束的乘數值來設置平方之間的比率。我們使用1/3乘數。

現在讓我們來添加bottomLeftView。爲了不過度限制我們的視圖，我們不需要在平方高度和視圖高度之間設置乘數。我們知道綠色正方形右側的空間等於它下面的空間，所以我們只使用間距和對齊約束。

// BottomRight constraints: 
Bottom Space to superview = 20 

// Contraints between BottomLeftView and TopLeftView 
Align left 
Align right 
Vertical spacing = 20 

最後以補充的是BottomRightView，並且將對齊約束效果很好：

// Contraints between BottomRightView and BottomLeftView 
Align top 
Align bottom 

// Contraints between BottomRightView and TopRightView 
Align left 
Align right 

我們在這裏。現在，您只需在TopRightView的頂部和底部以及BottomLeftView的左側和右側添加平方子視圖。您也可以使用單個變量來更改比率，如果您在TopLeftView和BottomLeftView之間設置了比率約束，則這是不可能的。

Answer 2

你不需要任何視圖包裝或其他有趣的業務，你可以純粹在每個項目之間的IB或AL限制內完成。 '技巧'是考慮每個項目之間的關係，並使用常量和乘數。

• 這裏的每個正方形是1：1的比例。
• 橙色方塊與第一個黃色方塊的比例爲2：1，加上填充的8。
• 橙色方形固定在左側，第一個黃色方形固定在右側。
• 所有其他黃色正方形與第一個相對寬。

這裏的故事板文件太：

https://www.dropbox.com/s/pk8iwj1beamkxtp/SO_Solution-20151215_2.storyboard?dl=0

基於一個評論，我加了一個包裝視圖，可以很容易，如果你想整個事情永遠是適用的大小班可見。 （也可以更容易地放入另一個故事板）。