可設計的視圖未在Storyboard中的正確位置呈現

我有一個自定義的可設計視圖類，如下所示：

@IBDesignable
class AuthInputView: UIView {
    static let nibName = "AuthInputView"
    
    @IBOutlet weak var mainContainerView: UIView!
    @IBOutlet weak var mainStackView: UIStackView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var errorLabel: UILabel!
    
    override  func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        fromNib()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        fromNib()
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

以及一個名為 AuthInputView 的相應筆尖，其檔案所有者設定為 AuthInputView。

我有一個在故事板中設計的視圖控制器，它有一個視圖，誰的類設定為 AuthInputView。當我運行一個應用程式時它呈現得很好，但是當我在故事板中查看它時，它看起來像這樣：

Designables 也是最新的：

但可以看出，自定義視圖呈現在不正確的位置（左上角）。

我用來從筆尖加載并在筆尖的內容添加到指定視圖后附加所需約束的代碼如下所示：

extension UIView {
    
    @discardableResult
    func fromNib<T : UIView>() -> T? {
        guard let contentView = Bundle(for: type(of: self)).loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)?.first as? T else {
            
            return nil
        }
        self.addSubview(contentView)   
        contentView.translatesAutoresizingMaskIntoConstraints = false
       
        contentView.layoutAttachAll(to: self)
        return contentView
    }
    func layoutAttachAll(to childView:UIView)
    {
        var constraints = [NSLayoutConstraint]()
        
        childView.translatesAutoresizingMaskIntoConstraints = false
        constraints.append(NSLayoutConstraint(item: childView, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1.0, constant: 0))
        constraints.append(NSLayoutConstraint(item: childView, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1.0, constant: 0))
        constraints.append(NSLayoutConstraint(item: childView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0))
        constraints.append(NSLayoutConstraint(item: childView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0))
        
        childView.addConstraints(constraints)
    }
}

是什么導致了故事板視圖中的這種錯位？

uj5u.com熱心網友回復：

雖然很多人喜歡使用“布局助手”功能，但很容易混淆......

您正在呼叫您的layoutAttachAllfunc ：

contentView.layoutAttachAll(to: self)

但是在該功能中，您正在執行以下操作：

func layoutAttachAll(to childView:UIView)
{
    var constraints = [NSLayoutConstraint]()
    
    constraints.append(NSLayoutConstraint(item: childView, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1.0, constant: 0))
    ...

但是您已通過selfas childView，因此您限制self為self.

如果您將約束代碼“行內”：

func fromNib<T : UIView>() -> T? {
    guard let contentView = Bundle(for: type(of: self)).loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)?.first as? T else {
        return nil
    }
    self.addSubview(contentView)

    var constraints = [NSLayoutConstraint]()
    
    contentView.translatesAutoresizingMaskIntoConstraints = false
    
    constraints.append(NSLayoutConstraint(item: contentView, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1.0, constant: 0))
    constraints.append(NSLayoutConstraint(item: contentView, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1.0, constant: 0))
    constraints.append(NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0))
    constraints.append(NSLayoutConstraint(item: contentView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0))
    
    self.addConstraints(constraints)
    
    return contentView
}

你不應該再得到“錯位”的觀點。

如果你真的想使用你的layoutAttachAll函式，你想呼叫它：

self.layoutAttachAll(to: contentView)

并更改最后一行：

    // adding to wrong view
    //childView.addConstraints(constraints)
    self.addConstraints(constraints)

也許值得注意的是，您可以將“助手”擴展大大簡化為：

extension UIView {
    @discardableResult
    func fromNib<T : UIView>() -> T? {
        guard let contentView = Bundle(for: type(of: self)).loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)?.first as? T else {
            return nil
        }
        self.addSubview(contentView)

        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        contentView.frame = bounds
        
        return contentView
    }
}

標籤：ios 迅速 故事板 可设计的

上一篇：如何使用StoreKit2恢復？

下一篇：在UICollectionView中僅啟用向前滑動