我從設定驚訝你得到任何效果堆棧視圖的borderColor
和borderWidth
。 UIStackView
是記錄爲「a nonrendering subclass of UIView
; that is, it does not provide any user interface of its own.」事實上它使用CATransformLayer
作爲其層和CATransformLayer
文檔說「The CALayer
properties that are rendered by a layer are ignored, including: backgroundColor
, contents
, border style properties, stroke style properties, etc.」。迫使其佈置子視圖
無論如何,因爲其alignment
是.fill
,堆疊視圖中創建所需優先級的約束是相同的寬度本身。以下是這些限制:
<NSLayoutConstraint:0x60800008c210 'UISV-alignment' UILabel:0x7f821e4023d0'Text 1'.leading == UILabel:0x7f821e608ef0'Text 2'.leading (active)>
<NSLayoutConstraint:0x60800008c2b0 'UISV-alignment' UILabel:0x7f821e4023d0'Text 1'.trailing == UILabel:0x7f821e608ef0'Text 2'.trailing (active)>
<NSLayoutConstraint:0x60800008c080 'UISV-canvas-connection' UIStackView:0x7f821e40b790.leading == UILabel:0x7f821e4023d0'Text 1'.leading (active)>
<NSLayoutConstraint:0x60800008c1c0 'UISV-canvas-connection' H:[UILabel:0x7f821e4023d0'Text 1']-(0)-| (active, names: '|':UIStackView:0x7f821e40b790)>
每個子視圖設置標籤本身具有約束自己的寬度設置爲它的內在寬度。但是,此約束默認情況下爲而不是必需優先級。以下是這些限制:
<NSContentSizeLayoutConstraint:0x6080000b7a00 UILabel:0x7fe385601720'Text 1'.width == 44.5 Hug:250 CompressionResistance:750 (active)>
<NSContentSizeLayoutConstraint:0x6180000abac0 UILabel:0x7fb809d0d810'Text 2'.width == 47 Hug:250 CompressionResistance:750 (active)>
這個約束有兩個優先事項(「擁抱」和「CompressionResistance」)。兩者都低於要求的優先級。 (所需的優先權是1000)
在沒有其他更高優先級的約束,這些約束將使堆棧視圖正好足夠寬,以適應其最寬佈置子視圖。
您省略了關鍵的一步是,你沒有設置stackView.translatesAutoresizingMaskIntoConstraints = false
。因爲您沒有將其設置爲false,所以堆棧視圖具有必需優先級約束,將其位置和大小設置爲其現有的frame
。您可以設置其現有frame.size.width
到「文本1」的標籤的固有寬度,但比「文本2」標籤的固有寬度窄。所以堆棧視圖給自己一個必需優先的寬度約束,反過來也控制了「文本2」標籤的寬度,迫使其寬度比其內在寬度窄,所以它剪切文本。下面是一個約束:
<NSLayoutConstraint:0x60800009a6d0 'UIView-Encapsulated-Layout-Width' UIStackView:0x7fb125c059d0.width == 44.5 (active)>
通過關閉translatesAutoresizingMaskIntoConstraints
,你告訴堆棧視圖不創建約束匹配現有的框架。如果您使用約束來設置堆棧視圖的位置,但不是其大小,其他約束(如前所述)將能夠將其大小設置爲適合其排列的子視圖。
因此,這裏是我怎麼會寫操場:
import UIKit
import PlaygroundSupport
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
PlaygroundPage.current.liveView = view
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
for i in 1 ... 2 {
let label = UILabel()
label.text = "Text \(i)"
label.textColor = .white
stackView.addArrangedSubview(label)
}
view.addSubview(stackView)
view.leadingAnchor.constraint(equalTo: stackView.leadingAnchor).isActive = true
view.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true
勾勒出堆棧視圖,我們可以添加另一種觀點認爲:
let stackOutlineView = UIView()
stackOutlineView.translatesAutoresizingMaskIntoConstraints = false
stackOutlineView.backgroundColor = .clear
stackOutlineView.layer.borderWidth = 1
stackOutlineView.layer.borderColor = UIColor.black.cgColor
view.addSubview(stackOutlineView)
stackView.leadingAnchor.constraint(equalTo: stackOutlineView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: stackOutlineView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: stackOutlineView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: stackOutlineView.bottomAnchor).isActive = true
這裏的結果:
![playground result](https://i.stack.imgur.com/uGQ4m.png)
令人驚歎的解釋。 – juniorgarcia