iOS界面生成器自动约束问题答案

【问题标题】：iOS interface builder auto constraints problemiOS界面生成器自动约束问题
【发布时间】：2020-03-21 04:43:12
【问题描述】：

我目前正在尝试学习 iOS 开发，但是我被困在界面构建器中。我正在尝试做的实际上是非常基本的观点。不幸的是，我对“小于或等于”关系感到很困惑。我认为如果将约束设置为小于或等于，则意味着当有足够的空间时它将具有恒定的最大大小，否则它将更小。事实证明，无论如何，它总是具有最大的尺寸，这不是我想要实现的。

在 iPhone 11 上的界面是这样的：

在 iPhone 8 上的界面是这样的：

当然，我现在还没有关于自动约束的所有必要知识，但也许有人知道在这种情况下问题出在哪里？另外，我会感谢任何关于界面构建器或一些好习惯的好教程。

谢谢彼得

【问题讨论】：

“我认为如果一个约束设置为小于或等于，这将意味着当有足够的空间时它的最大尺寸会设置为常数，否则它会更小。 ” 要实现这一点，您需要两个约束：不等式和较低优先级的“小”约束，以便在等式部分无法满足时为不等式提供目标。
但是，这很难提供帮助，因为您实际上并没有告诉我们您希望实现什么布局。
嗨，matt，我正在尝试实现在每个设备上看起来与第一个屏幕截图（iPhone 11）上呈现的外观非常相似的布局。
但这意味着什么？不同的电话可能更短。那么究竟应该发生什么呢？如果你不能用语言告诉我，你怎么能在约束中告诉自动布局引擎？
嗨，确实，不同的手机可能更短。所以我想要的是，如果设备的屏幕更小，则使堆栈视图之间的间隙更小。我要求一点理解，我刚刚开始用ios冒险。

标签： ios swift xcode interface-builder swift4

【解决方案1】：

所以，这似乎是你所追求的那种东西。这是6s：

这是在 iPhone 11 上：

这是，很好的衡量，在 iPhone 6s 旋转：

如您所见，有四个“组”——两个标签、标签和文本字段、第二个标签和文本字段以及按钮。它们在两个屏幕上从上到下均匀分布。

这是正确的想法，不是吗？

那是怎么做到的呢？简单的。一个垂直的stack view 填满屏幕，分布设置为 Equal Spacing。在其中，一个 UIView 包含每个组（除了单独的按钮），每个 UIView 都通过自己的高度约束给定一个固定的高度。它还有更多内容，但这是问题的核心。当然，一旦你有了它，你可以根据需要进一步调整。

绝对没有代码；整个过程在 Xcode 的 nib 编辑器（“界面构建器”）中很快就完成了配置。

【讨论】：

【解决方案2】：

听起来您正在尝试根据设备的大小在输入之间创建间距？我不知道它是否会像您期望的那样，但我以前在不同的情况下必须这样做。你可以使用类似NSLayoutConstraint 子类的东西来适应你想要的东西。本质上，根据约束是垂直的还是水平的，这个类将在运行时计算屏幕大小，并根据你给它的百分比值修改约束大小。

/// Layout constraint to calculate size based on multiplier.
class PercentLayoutConstraint: NSLayoutConstraint {

    @IBInspectable var marginPercent: CGFloat = 0

    var screenSize: (width: CGFloat, height: CGFloat) {
        return (UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height)
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        guard marginPercent > 0 else { return }
        NSNotificationCenter.defaultCenter().addObserver(self,
            selector: #selector(layoutDidChange),
            name: UIDeviceOrientationDidChangeNotification,
            object: nil)
    }

    /**
     Re-calculate constant based on orientation and percentage.
     */
    func layoutDidChange() {
        guard marginPercent > 0 else { return }

        switch firstAttribute {
        case .Top, .TopMargin, .Bottom, .BottomMargin:
            constant = screenSize.height * marginPercent
        case .Leading, .LeadingMargin, .Trailing, .TrailingMargin:
            constant = screenSize.width * marginPercent
        default: break
        }
    }

    deinit {
        guard marginPercent > 0 else { return }
        NSNotificationCenter.defaultCenter().removeObserver(self)
    }
}

来源：https://basememara.com/percentage-based-margin-using-autolayout-storyboard/

【讨论】：