自動布局：將兩個視圖的中心居中到超級視圖的中心

Question

我想使用UIImageView和UILabel創建自定義UIView 。 UIImageView應該自動調整為圖像大小， UILabel應該自動調整為垂直於文本內容。

您能幫我建立約束嗎？ 我需要以動態視圖為中心： UIIamgeView和UILabel應該位於自定義視圖的中心。

Answer 1

圖像視圖將自動根據其內容調整大小。 但是，如果其他約束以更高的優先級推或拉它，它將變得更大或更小。 因此，將其內容擁抱和抗壓縮優先級設置為高。

標簽通常傾向於是一行，並擴展其寬度以將其所有內容固定在該行上。 您可以設置其preferredMaxLayoutWidth使其趨向於以指定的寬度環繞到多行。 同樣，您應該將內容擁抱和抗壓縮優先級設置為高。

尚不清楚是要讓容器自己調整大小以適合內容，還是要讓內容位於中心，並且與容器邊緣的距離可能有變化。 還不清楚您是否要在標簽上方，下方，引導或拖曳圖像。

使容器本身適合內容的大小相對簡單。 我猜您想知道如何在較大的視圖中居中放置圖像和標簽。 我將圖像和標簽嵌入到緊密包含它們的視圖中。 然后，您可以設置約束以使該內部容器視圖在外部容器中居中。

---

因此，假設有一個containerView ， imageView和label 。 我建議添加一個innerContainerView用於將圖像和標簽一起垂直放置在containerView 。 約束看起來像：

V:|[imageView]-[label]|
|-(>=0)-[imageView]-(>=0)-|
|-(>=0)-[label]-(>=0)-|
[innerContainerView(==0@50)|
[NSLayoutConstraint constraintWithItem:innerContainerView
                             attribute:NSLayoutAttributeCenterY
                             relatedBy:NSLayoutRelationEqual
                                toItem:containerView
                             attribute:NSLayoutAttributeCenterY
                            multiplier:1
                              constant:0]
V:|-(>=0)-innerContainerView-(>=0)-|

因此：內部容器視圖在垂直方向上擁抱圖像和標簽，它們之間的距離為標准距離。 內部容器至少與圖像視圖和標簽一樣寬。 但是，它嘗試（低優先級）盡可能地小。 這使得它在水平方向上擁抱圖像視圖和標簽的寬度。 然后，將內部容器在外部容器內垂直居中。 外容器必須至少與內容器一樣高（或者相反，如果不能，則將迫使內容器變短，這將迫使圖像視圖或標簽變短；這將被阻止）通過壓縮抗性；解決歧義，將其抗性設置為不同的優先級）。

我為最后一個約束使用了0，但是您可能想要使用其他值。

您可能也想在水平方向上重復最后兩個約束，盡管您可能希望在此處有所不同。 我主要是在解決您關於垂直居中的目標。

我用偽代碼表達了這些約束，但是您應該能夠使用IB設置它們。

Answer 2

我通常通過使用某種containerView實現此目的。

通過這樣做，我可以將containerView放在self.view（或您想居中的任何位置）的中心，然后將其中的內容（imageView和標簽）限制在其中。

這是我快速制作的工作代碼示例。

//create a container view to hold the centered content
UIView *containerView = [UIView autoLayoutView];


//create our content
UIImageView *imageView = [UIImageView autoLayoutView];
UILabel *label = [UILabel autoLayoutView];

//configure the imageView and label
//...
//Note: The imageView and label should be able to satisfy their own width and height.

//add the content to our container
[containerView addSubview:imageView];
[containerView addSubview:label];

//pin the left and right of our content to the container with a flexible constraint
[imageView pinAttribute:NSLayoutAttributeLeft toAttribute:NSLayoutAttributeLeft ofItem:containerView withConstant:0.0 relation:NSLayoutRelationGreaterThanOrEqual];
[label pinAttribute:NSLayoutAttributeLeft toAttribute:NSLayoutAttributeLeft ofItem:containerView withConstant:0.0 relation:NSLayoutRelationGreaterThanOrEqual];
[imageView pinAttribute:NSLayoutAttributeRight toAttribute:NSLayoutAttributeRight ofItem:containerView withConstant:0.0 relation:NSLayoutRelationLessThanOrEqual];
[label pinAttribute:NSLayoutAttributeRight toAttribute:NSLayoutAttributeRight ofItem:containerView withConstant:0.0 relation:NSLayoutRelationLessThanOrEqual];

//also center the content horizontally within the container
[imageView centerInContainerOnAxis:NSLayoutAttributeCenterX];
[label centerInContainerOnAxis:NSLayoutAttributeCenterX];

//pin the content vertically
[imageView pinToSuperviewEdges:JRTViewPinTopEdge inset:0.0];
[imageView pinAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofItem:label withConstant:0.0];
[label pinToSuperviewEdges:JRTViewPinBottomEdge inset:0.0];


//add the container to self.view
[self.view addSubview:containerView];

//center our container view
[containerView centerInContainerOnAxis:NSLayoutAttributeCenterX];
[containerView centerInContainerOnAxis:NSLayoutAttributeCenterY];

為了進行測試，我將圖像視圖限制為100pt x 50pt，並為其賦予了紅色背景，標簽為50pt x 100pt，具有綠色背景，contentView具有藍色背景。 這是我得到的：

為了方便起見，我使用jrturton的UIView-Autolayout類別，但是如果需要，您可以輕松地將上述代碼轉換為使用原始NSLayoutConstraints。

可以在這里找到類別： UIView-Autolayout
文檔可以在這里找到： Cocoadocs