如何在Xcode的Interface Builder中使用約束/自動布局來正確縮放圖像和字體？

Question

我正在嘗試在Xcode的Interface Builder中創建用戶界面，例如：

1. 它根據設備寬度變化來縮放視圖（方面縮放）
2. 圖像按寬高比縮放（沒有拉伸或壓縮的圖像）
3. 字體線性縮放
4. 如果某事物在一個設計中水平居中，則應在所有設計中居中

我認為簡單的目標……我以前已經使用自定義代碼以編程方式完成了所有這些工作，但是我寧願以“正確的方式”做到這一點，並在Interface Builder中正確設計它，並讓它為我處理所有布局。

假設我在Interface Builder中為這樣的小型iPhone設計了一個屏幕：

現在說一下這種外觀，我對iPhone 4s設備感到滿意，並且只想按比例將所有內容按比例放大，以適應更新，更大的iPhone尺寸。

如果我要使用較舊的“彈簧和支柱”方法，那么這幾乎可以在更大的外形尺寸下滿足我的要求……除了所有內容都沿高度方向拉伸（不只是基於原始設計的寬高比）。 ）您會特別注意到“徽標圖像”拉伸得太高。 而且字體也不會在標簽或按鈕上按比例放大。

我還嘗試過使用“約束”，特別是僅按比例處理圖像縮放問題，並基於容器的縱橫比進行處理，而沒有任何運氣。

在這里，我將彈簧和支柱重置為其默認值，並為原始設計的徽標圖像添加了約束：

從更大的尺寸來看，實際上沒有任何變化：

（是的，盡管報告了布局錯誤，但是以任何方式“修復”它們都不會對圖像的縮放/缺乏縮放產生實際影響。）

因此，只需重申一下-如何使用Xcode / Interface Builder約束執行以下操作？

1. 它根據設備寬度變化來縮放視圖（方面縮放）
2. 圖像按寬高比縮放（沒有拉伸或壓縮的圖像）
3. 字體線性縮放
4. 如果某事物在一個設計中水平居中，則應在所有設計中居中

提前致謝。

Answer 1

1. 它根據設備寬度變化來縮放視圖（方面縮放）
2. 圖像按寬高比縮放（沒有拉伸或壓縮的圖像）

您可以使用寬高比設置寬度和高度。

我為Superview添加了一個乘數方面

3. 字體線性縮放

我已經設置了這樣的標簽。

從屬性檢查器，我這樣設置：

4. 如果某事物在一個設計中水平居中，則應在所有設計中居中

所有視圖均居中對齊。