从故事板中的外部 xib 文件加载视图

Question

我想在故事板中的多个视图控制器中使用视图。因此，我考虑在外部 xib 中设计视图，以便更改反映在每个视图控制器中。但是如何从故事板中的外部 xib 加载视图？这是否可能？如果不是这种情况，还有哪些其他替代方案可以满足上述情况？

Answer 1

我的完整示例位于此处，但我将在下面提供摘要。

布局

将同名的 .swift 和 .xib 文件添加到您的项目中。 .xib 文件包含您的自定义视图布局（最好使用自动布局约束）。

使 swift 文件成为 xib 文件的所有者。

代码

将以下代码添加到 .swift 文件中，并连接 .xib 文件中的出口和操作。

import UIKit
class ResuableCustomView: UIView {

    let nibName = "ReusableCustomView"
    var contentView: UIView?

    @IBOutlet weak var label: UILabel!
    @IBAction func buttonTap(_ sender: UIButton) {
        label.text = "Hi"
    }

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

        guard let view = loadViewFromNib() else { return }
        view.frame = self.bounds
        self.addSubview(view)
        contentView = view
    }

    func loadViewFromNib() -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nibName, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }
}

使用它

在故事板的任何位置使用您的自定义视图。只需添加一个 UIView 并将类名称设置为您的自定义类名称。

Answer 2

有一段时间，Christopher Swasey 的方法是我发现的最好方法。我向团队中的几位高级开发人员询问了这个问题，其中一位拥有完美的解决方案！它满足了 Christopher Swasey 如此雄辩地解决的每一个问题，并且不需要样板子类代码（我主要关心的是他的方法）。有一个问题，但除此之外，它相当直观且易于实现。

1. 在 .swift 文件中创建自定义 UIView 类来控制您的 xib。即 MyCustomClass.swift
2. 创建一个 .xib 文件并根据需要设置其样式。即 MyCustomClass.xib
3. 将 .xib 文件的File's Owner 设置为您的自定义类 (MyCustomClass)
4. GOTCHA: 将 .xib 文件中自定义视图的 class 值（在 identity Inspector 下）留空。 因此您的自定义视图将没有指定的类，但它将具有指定的文件所有者。
5. 像平常使用助理编辑器一样连接您的插座。
   • 注意：如果您查看Connections Inspector，您会发现您的引用插座没有引用您的自定义类（即MyCustomClass），而是引用文件的所有者。由于 File's Owner 被指定为您的自定义类，因此插座将连接并正常工作。
6. 确保您的自定义类在类语句之前有@IBDesignable。
7. 使您的自定义类符合下面引用的 NibLoadable 协议。
   • 注意：如果您的自定义类 .swift 文件名与 .xib 文件名不同，请将 nibName 属性设置为.xib 文件的名称。
8. 实现必需的 init?(coder aDecoder: NSCoder) 并覆盖 init(frame: CGRect) 以调用 setupFromNib()，如下例所示。
9. 将 UIView 添加到所需的 Storyboard 并将类设置为您的自定义类名称（即 MyCustomClass）。
10. 观看 IBDesignable 的实际操作，它在故事板中绘制您的 .xib，令人惊叹不已。

以下是您要引用的协议：

public protocol NibLoadable {
    static var nibName: String { get }
}

public extension NibLoadable where Self: UIView {

    public static var nibName: String {
        return String(describing: Self.self) // defaults to the name of the class implementing this protocol.
    }

    public static var nib: UINib {
        let bundle = Bundle(for: Self.self)
        return UINib(nibName: Self.nibName, bundle: bundle)
    }

    func setupFromNib() {
        guard let view = Self.nib.instantiate(withOwner: self, options: nil).first as? UIView else { fatalError("Error loading \(self) from nib") }
        addSubview(view)
        view.translatesAutoresizingMaskIntoConstraints = false
        view.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
        view.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
        view.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true
        view.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true
    }
}

下面是实现该协议的 MyCustomClass 示例（.xib 文件名为 MyCustomClass.xib）：

@IBDesignable
class MyCustomClass: UIView, NibLoadable {

    @IBOutlet weak var myLabel: UILabel!

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

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

}

注意：如果您错过了陷阱并将 .xib 文件中的 class 值设置为自定义类，那么它将不会在情节提要中绘制，并且您将收到 EXC_BAD_ACCESS 错误当你运行应用程序，因为它陷入了尝试使用 init?(coder aDecoder: NSCoder) 方法从 nib 初始化类的无限循环，然后调用 Self.nib.instantiate< /code> 并再次调用 init。

Answer 3

假设您已经创建了一个要使用的 xib：

1）创建 UIView 的自定义子类（您可以转到 File -> New -> File... -> Cocoa Touch Class。确保“Subclass” of:”是“UIView”）。

2) 在初始化时添加一个基于xib 的视图作为该视图的子视图。

在 Obj-C 中

-(id)initWithCoder:(NSCoder *)aDecoder{
    if (self = [super initWithCoder:aDecoder]) {
        UIView *xibView = [[[NSBundle mainBundle] loadNibNamed:@"YourXIBFilename"
                                                              owner:self
                                                            options:nil] objectAtIndex:0];
        xibView.frame = self.bounds;
        xibView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self addSubview: xibView];
    }
    return self;
}

在 Swift 2 中

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    let xibView = NSBundle.mainBundle().loadNibNamed("YourXIBFilename", owner: self, options: nil)[0] as! UIView
    xibView.frame = self.bounds
    xibView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
    self.addSubview(xibView)
}

在 Swift 3 中

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    let xibView = Bundle.main.loadNibNamed("YourXIBFilename", owner: self, options: nil)!.first as! UIView
    xibView.frame = self.bounds
    xibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.addSubview(xibView)
}

3) 无论您想在情节提要中的何处使用它，都像往常一样添加 UIView，选择新添加的视图，转到 Identity Inspector（右上角的第三个图标，看起来像一个带有线条的矩形），然后在“自定义类”下的“类”中输入子类的名称。

Answer 4

我一直发现“将其添加为子视图”解决方案并不令人满意，因为它与 (1) 自动布局、(2) @IBInspectable 和 (3) 出口相混淆。相反，让我向您介绍 awakeAfter: 的魔力，这是一个 NSObject 方法。

awakeAfter 允许您将实际从 NIB/Storyboard 唤醒的对象完全替换为不同的对象。然后，该对象将经历水合过程，调用 awakeFromNib，将其添加为视图等。

我们可以在“纸板剪纸”中使用它我们视图的子类，其唯一目的是从 NIB 加载视图并将其返回以在 Storyboard 中使用。然后，在 Storyboard 视图的身份检查器中指定可嵌入的子类，而不是原始类。它实际上不必是子类才能工作，但使其成为子类才允许 IB 查看任何 IBInspectable/IBOutlet 属性。

这个额外的样板可能看起来不是最理想的——从某种意义上来说确实如此，因为理想情况下 UIStoryboard 会无缝地处理这个问题——但它的优点是完全保留原始的 NIB 和 UIView 子类未经修改。它所扮演的角色基本上是适配器或桥接类，并且作为附加类在设计方面是完全有效的，即使它令人遗憾。另一方面，如果您喜欢对类进行节约，@BenPatch 的解决方案可以通过实现一个带有一些其他细微更改的协议来工作。哪种解决方案更好的问题归结为程序员风格的问题：是喜欢对象组合还是多重继承。

注意：NIB 文件中视图上设置的类保持不变。可嵌入子类仅在故事板中使用。子类不能用于在代码中实例化视图，因此它本身不应该有任何额外的逻辑。它应该仅包含awakeAfter钩子。

class MyCustomEmbeddableView: MyCustomView {
  override func awakeAfter(using aDecoder: NSCoder) -> Any? {
    return (UIView.instantiateViewFromNib("MyCustomView") as MyCustomView?)! as Any
  }
}

⚠️ 这里的一个显着缺点是，如果您在情节提要中定义与另一个视图无关的宽度、高度或纵横比约束，则必须手动复制它们。关联两个视图的约束被安装在最近的共同祖先上，并且视图从故事板中由内而外地被唤醒，因此当这些约束在超级视图上被水合时，交换已经发生了。仅涉及相关视图的约束直接安装在该视图上，因此在交换发生时会被丢弃，除非它们被复制。

请注意，这里发生的情况是将故事板中的视图上安装的约束复制到新实例化的视图，该视图可能已经有自己的约束，在其笔尖中定义文件。那些不受影响。

class MyCustomEmbeddableView: MyCustomView {
  override func awakeAfter(using aDecoder: NSCoder) -> Any? {
    let newView = (UIView.instantiateViewFromNib("MyCustomView") as MyCustomView?)!

    for constraint in constraints {
      if constraint.secondItem != nil {
        newView.addConstraint(NSLayoutConstraint(item: newView, attribute: constraint.firstAttribute, relatedBy: constraint.relation, toItem: newView, attribute: constraint.secondAttribute, multiplier: constraint.multiplier, constant: constraint.constant))
      } else {
        newView.addConstraint(NSLayoutConstraint(item: newView, attribute: constraint.firstAttribute, relatedBy: constraint.relation, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: constraint.constant))
      }
    }

    return newView as Any
  }
}  

instantiateViewFromNib 是 UIView 的类型安全扩展。它所做的只是循环遍历 NIB 的对象，直到找到与类型匹配的对象。请注意，泛型类型是返回值，因此必须在调用站点指定类型。

extension UIView {
  public class func instantiateViewFromNib<T>(_ nibName: String, inBundle bundle: Bundle = Bundle.main) -> T? {
    if let objects = bundle.loadNibNamed(nibName, owner: nil) {
      for object in objects {
        if let object = object as? T {
          return object
        }
      }
    }

    return nil
  }
}

Answer 5

尽管最受欢迎的答案效果很好，但它们在概念上是错误的。它们都使用File'sowner作为类的出口和UI组件之间的连接。 文件所有者应该仅用于顶级对象，而不是UIView。请查看 Apple 开发者文档。
将 UIView 作为文件的所有者会导致这些不良后果。

1. 您被迫在应该使用 self 的地方使用 contentView。它不仅丑陋，而且在结构上也是错误的，因为中间视图使数据结构无法传达其 UI 结构。这就像违背声明式 UI 的概念。
2. 每个 Xib 只能有一个 UIView。 Xib 应该有多个 UIView。

有一种优雅的方法可以在不使用文件所有者的情况下完成此操作。请查看此博客文章。它解释了如何以正确的方式进行操作。

Answer 6

我认为使用 XIB 视图的替代方案是在单独的故事板中使用视图控制器。

然后在主情节提要中代替自定义视图，使用容器视图和Embed Segue，并使用StoryboardReference到这个自定义视图控制器 哪个视图应放置在主情节提要中的其他视图内。

然后我们可以通过准备segue在该嵌入ViewController和主视图控制器之间设置委托和通信。这种方法与显示 UIView 不同，但可以利用更简单、更高效（从编程角度来看）来实现相同的目标，即拥有在主情节提要中可见的可重用自定义视图。

额外的优点是您可以在 CustomViewController 类中实现逻辑，并设置所有委托和视图准备，而无需创建单独的（在项目中更难找到）控制器类，也无需使用 Component 将样板代码放置在主 UIViewController 中。我认为这对于可重复使用的组件很有好处。可嵌入其他视图的音乐播放器组件（类似小部件）。

Answer 7

目前最好的解决方案是只使用自定义视图控制器，其视图在 xib 中定义，然后简单地删除 Xcode 在向其添加视图控制器时在情节提要中创建的“view”属性（不要忘记设置不过自定义类）。

这将使运行时自动查找 xib 并加载它。您可以将此技巧用于任何类型的容器视图或内容视图。

Answer 8

根据 Ben Patch 的回复 中描述的步骤解决 Objective-C。

使用 UIView 扩展：

@implementation UIView (NibLoadable)

- (UIView*)loadFromNib
{
    UIView *xibView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil] firstObject];
    xibView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addSubview:xibView];
    [xibView.topAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
    [xibView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor].active = YES;
    [xibView.leftAnchor constraintEqualToAnchor:self.leftAnchor].active = YES;
    [xibView.rightAnchor constraintEqualToAnchor:self.rightAnchor].active = YES;
    return xibView;
}

@end

创建文件 MyView.h、MyView.m 和 MyView.xib。

首先准备您的 MyView.xib，正如 Ben Patch 的回复 所说，所以 set class MyView< /code> 表示文件的所有者，而不是此 XIB 内的主视图。

MyView.h:

#import <UIKit/UIKit.h>

IB_DESIGNABLE @interface MyView : UIView

@property (nonatomic, weak) IBOutlet UIView* someSubview;

@end

MyView.m:

#import "MyView.h"
#import "UIView+NibLoadable.h"

@implementation MyView

#pragma mark - Initializers

- (id)init
{
    self = [super init];
    if (self) {
        [self loadFromNib];
        [self internalInit];
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self loadFromNib];
        [self internalInit];
    }
    return self;
}

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

- (void)awakeFromNib
{
    [super awakeFromNib];
    [self internalInit];
}

- (void)internalInit
{
    // Custom initialization.
}

@end

然后以编程方式创建视图：

MyView* view = [[MyView alloc] init];

警告！ 如果满足以下条件，则该视图的预览将不会显示在 Storyboard 中：由于 Xcode >= 9.2 中的此错误，您使用 WatchKit 扩展： https://forums.developer.apple.com/thread/95616

Answer 9

这就是您一直想要的答案。您只需创建您的 CustomView 类，将其主实例与所有子视图和出口一起放在 xib 中。然后，您可以将该类应用于故事板或其他 xib 中的任何实例。

无需摆弄文件的所有者，或将出口连接到代理或以特殊方式修改 xib，或添加自定义视图的实例作为其自身的子视图。

操作：

1. 导入 BFWControls 框架
2. 将您的超类从 UIView 更改为 NibView （或从 UITableViewCell 更改为 NibTableViewCell）

只需执行以下 它！

它甚至可以与 IBDesignable 配合使用，在设计时在故事板中引用您的自定义视图（包括 xib 中的子视图）。

您可以在这里阅读更多相关信息：
https://medium. com/build-an-app-like-lego/embed-a-xib-in-a-storyboard-953edf274155

你可以获得开源BFWControls 框架在这里：
https://github.com/BareFeetWare/BFWControls

这是 NibReplaceable 的简单摘录 驱动它的代码，如果你好奇的话：https://gist.github.com/barefeettom/f48f6569100415e0ef1fd530ca39f5b4

汤姆

Answer 10

即使您的类与 XIB 的名称不同，也可以使用此解决方案。
例如，如果您有一个基本视图控制器类controllerA，它具有一个XIB名称controllerA.xib，并且您使用controllerB对其进行了子类化，并且想要在故事板中创建controllerB的实例，那么您可以：

• 在故事板集中创建视图
• 控制器将控制器的类添加到controllerB
• 删除故事板中controllerB 的视图
• 覆盖controllerA 中的加载视图到：

*

- (void) loadView    
{
        //according to the documentation, if a nibName was passed in initWithNibName or
        //this controller was created from a storyboard (and the controller has a view), then nibname will be set
        //else it will be nil
        if (self.nibName)
        {
            //a nib was specified, respect that
            [super loadView];
        }
        else
        {
            //if no nib name, first try a nib which would have the same name as the class
            //if that fails, force to load from the base class nib
            //this is convenient for including a subclass of this controller
            //in a storyboard
            NSString *className = NSStringFromClass([self class]);
            NSString *pathToNIB = [[NSBundle bundleForClass:[self class]] pathForResource: className ofType:@"nib"];
            UINib *nib ;
            if (pathToNIB)
            {
                nib = [UINib nibWithNibName: className bundle: [NSBundle bundleForClass:[self class]]];
            }
            else
            {
                //force to load from nib so that all subclass will have the correct xib
                //this is convenient for including a subclass
                //in a storyboard
                nib = [UINib nibWithNibName: @"baseControllerXIB" bundle:[NSBundle bundleForClass:[self class]]];
            }

            self.view = [[nib instantiateWithOwner:self options:nil] objectAtIndex:0];
       }
}

Answer 11

类 BYTXIBView: UIView {
var nibView: UIView?

// MARK: - init methods
override init(frame: CGRect) {
    super.init(frame: frame)
    commonSetup()
}

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

func commonSetup() {
    guard let nibView = loadViewFromNib() else { return }
    nibView.frame = bounds
    nibView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    addSubview(nibView)
}

func loadViewFromNib() -> UIView? {
    let bundle = Bundle(for: type(of: self))
    let className = type(of: self).className
    let view = bundle.loadNibNamed(className, owner: self, options: nil)?.first as? UIView
    return view
}

}