在故事板中重用uiview xib

Question

我通常喜欢在界面构建器中创建和设计我的uiviews.有时我需要在xib中创建一个可以在故事板中的多个视图控制器中重用的视图.

Answer 1

在故事板中重用和渲染xib.

使用Swift 2.2和Xcode 7.3.1进行测试

1 ----创建一个名为'DesignableXibView'的新UIView

• 文件>新建>文件>来源> Cocoa Touch Class> UIView

2 ----创建一个名为'DesignableXibView'的匹配xib文件

• 文件>新建>文件>用户界面>查看

3 ----设置xib的文件所有者

1. 选择xib
2. 选择文件的所有者
3. 在Identity Inspector中将自定义类设置为"DesignableXibView".

• 注意:不要在xib上设置视图的自定义类.只有文件所有者!

4 ---- DesignableXibView的实现

//  DesignableXibView.swift

import UIKit

@IBDesignable

class DesignableXibView: UIView {

    var contentView : UIView?

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

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

    func xibSetup() {
        contentView = loadViewFromNib()

        // use bounds not frame or it'll be offset
        contentView!.frame = bounds

        // Make the view stretch with containing view
        contentView!.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]

        // Adding custom subview on top of our view (over any custom drawing > see note below)
        addSubview(contentView!)
    }

    func loadViewFromNib() -> UIView! {

        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

        return view
    }

}

5 ----在故事板中测试可重复使用的视图

1. 打开你的故事板
2. 添加视图
3. 设置该视图的自定义类
4. 等一下......好吧!

Answer 2

新!更新的答案能够直接在故事板中呈现(和swift!)

适用于Xcode 6.3.1

创建一个名为"ReuseableView"的新UIView

• 文件>新建>文件>来源> Cocoa Touch Class> UIView

创建一个名为"ReuseableView"的匹配xib文件

• 文件>新建>文件>用户界面>查看

设置xib的文件所有者

1. 选择xib
2. 选择文件的所有者

3. 在Identity Inspector中将自定义类设置为"ReusableView".

   • 注意:不要在xib上设置视图的自定义类.只有文件所有者!

从ReuseableView.xib中的视图到ReuseableView.h接口创建一个出口

1. 打开助理编辑器
2. 控制+从视图拖动到您的界面

添加initWithCoder实现以加载视图并添加为子视图.

- (id)initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if (self) {

        // 1. load the interface
        [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil];
        // 2. add as subview
        [self addSubview:self.view];
        // 3. allow for autolayout
        self.view.translatesAutoresizingMaskIntoConstraints = NO;
        // 4. add constraints to span entire view
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];

    }
    return self;
}

在故事板中测试可重复使用的视图

1. 打开你的故事板
2. 添加视图
3. 设置该视图的自定义类

跑,观察!

Answer 3

Swift 3&4更新为已接受的答案

1.创建一个名为'DesignableXibView'的新UIView

• 文件>新建>文件>来源> Cocoa Touch Class> UIView

2.创建名为"DesignableXibView"的匹配xib文件

• 文件>新建>文件>用户界面>查看

3.设置xib的文件所有者

选择"DesignableXibView.xib">"文件所有者">在Identity Inspector中将"Custom Class"设置为"DesignableXibView".

• 注意:不要在xib上设置视图的自定义类.只有文件所有者!

4. DesignableXibView的实现

    import UIKit

@IBDesignable

class DesignableXibView: UIView {

    var contentView : UIView!

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

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

    func xibSetup() {
        contentView = loadViewFromNib()

        // use bounds not frame or it'll be offset
        contentView.frame = bounds

        // Make the view stretch with containing view
        contentView.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]

        // Adding custom subview on top of our view 
        addSubview(contentView)
    }

    func loadViewFromNib() -> 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

        return view
    }
} 

5在故事板中测试可重用的视图

• 打开你的故事板

• 添加视图

• 设置该视图的自定义类

Answer 4

swift 2中的initWithCoder函数,如果有人在翻译时遇到问题:

required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        UINib(nibName: String(self.dynamicType), bundle: NSBundle.mainBundle()).instantiateWithOwner(self, options: nil)
        self.addSubview(view)
        self.view.translatesAutoresizingMaskIntoConstraints = false
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterY , metrics: nil, views: ["view": self.view]))
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterX , metrics: nil, views: ["view": self.view]))
    }