如何使用AutoLayout製作均勻間隔的圖像行？

Question

我剛剛開始在Swift中開發這款紙牌遊戲，並試圖弄清楚如何在屏幕頂部水平放置一排6張卡。

我試圖把6個imageViews堆棧中的，但我的手動約束最終導致最後的圖像伸展到邊緣：

有人能告訴我如何設置imageViews的行，以便他們每個人都有一個固定的寬度，他們都居中？我對AutoLayout有點新鮮，所以截圖會有所幫助。

Answer 1

我建議使用UIStackView。看看下面的雷Wenderlich教程：

https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views

然而，在移動到諸如上述堆棧視圖更復雜的前視圖;你應該學會使用自動佈局來避免犯下任何愚蠢的錯誤。

下面是來自同一網站的另一個偉大的教程：

https://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2

編輯：

改進答案：

UIStackView允許您安排輕鬆的元素，在一排或一列。這爲您節省了大量時間，並且使您的故事板看起來更乾淨，因爲需要的約束更少。

UIStackView對developer.apple.com的描述：

的UIStackView類提供了在任何一個列或行的佈局的視圖的集合簡化的界面。堆棧視圖使您可以利用自動佈局的強大功能，創建可動態適應設備方向，屏幕大小和可用空間更改的用戶界面。堆棧視圖管理其排列的子視圖屬性中所有視圖的佈局。這些視圖是根據它們在orderedSubviews數組中的順序沿着堆棧視圖的軸排列的。確切的佈局取決於堆棧視圖的軸，分佈，對齊，間距和其他屬性。

UIStackViews功能不會停在簡化的視圖對齊上。的確，你也可以改變定義堆棧視圖的屬性。

axis屬性確定堆棧的方向，垂直或水平方向爲 。

分佈屬性決定沿堆棧軸佈置的視圖 的佈局。

alignment屬性決定垂直於堆棧軸的排列視圖 的佈局。

間距屬性決定排列的 視圖之間的最小間距。

baselineRelativeArrangement屬性確定是否從基線測量視圖之間的垂直間距 。

layoutMarginsRelativeArrangement屬性確定 堆棧視圖是否將其排列視圖相對於其佈局邊距進行佈局。

儘管上面提到的優點，UIStackView有限制。

UIStackView是UIView的nonrendering子類;也就是 不提供任何自己的用戶界面。相反，它只管理其排列視圖的位置和大小。結果，一些 屬性（如backgroundColor）對堆棧視圖沒有影響。 同樣，您不能覆蓋layerClass，drawRect：或 drawLayer：inContext :.

請注意，UIStackView無法滾動。如果你需要它滾動，在UIScrollView中嵌入一個堆棧視圖。

希望這會有所幫助！

Answer 2

我推薦純編碼，你會學到更多。

如果您指定所有卡片的寬度和高度相同，它將確保最後一張卡片不會被拉伸。

這是怎麼了，我經常建立我的UI：

import UIKit 

class ViewController: UIViewController { 

    var container:UIView = UIView(); 
    var card1:UIView! = nil; 
    var card2:UIView! = nil; 
    var card3:UIView! = nil; 
    var card4:UIView! = nil; 
    var card5:UIView! = nil; 
    var card6:UIView! = nil; 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     self.initViews(); 
     self.initConstraints(); 
    } 

    func cardView() -> UIView 
    { 
     let card = UIView(); 
     card.backgroundColor = UIColor.orangeColor(); 
     return card; 
    } 

    func initViews() 
    { 
     self.card1 = self.cardView(); 
     self.card2 = self.cardView(); 
     self.card3 = self.cardView(); 
     self.card4 = self.cardView(); 
     self.card5 = self.cardView(); 
     self.card6 = self.cardView(); 

     self.container.addSubview(self.card1); 
     self.container.addSubview(self.card2); 
     self.container.addSubview(self.card3); 
     self.container.addSubview(self.card4); 
     self.container.addSubview(self.card5); 
     self.container.addSubview(self.card6); 

     self.view.addSubview(self.container); 
    } 

    func initConstraints() 
    { 
     self.container.translatesAutoresizingMaskIntoConstraints = false; 
     self.card1.translatesAutoresizingMaskIntoConstraints = false; 
     self.card2.translatesAutoresizingMaskIntoConstraints = false; 
     self.card3.translatesAutoresizingMaskIntoConstraints = false; 
     self.card4.translatesAutoresizingMaskIntoConstraints = false; 
     self.card5.translatesAutoresizingMaskIntoConstraints = false; 
     self.card6.translatesAutoresizingMaskIntoConstraints = false; 

     var views = [String: AnyObject](); 
     views["container"] = self.container; 
     views["card1"] = self.card1; 
     views["card2"] = self.card2; 
     views["card3"] = self.card3; 
     views["card4"] = self.card4; 
     views["card5"] = self.card5; 
     views["card6"] = self.card6; 

     self.view.addConstraint(NSLayoutConstraint(item: self.container, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0)); 

     self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-50-[container]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 

     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[card1(60)]-10-[card2(==card1)]-10-[card3(==card1)]-10-[card4(==card1)]-10-[card5(==card1)]-10-[card6(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 

     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card1(100)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card2(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card3(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card4(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card5(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
     self.container.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[card6(==card1)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); 
    } 
} 

你有這樣的事情結束了：