Question

我正在使用XCode 12.1，并且试图创建一些可重用的XIB，并希望在情节提要中呈现它们。我的问题是所有这些视图都将显示在左上角，就像加载的视图的框架是CGRect.zero一样。情节提要中的视图控制器如下所示：

我制作了UIView的子类，可以动态地从.xib加载视图：

import UIKit

@IBDesignable
class NibView: UIView {

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        self.createNibView()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.createNibView()
    }
    
    private func createNibView() {
        guard let view = loadFromNib() else { return }
        self.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(view)
        self.createConstraints(for: view)
        self.setNeedsLayout()
    }
    
    private func loadFromNib() -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as? UIView
        view?.translatesAutoresizingMaskIntoConstraints = false
        return view
    }
    
    private func createConstraints(for view: UIView) {
        NSLayoutConstraint.activate([
            self.topAnchor.constraint(equalTo: view.topAnchor),
            self.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            self.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            self.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }

}

和该视图的子类：

import UIKit

@IBDesignable
class RDTextField: NibView {
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var errorLabel: UILabel!
    @IBOutlet weak var errorIcon: UIImageView!
}

和相关的xib：

在情节提要中，我添加了一个视图，并为其设置了此自定义视图的类，该视图是从具有情节提要的图像中选择的视图。

我也尝试过使用awakeAfter(using coder:)并没有获得更好的结果，我尝试使用自动调整大小蒙版，该蒙版的大小稍好一些，因为它可以正确设置原点，但是尺寸不正确。无论如何，我想禁用translatesAutoresizingMaskIntoConstraints并使用自己的约束。

我也尝试调试这些视图，但是XCode不会附加到任何进程，并且我无法在Console.app中找到日志。

注意：我为IBDesignable扩展了UIView，可帮助我设置边框颜色，宽度和半径。我试图禁用它，但没有任何结果。

注2：在运行时，一切正常，但也非常需要情节提要中的实时取景。

有人遇到或有任何想法如何解决此问题吗？

Answer 1

情节提要面板对象的 root 视图始终使用自动调整大小蒙版。您的代码正在禁用该功能。

从createNibView()类的NibView函数中删除一行

private func createNibView() {
    guard let view = loadFromNib() else { return }
    
    // don't do this!
    //self.translatesAutoresizingMaskIntoConstraints = false
    
    self.addSubview(view)
    self.createConstraints(for: view)
    self.setNeedsLayout()
}

应该这样做。

情节提要xib实时视图在左上角呈现所有子视图

1 个答案: