使用 xibs 嵌套@IBDesignables?

Posted

技术标签:

【中文标题】使用 xibs 嵌套@IBDesignables?【英文标题】:Nested @IBDesignables using xibs? 【发布时间】:2017-11-29 12:05:03 【问题描述】:

我正在尝试在 ios 上创建一个基于组件的系统,我想做以下事情:

    创建一个“PaddedView”组件,在任何添加的子组件周围有 8px 的空间,例如容器类型组件。

    将另一个 IBDesignable 视图添加到情节提要上的此 PaddedView 中,并查看这两个视图。

这可能吗?

现在,我正在为所有 IBDesignable 组件使用以下超类来从 xibs 加载它们的视图:

import Foundation
import UIKit

@IBDesignable
class SKDesignableView: UIView 
    var view: UIView?

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        self.loadXib()
    

    override init(frame: CGRect) 
        super.init(frame: frame)
        self.loadXib()
    

    func loadXib() 
        self.view = self.viewFromXib()
        self.view!.frame = self.bounds
        self.view!.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
        self.addSubview(self.view!)
    

    func viewFromXib() -> UIView 
        let bundle = UINib(nibName: String(describing: self.getType()), bundle: Bundle(for: self.getType()))
        let views = bundle.instantiate(withOwner: self, options: nil)
        return views.first as! UIView
    

    func getType() -> AnyClass 
        fatalError()
    

如何为其他 IBDesignables 创建占位符?

【问题讨论】:

【参考方案1】:

视图最初包含子视图,因此将容器视图作为子视图添加到任何需要子视图的组件。

func loadXib() 
        var subview: UIView? = nil
        if self.subviews.count > 0 
            subview = self.subviews[0]
        
        subview?.removeFromSuperview()

        self.view = self.viewFromXib()
        self.view!.frame = self.bounds
        self.view!.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]

        if let subview = subview 
            let lConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal,
                    toItem: self.view!, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 8)
            let rConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal,
                    toItem: self.view!, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: -8)
            let tConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal,
                    toItem: self.view!, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 8)
            let bConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal,
                    toItem: self.view!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -8)
            self.view!.addSubview(subview)
            self.view!.addConstraints([lConstraint, rConstraint, tConstraint, bConstraint])
        
        self.addSubview(self.view!)
    

这种方法可以用标签等泛化来添加多个子视图。

【讨论】:

以上是关于使用 xibs 嵌套@IBDesignables?的主要内容,如果未能解决你的问题,请参考以下文章

解决UITableView xib添加到Storyboard出现IB Designables错误

iOS 开发 Xib 的嵌套使用

iOS 开发 Xib 的嵌套使用

Xcode - @IBDesignables - X.framework 缺少必需的代码签名

如何使用 iOS 故事板创建具有两个嵌套 tableview 单元格 xib 的单个 tableview?

在 Interface Builder 中嵌套 XIB/通过引用嵌入