Question

我刚开始在Swift开始制作这款纸牌游戏，我试图找出如何在屏幕顶部水平放置一排6张卡片。

我已尝试将6个imageView放入堆栈中，但我的手动约束最终导致最后一个图像延伸到边缘：

有人可以告诉我如何设置一行imageViews，以便每个都有一个固定的宽度，它们都居中？我对AutoLayout不熟悉，所以截图会有所帮助。

Answer 1

我建议使用UIStackView。看看以下Ray 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允许您轻松地，连续地或在列中排列元素。这节省了大量时间，使得故事板看起来更清晰，因为需要更少的约束。

developer.apple.com上的UIStackView：

UIStackView类提供了一个简化的界面，用于在列或行中布局视图集合。通过堆栈视图，您可以利用自动布局的强大功能，创建可以动态适应设备方向，屏幕大小和可用空间任何变化的用户界面。堆栈视图管理其arrangeSubviews属性中所有视图的布局。这些视图沿着堆栈视图的轴排列，基于它们在arrangeSubviews数组中的顺序。确切的布局取决于堆栈视图的轴，分布，对齐，间距和其他属性。

UIStackViews功能并没有停留在简化的视图对齐中。实际上，您还可以更改定义堆栈视图的属性。

axis属性确定堆栈的方向   垂直或水平。

分布属性确定排列视图的布局   沿着堆栈轴。

alignment属性确定排列视图的布局   垂直于堆栈的轴。

间距属性决定了排列之间的最小间距   视图。

baselineRelativeArrangement属性确定是否   视图之间的垂直间距是从基线开始测量的。

layoutMarginsRelativeArrangement属性确定是否   堆栈视图列出了相对于其布局边距的排列视图。

尽管有上述优点，但UIStackView仍有限制。

UIStackView是UIView的非渲染子类;就是这样不提供自己的任何用户界面。相反，它只是管理其排列的视图的位置和大小。结果，一些属性（如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));
    }
}

你最终得到这样的东西：

如何使用AutoLayout制作均匀间隔的图像行？

2 个答案: