UILabel 內在大小

我們必須建立一個檢視,該檢視將具有文字的影象字首。text 可以是可變長度的。我們必須實現一個結果,其中 Image + text 始終位於父檢視的中心。

StackOverflow 文件

步驟 1: 首先建立一個單獨的檢視專案並將其命名為你選擇的內容並開啟故事板拳頭檢視。拖動具有合理大小的檢視並將其背景顏色設定為黃色。我已將我的檢視控制器調整為 3.5“。view 應該看起來像這樣的東西

StackOverflow 文件

第 2 步: 現在我們將向黃色檢視新增約束。首先,我們將新增寬度和高度約束(等一下我們不是說檢視將具有動態寬度?好的我們稍後會再回到它)新增根據下圖中的下列約束不要打擾寬度值任何值都可以很好地保持寬度,只需保持足夠大,以便我們可以正確新增自動佈局。

StackOverflow 文件

新增這兩個約束後,你將看到 XCode 正在為你提供錯誤,如下圖所示,讓我們看到它們並理解它們。 StackOverflow 文件

我們有兩個錯誤(紅色表示錯誤)如上所述,我們可以重新審視歧義部分

缺少約束: 需要約束:X 位置: - 如上所述,我們給出了檢視的寬度和高度,因此定義了它的 BOUNDS,但我們沒有給出它的原點,因此沒有定義它的 FRAME。Autolayout 無法確定黃色檢視的 X 位置

缺少約束: 需要約束:Y 位置: - 如上所述,我們給檢視一個寬度和一個高度,因此它的 BOUNDS 被定義但我們沒有給它的原點,所以它的 FRAME 沒有被定義。Autolayout 無法確定我們的黃色檢視的 Y 位置要解決這個問題,我們必須給 autolayout 一些東西來解析 X 和 Y.由於我們無法設定幀,我們將自動佈局方式。按照以下約束新增下面給出的圖片我將在稍後解釋

StackOverflow 文件

我們所做的是,我們新增了一個垂直中心水平中心,這些約束告訴 autolayout 我們的黃色檢視將始終位於水平中心:因此確定的 X 與垂直約束相同,並確定 Y.(你可能要調整框架)。

第 3 步: 到目前為止,我們的基本黃色檢視已準備好。我們將字首影象作為黃色檢視的子檢視新增以下約束。你可以選擇任何你選擇的影象。

StackOverflow 文件

由於我們的字首影象具有固定的尺寸,因此我們將為此 imageview 設定固定的寬度。新增約束並繼續下一步。

步驟 4: 新增 UILabel 作為黃色檢視的子檢視,並新增以下約束

StackOverflow 文件

正如你所看到的,我只對 UILabel 給出了相對的約束。它從字首影象中得到 8 個點,從頂部拖尾看到 0,0,0,從黃色檢視得到底部。因為我們希望寬度是動態的,所以我們不會給出寬度或高度限制。

問:為什麼我們現在沒有出現任何錯誤,我們沒有給出任何寬度和高度?Ans: - 我們只有在自動佈局無法解決任何必須在螢幕上渲染檢視的事情時才會收到錯誤或警告。它是高度寬度或原點。因為我們的標籤是相對於黃色檢視和字首影象及其框架定義良好的 autolayout 能夠計算我們的 Label 的框架。

第 5 步: 現在如果我們回想一下,我們會意識到我們已經給出了黃色檢視的固定檢視,但我們希望它是動態依賴於我們標籤的文字。所以我們將修改黃色檢視的寬度約束。黃色檢視的寬度有必要解決歧義,但我們希望它在執行時基於 UILabel 的內容被否決。因此,我們將選擇黃色檢視並轉到大小檢查器,並將寬度約束的優先順序降低為 1,以使其超出規則。請按照下面給出的影象。

StackOverflow 文件

第 6 步: 我們希望 UILabel 根據文字進行擴充套件並推動我們的黃色檢視。因此我們降低了黃色檢視寬度的優先順序。現在我們將增加 UILabel 的文字壓縮阻力的優先順序。我們希望我們的檢視減少為那麼我們將增加 UILabel 的內容擁抱的優先順序。請按下圖所示

StackOverflow 文件

正如你所看到的,我們將內容優先順序增加到 500 並將壓縮阻抗優先順序提高到 751,這將成功地超過寬度約束的 1 優先順序。

現在構建並執行,你將看到以下內容。

StackOverflow 文件