如何在另一個 UIView 的同一中心位置制作標簽的第一行

Question

我想制作這些單詞的第一行（我在這里使用UI Label，還是應該使用Text View？），在紅線的中心，那條紅線的中心位於那個黃色UIView的中心

我嘗試了一些自動布局配置，但仍然無法實現

Answer 1

為了與多行標簽的第一行對齊，您應該使用約束NSLayoutAttributeFirstBaseline （在 iOS8 中可用）或UIView firstBaselineAnchor上的錨點（在 iOS9 中可用）。

Answer 2

我最近通過在與多行標簽完全相同的位置和字體中添加一個隱藏的單行標簽，而沒有底部約束，以一種稍微不那么復雜的方式解決了這個問題。

然后您可以簡單地將圖標圖像.centerY與隱藏標簽的.centerY 。

self.view.addConstraint(
    NSLayoutConstraint(
        item: icon,
        attribute: .centerY,
        relatedBy: .equal,
        toItem: hiddenLabel,
        attribute: .centerY,
        multiplier: 1,
        constant: 0
    )
)

Answer 3

這是一個復雜的過程。 花點時間了解整個邏輯。

首先，我們有一些考慮：

• Yellow視圖具有定義的高度（以及定義的寬度，以便可以確定它的水平中心）
• 標簽有固定的字體大小（這樣第一行的水平中心可以通過約束與黃色視圖的水平中心對齊）

---

我們將在黃色視圖的右側添加一個占位符視圖並使它們居中對齊。 方便的UIStackView來了。

我們使用具有以下屬性的UIStackView ：

• 軸： Horizontal
• 對齊方式： Center
• 分布： Fill
• 間距：根據您的需要

上面的堆棧視圖使用了自動布局：

• 前導、尾隨、頂部：關於超級視圖（視圖控制器的視圖/安全區域）
• 高度：固定高度（這將是黃色視圖的高度）

這些是堆棧視圖的約束：

現在我們將使用屬性向堆棧視圖添加兩個視圖：

• 黃色視圖：
  • 寬度：固定寬度
  • 高度：等於堆棧視圖的高度
  • 但請注意，我使用了寬度和縱橫比約束，以便視圖保持矩形
• 占位符視圖：
  • 高度：0

這些是兩個視圖的約束：

現在是標簽的部分。 這是一個多行標簽（行數設置為0 ）標簽將通過頂部、前導和尾隨約束與占位符視圖對齊。 但是頂部的限制需要稍微考慮一下。 標簽的字體大小為20因此如果頂部約束具有-13 （不是-10因為標簽的框架和標簽的文本之間存在頂部填充）值與占位符，那么它可以與水平中心對齊的黃色視圖。

這些是標簽的約束：

---

聊夠了。 我制作了一個演示，你可以在這里找到。 還要記住，如果您需要控制黃色視圖和標簽之間的水平空間，您可以通過更改堆棧視圖的間距值來實現。

還請記住，此實現的配置非常嚴格。 什么都變了，什么都壞了。 但是，如果您的需要稍微改變，以便標簽的第一行垂直對齊（而不是第一行的水平中心），您可以忘記標簽的字體大小和-13頂部約束的值。

---

下面是最終的輸出。 我添加了一條水平紅線來指示黃色視圖的中間。