如何使用AutoLayout縮放視圖相對於屏幕大小的視圖高度和位置

Question

使用Autolayout保持視圖的相對位置和縮放到每個屏幕大小的最佳方法是什麼？例如，4和iPad Pro之間存在巨大差異。我應該使用什麼類型的約束和思維過程？

被縮放的視圖可能每個都有不同的高度並佔用不同的屏幕比例。我知道有很多方法可以解決這個問題，但最好的方法是什麼。

答案可以附上照片，以便我可以清楚地瞭解過程嗎？

感謝ü非常，

Answer 1

這是深度問題上漂亮，但規模着眼於母公司的大小和下來，你需要使用

平等寬度約束

平等身高限制

長寬比限制

我經常使用這些。這裏是一個簡單的例子

假設我們想把屏幕分成3個視圖。所有與主控制器視圖相等的寬度，我們希望頂部佔用40％，第二個視圖佔用30％，底部佔用20％。我們可以對超視圖使用相同的高度約束，並編輯和調整乘數0.2 = 20％。

要設置從視圖拖到故事板的父視圖中的等高約束，並放開（您也可以在包含左Ex.Picture的視圖層次結構中執行此操作）。

你會看到該菜單。

選擇相等的高度並重復相同的寬度。在這個例子中，寬度很好，因爲我希望它是主視圖的寬度，但我們需要改變高度上的乘數，或者每個視圖將是主視圖的高度。

在大小檢查器中找到約束，並找到說明與超視圖等高的約束（下圖）。雙擊或單擊編輯並調出上圖中的菜單。在這種情況下，我將乘數設置爲0.3，這是母公司的30％。現在繼續爲所有視圖設置您所需的百分比。的控件拖動到父下面

其他例子：我寄託了我所有的together.Meaning頂部和底部約束

是視圖之間0。我希望瞭解這些類型的限制，這不是一個問題。

示例圖釘的菜單。您可以更改這些爲0或任何和快速添加頂部，底部，開頭和結尾的所有查看

您還可以使用中心的水平和垂直方向，你可以使用一個乘法器相對位置保持到父視圖，以及。

現在就爲這些視圖添加子視圖並使它們按比例縮放。該過程以相同的方式工作。看到我最後的3個大視圖，並且我添加了一個較小的視圖到我剛添加的頂視圖，佔據了我們大部分的屏幕。我希望這個新視圖能像設計中的虛擬形象一樣。

我把它放在頂部視圖內，我控制在小視圖內拖動而不留下它來獲得一個選項來添加縱橫比（注意我在尺寸檢查器中設置了寬度和高度等於90x90之前）。

放過你，你會看到該菜單。這個約束意味着視圖將永遠是方形的。它只需要知道它的寬度或高度，並將解決其他問題。注意：確保視圖是控制在故事板中拖動之前所需的比例。見下圖。

現在我添加的說10頂約束和15保持以銷菜單此化身小視圖的視圖左側。 Autolayout仍然瘋狂，但我所要做的只是添加寬度或高度，因爲寬高比約束將解決我們不提供的那個。我控制從小視圖拖到它的父視圖（小視圖之外的任何位置）。我選擇平等的高度。我把它放在右邊的尺寸檢查器中，將乘數從1改爲0.4。現在Autolayout再次高興，因爲小視圖知道它應該是多麼寬和多高，因爲我們給它一個相等的高度限制，它知道應該保持平方，它解決了它的寬度。

邊注： 如果我不想使用固定的頂部，底部，尾部，領先，您可以調整垂直和水平對齊的乘法器，使其與相同的寬度相同並保持相對位置。

我更新了視圖，我可以繼續添加視圖。這是預覽中的結果。