在具有復雜視圖的Interface Builder中使用自動布局

Question

所以，這是一個棘手的問題。 我正在開發應該與iPhone 4s，5 / 5s / 5c和6/6 Plus兼容的僅肖像應用程序。 不幸的是，為了使用戶界面與之前列出的設備完全兼容，我在使用自動版式時遇到了一些麻煩。

這是UI外觀的屏幕截圖（這是來自我用作其他屏幕尺寸參考的iPhone 6 Plus）：

我有一個338x338點的藍色圓圈，一個180x180的紅色圓圈，一個118x118的綠色圓圈，一個84x84的紫色圓圈，最后還有一個高50點的橫幅。 我想要實現的結果是擁有一個尊重這些視圖大小的iPhone 6 Plus UI，並為所有其他視圖縮小比例的UI。 除此之外，我將讓用戶付費刪除底部的廣告橫幅，因此我也需要相應地調整用戶界面的大小（設置橫幅的垂直間距和將其高度設置為0？）。 我搞砸了Interface Builder，得出了不錯的結果-不夠精確。 看看iPhone 4s屏幕上的UI：

看起來不錯，但存在主要問題。 在Interface Builder中，我正在使用Freeform ViewController，其寬度與iPhone 6 Plus相同（414點），在該寬度上我添加了所有這些圓形視圖以及先前列出的框架尺寸。 舉個例子，讓我們暫時忽略所有其他約束以集中於長寬比約束：在338x338 blueCircle上，我添加了長寬比約束，與在180x180 redCircle上相同。 然后，我將控件從redCircle拖動到blueCircle，然后再次單擊縱橫比，以使其相應地調整為blueCircle。 正如我所說的那樣，結果並不精確，因為如果我打印了redCircle的框架，控制台將說其寬度等於175.666666666667點（而不是180點）。

這是項目，因此您可以自己檢查一下。 我相信它的價值超過一千個字。 我不太擅長自動版面設計，而且我確定會創建太多無用的約束。 我該怎么做才能改善布局？

Answer 1

您需要將所有圓視圖的高度和寬度設置為其父視圖的比例。 我將藍色視圖的高度設置為與其父視圖成比例的0.5，並且其寬度與寬高比為1：1，所有其他視圖的重復率相同，並在視圖之間應用所需的垂直間距和水平間距

這就是在iPhone 4上的樣子

這就是在iPhone 6 Plus上的外觀