31

我最近再次开始使用 Swift 进行 iOS 开发,现在正在研究自定义 UIControl。为了布局和灵活性,这个自定义视图是使用 StackView 构建的。

我想要达到的...

... 基本上是简单地与 StackView 具有相同的功能,我通常将它直接拖到情节提要中时 - 它调整大小以适应没有问题。这与自调整大小的 tableview 单元格基本相同。

展示柜

我可以将我的 CustomView 简化为一个简单的示例:它是一个 StackView,其中包含三个标签,Alignment设置为Center, Distribution Equal Centering。StackView 将固定到左、右和顶部布局指南(或尾随、前导和顶部)。我可以使用从 XIB 加载的 CustomView 轻松地重新创建它,并将其转换为具有相同参数的 CustomView - 我将两者都附加为屏幕截图。

简单 StackView 的截图

自定义视图的屏幕截图

加载 XIB 文件并进行设置。

import UIKit

@IBDesignable
class CustomView: UIView {

    // loaded from NIB
    private weak var view: UIView!

    convenience init() {
        self.init(frame: CGRect())
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.loadNib()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.loadNib()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // we need to adjust the frame of the subview to no longer match the size used
        // in the XIB file BUT the actual frame we got assinged from the superview
        self.view.frame = bounds
    }

    private func loadNib ()  {
        self.view = Bundle (for: type(of: self)).loadNibNamed(
            "CustomView", owner: self, options: nil)! [0] as! UIView
        self.addSubview(self.view)
    }
}

您可以在这里看到的是,我只是加载了 XIB 文件,覆盖布局子视图以使框架适应实际视图,仅此而已。

问题

所以我的问题与通常如何处理有关。我的 StackView 中的标签具有内在的内容大小,即通常 StackView 只是适应标签的高度而不会抱怨 - 如果您在情节提要中设计它。但是,如果您将所有这些都放在 XIB 中并保持布局不变,则不会 - 如果视图以三种方式固定在屏幕截图中(顶部、前导、尾随),则 IB 会抱怨未知高度。

我阅读了 Auto-Layout Guide 并观看了 WWDC 视频“AutoLayout 的奥秘”,但这个话题对我来说还是很新的,我认为我还没有找到正确的方法。所以这是我需要帮助的地方

(1) 我应该设置约束并禁用translatesAutoresizingMaskIntoConstraints吗?

我首先可以并且应该做的是设置 translatesAutoresizingMaskIntoConstraints false这样我不会得到自动生成的约束并定义我自己的约束。所以我可以loadNib变成这样:

private func loadNib ()  {
    self.view = Bundle (for: type(of: self)).loadNibNamed(
        "CustomView", owner: self, options: nil)! [0] as! UIView
    self.view.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(self.view)

    self.addConstraint(NSLayoutConstraint (
        item: self
        , attribute: .bottom
        , relatedBy: .equal
        , toItem: self.view
        , attribute: .bottom
        , multiplier: 1.0
        , constant: 0))

    self.addConstraint(NSLayoutConstraint (
        item: self
        , attribute: .top
        , relatedBy: .equal
        , toItem: self.view
        , attribute: .top
        , multiplier: 1.0
        , constant: 0))

    self.addConstraint(NSLayoutConstraint (
        item: self.view
        , attribute: .leading
        , relatedBy: .equal
        , toItem: self
        , attribute: .leading
        , multiplier: 1.0
        , constant: 0))

    self.addConstraint(NSLayoutConstraint (
        item: self.view
        , attribute: .trailing
        , relatedBy: .equal
        , toItem: self
        , attribute: .trailing
        , multiplier: 1.0
        , constant: 0))
}

基本上,我确实拉伸了视图以适应 Storyboard 中 UIView 的整个宽度,并限制了它的顶部和底部到 StackView 的顶部和底部。

我在使用这个时遇到了很多 XCode 8 崩溃的问题,所以我不太确定该怎么做。

(2) 还是我应该覆盖intrinsicContentSize

我也可以intrinsicContentSize通过检查所有我的高度来简单地覆盖arrangedSubviews并取最高的那个,将我的视图高度设置为它:

override var intrinsicContentSize: CGSize {
    var size = CGSize.zero

    for (_ , aSubView) in (self.view as! UIStackView).arrangedSubviews.enumerated() {
        let subViewHeight = aSubView.intrinsicContentSize.height
        if  subViewHeight > size.height {
            size.height = aSubView.intrinsicContentSize.height
        }
    }

    // add some padding
    size.height += 0
    size.width = UIViewNoIntrinsicMetric
    return size
}

虽然这肯定给了我更大的灵活性,但我还必须使内在内容大小无效,检查动态类型和许多其他我宁愿避免的东西。

(3)我什至以“建议”的方式加载 XIB 吗?

还是有更好的方法,例如使用UINib.instantiate? 我真的找不到最佳实践方法来做到这一点。

(4) 为什么我必须首先这样做?

真的,为什么?我只是将 StackView 移到了 CustomView 中。那么为什么StackView现在就停止自适应了,为什么还要设置上下约束呢?

到目前为止,帮助最大的是https://stackoverflow.com/a/24441368中的关键短语:

“一般来说,自动布局是以自上而下的方式执行的。换句话说,首先执行父视图布局,然后执行任何子视图布局。”

..但我真的不太确定。

(5) 为什么我必须在代码中添加约束?

假设我禁用translatesAutoresizingMaskIntoConstraints了,那么我不能为 IB 中的 tableview 单元格设置约束?它总是会转换为 label.top = top 之类的东西,因此标签会被拉伸,而不是 StackView 继承大小/高度。此外,对于 XIB 文件,我也无法真正将 StackView 固定到 IB 中的容器视图。

希望有人可以帮助我。干杯!

4

1 回答 1

15

以下是您问题的一些答案,尽管顺序不同:

(5) 为什么我必须在代码中添加约束?

假设我禁用 translatesAutoresizingMaskIntoConstraints 那么我不能为 IB 中的 tableview 单元格设置约束?它总是会转换为 label.top = top 之类的东西,因此标签会被拉伸,而不是 StackView 继承大小/高度。此外,对于 XIB 文件,我也无法真正将 StackView 固定到 IB 中的容器视图。

在此示例中,您必须在代码中添加约束,因为您正在从 nib 加载任意视图,然后将其添加到您的 coded CustomView. nib 中的视图没有预先存在的关于它将被放置到什么上下文或层次结构中的知识,因此无法提前定义如何将自己约束到一个未知的未来超级视图。对于故事板上或原型单元格中的 StackView,该上下文与其父视图一样被称为。

对于这种情况,如果您不想手动编写约束,您可以考虑的一个不错的选择是让您的 CustomView 子类 UIStackView 而不是 UIView。由于 UIStackView 会自动生成适当的约束,它将为您节省手动编码。请参阅下一个答案以获取一些示例代码。

(3)我什至以“建议”的方式加载 XIB 吗?

还是有更好的方法,例如使用 UINib.instantiate?我真的找不到最佳实践方法来做到这一点。

我不知道将笔尖加载到自定义视图中的“标准”或“正确”方式。我见过各种可行的方法。但是,我会注意到您在示例代码中所做的工作比所需的要多。这是实现相同结果的一种更简单的方法,但也使用 UIStackView 子类而不是 UIView 子类(如上所述):

class CustomView: UIStackView {
    required init(coder: NSCoder) {
        super.init(coder: coder)
        distribution = .fill
        alignment = .fill
        if let nibView = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)?.first as? UIView {
            addArrangedSubview(nibView)
        }
    }
}

请注意,因为 CustomView 现在是 UIStackView 的子类,它会自动创建任何子视图所需的约束。在这种情况下,因为distributionalignment都设置为.fill,它会根据需要将子视图的边缘固定到它自己的边缘。

(4) 为什么我必须首先这样做?

真的,为什么?我只是将 StackView 移到了 CustomView 中。那么为什么StackView现在就停止自适应了,为什么还要设置上下约束呢?

实际上,这里的关键问题是您的 StackViewalignment.center. 也就是说 StackView 中的标签将垂直居中,但不会将它们限制在 StackView 的顶部或底部。这就像在视图内的子视图中添加 centerY 约束一样。您可以将外部视图设置为您想要的任何高度,并且子视图将居中,但它不会“推出”外部视图的顶部和底部,因为中心约束仅约束中心,而不是顶部和底部边缘。

在您的故事板版本的 StackView 中,StackView 上方的视图层次结构是已知的,并且还有一些选项可以通过调整掩码大小来自动生成约束。无论哪种方式,UIKit 都知道最终的 StackView 高度,并且标签将在该高度内垂直居中,但实际上不会影响它。您需要将 StackView 的对齐方式设置为 .fill,或者将标签顶部和底部的附加约束添加到 StackView 的顶部和底部,以便自动布局确定 StackView 的高度。

(2) 还是我应该覆盖 intrinsicContentSize ?

这不会有太大帮助,因为内在内容大小本身不会推出父视图的边缘,除非子视图的边缘也被限制在父视图的边缘。无论如何,只要您解决了.center上面提到的对齐问题,您将自动获得在这种情况下所需的所有正确的内在内容大小行为。

(1) 我应该设置约束并禁用 translatesAutoresizingMaskIntoConstraints 吗?

这通常是一种有效的方法。但是,如果您像我上面描述的那样将 UIStackView 子类化,那么您也不需要这样做。

总之

如果你:

  1. 如上面的示例代码所示,将您的 CustomView 创建为 UIStackView 的子类

  2. 在您的故事板上创建一个视图,设置为您的自定义类CustomView。如果您希望 CustomView 正确地自行调整大小,则需要为其提供约束,而不是使用调整大小掩码中自动生成的约束。

  3. 更改 nib 中的 StackView 以alignment设置.fill或在至少一个标签的顶部和底部(很可能是大的中心标签)与堆栈视图的顶部和底部之间设置额外的约束

然后自动布局应该可以正常工作,并且您使用 StackView 的自定义视图应该按预期布局。

于 2017-12-27T20:56:05.360 回答