ios - 无法在界面生成器中加载 IBDesignable xib

Question

我有一个 xib ( childXib ) 文件链接到其自定义 UIView swift 文件通过其所有者。

这就是我如何初始化我的自定义 UIView :

// init for IBDesignable
override init(frame: CGRect) {
    super.init(frame: frame)

    let view = loadViewFromNib()
    view.frame = bounds

    addSubview(view)
}

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

func loadViewFromNib() -> UIView {

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

    return view
}

当我想添加这个时 xib ( childXib ) 在另一个 xib ( parentXib )，我收到以下错误:

error: IB Designables: Failed to render instance of MyRootView: The agent threw an exception.

哪里 MyRootView是链接到 parentXib 的文件

error: IB Designables: Failed to update auto layout status: The agent raised a "NSInternalInconsistencyException" exception: Could not load NIB in bundle: 'NSBundle (loaded)' with name 'MyIBDesignableCustomViewFilename'

哪里 MyIBDesignableCustomViewFilename是链接到 childXib 的文件.

当我通过单击 Debug 进行调试时在 Custom class来自 Identity inspector ，它在该行不起作用:

let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

所有 xib文件在 Copy Bundle Resources在 Build Phases .

知道出了什么问题吗？

Answer 1

第一步:

我将向您介绍 IBDesignable 和 IBInspectable，并向你们展示如何利用新功能。没有比创建演示更好的方法来详细说明功能。所以我们将一起构建一个名为“Rainbow”的自定义界面。

IBDesignable 和 IBInspectable

使用 IBDesignable 和 IBInspectable，开发人员可以创建在 Interface Builder 中实时呈现的界面(或 View )。一般来说，要应用这个新功能，你需要做的就是通过继承 UIView 或 UIControl 创建一个可视化类，然后在 Swift 中使用 @IBDesignable 关键字作为类名的前缀。如果您使用的是 Objective-C，请改用 IB_DESIGNABLE 宏。这是 Swift 中的示例代码:

@IBDesignable 
class Rainbow: UIView {
}

在旧版本的 Xcode 中，您可以编辑用户定义的运行时属性以更改 Interface Builder 中对象的属性(例如 layer.cornerRadius)。问题是您必须键入属性的确切名称。 IBInspectable 向前迈进了一步。当您使用 IBInspectable 为视觉类的属性添加前缀时，该属性将公开给界面构建器，以便您可以以非常直接的方式更改其值:



同样，如果您在 Swift 中开发您的应用程序，您只需在您选择的属性前加上关键字 @IBInspectable 即可。这是一个示例代码片段:

@IBInspectable var firstColor: UIColor = UIColor.blackColor()
 {
     // Update your UI when value changes
 }



@IBInspectable var firstColor: UIColor = UIColor.blackColor()
{
     // Update your UI when value changes
 }

构建您的 Xcode 项目

让我们开始在 Xcode 中创建一个新项目，并选择 Single View Application 作为模板，并将其命名为 RainbowDemo。我们将在本项目中使用 Swift 作为编程语言，所以在创建项目时不要忘记选择它。

完成后，在 Project Navigator 中选择 Main.storyboard 并将一个 View 对象从 Object Library 拖到 View Controller。将其颜色更改为 #38334C(或您想要的任何颜色)并将其大小设置为 600 x 434。然后将其放在主 View 的中心。不要忘记将主 View 的颜色更改为与 View 对象相同的颜色。
提示:如果您想更改代码的 RGB 颜色值，只需打开调色板并切换到滑块选项卡以更改 RGB 值。

感到困惑？不用担心。看完项目演示后你就会明白我的意思。

使用 Xcode 6，您必须为 View 配置自动布局约束以支持所有类型的 iOS 设备。自动布局在最新版本的 Xcode 中非常强大。对于简单的约束，你只需点击 Auto Layout 菜单的 Issues 选项并选择“Add Missing Contraints”，Xcode 会自动为 View 配置布局约束。



创建自定义 View 类

现在你已经在 storyboard 中创建了 View ，是时候创建我们的自定义 View 类了。我们将使用 Swift 类模板来创建类。将其命名为“彩虹”。

Then insert the following code in the class:

import UIKit

class Rainbow: UIView {
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

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

如前所述，视觉类是 UIView 的子类。为了在实时渲染中使用我们的自定义类，我们需要覆盖两个初始化程序，如上所示。接下来通过选择助手编辑器拆分 View :



完成后，在助理编辑器中选择主 Storyboard，这样您就可以实时查看正在构建的内容。请记住在身份检查器下将 View 的类名更改为“Rainbow”:

实现 IBDesignable 控件

启用实时渲染控件的第一步是通过在类名前加上@IBDesignable 将自定义 View 设置为可设计:

@IBDesignable 
class Rainbow: UIView {
    ...
}

如您所见，这有点简单。但是这个简单的关键字会让你的开发变得更容易。接下来，我们将添加一些用于设置圆圈颜色的属性。在 Rainbow 类中插入这些代码行:

@IBInspectable var firstColor: UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0)
@IBInspectable var secondColor: UIColor = UIColor(red: (171.0/255.0), green: (250.0/255), blue: (81.0/255.0), alpha: 1.0)
@IBInspectable var thirdColor: UIColor = UIColor(red: (238.0/255.0), green: (32.0/255)

在这里，我们用默认颜色预定义每个属性，并告诉它每次用户更改其值时重绘 View 。最重要的是，我们为每个属性添加了 @IBInspectable 关键字的前缀。如果您转到 View 的 Attributes 检查项，您应该可以直观地找到这些属性:

酷，对吧？通过将属性指示为 IBInspectable，您可以使用颜色选择器直观地编辑它们。

好的，让我们开始实现 Rainbow 类的主要方法，该类用于在屏幕上绘制一个圆圈。在类中插入以下方法:

func addOval(lineWidth: CGFloat, path: CGPathRef, strokeStart: CGFloat, strokeEnd: CGFloat, strokeColor: UIColor, fillColor: UIColor, shadowRadius: CGFloat, shadowOpacity: Float, shadowOffsset: CGSize) {

    let arc = CAShapeLayer()
    arc.lineWidth = lineWidth
    arc.path = path
    arc.strokeStart = strokeStart
    arc.strokeEnd = strokeEnd
    arc.strokeColor = strokeColor.CGColor
    arc.fillColor = fillColor.CGColor
    arc.shadowColor = UIColor.blackColor().CGColor
    arc.shadowRadius = shadowRadius
    arc.shadowOpacity = shadowOpacity
    arc.shadowOffset = shadowOffsset
    layer.addSublayer(arc)
}

为了让代码简洁易读，我们创建了一个通用的方法，根据调用者提供的参数绘制完整或半圆。使用 CAShapeLayer 类绘制圆或弧非常简单。您可以使用 strokeStart 和 strokeEnd 属性控制描边的开始和结束。通过在 0.0 和 1.0 之间改变 stokeEnd 的值，您可以绘制完整或部分圆。其余属性仅用于设置笔触颜色、阴影颜色等。 CAShapeLayer 中所有可用属性的详细信息可以查看官方文档。

接下来，在 Rainbow 类中插入以下方法:

override func drawRect(rect: CGRect) {
    // Add ARCs
    self.addCirle(80, capRadius: 20, color: self.firstColor)
    self.addCirle(150, capRadius: 20, color: self.secondColor)
    self.addCirle(215, capRadius: 20, color: self.thirdColor)
}

func addCirle(arcRadius: CGFloat, capRadius: CGFloat, color: UIColor) {
    let X = CGRectGetMidX(self.bounds)
    let Y = CGRectGetMidY(self.bounds)

    // Bottom Oval
    let pathBottom = UIBezierPath(ovalInRect: CGRectMake((X - (arcRadius/2)), (Y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
    self.addOval(20.0, path: pathBottom, strokeStart: 0, strokeEnd: 0.5, strokeColor: color, fillColor: UIColor.clearColor(), shadowRadius: 0, shadowOpacity: 0, shadowOffsset: CGSizeZero)

    // Middle Cap
    let pathMiddle = UIBezierPath(ovalInRect: CGRectMake((X - (capRadius/2)) - (arcRadius/2), (Y - (capRadius/2)), capRadius, capRadius)).CGPath
    self.addOval(0.0, path: pathMiddle, strokeStart: 0, strokeEnd: 1.0, strokeColor: color, fillColor: color, shadowRadius: 5.0, shadowOpacity: 0.5, shadowOffsset: CGSizeZero)

    // Top Oval
    let pathTop = UIBezierPath(ovalInRect: CGRectMake((X - (arcRadius/2)), (Y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
    self.addOval(20.0, path: pathTop, strokeStart: 0.5, strokeEnd: 1.0, strokeColor: color, fillColor: UIColor.clearColor(), shadowRadius: 0, shadowOpacity: 0, shadowOffsset: CGSizeZero)

}

drawRect的默认实现方法什么都不做。为了在 View 中绘制圆，我们重写了方法来实现我们自己的绘制代码。 addCircle方法接受三个参数:arcRadius、capRadius 和 color。 arcRadius是圆的半径，而 capRadius是圆顶的半径。

addCircle 方法利用 UIBezierPath 绘制圆弧，其工作方式如下:

First it draws a half circle at the bottom
Next it draws a full small circle at the edge of the arc.
Finally, it draws the other half of the circle

在 drawRect 方法中，我们以不同的半径和颜色调用了 3 次 addCircle 方法。下图说明了如何绘制圆圈:


提示:如果你需要更多关于 UIBezierPath 的信息，你可以查看 Apple 的官方文档。

使用 IBInspectable 属性，您现在可以在 Interface Builder 中自由更改每个圆圈的颜色，而无需深入代码:

显然，您可以进一步将 arcRadius 公开为 IBInspectable 属性。我将把它留给你作为练习。





示例代码点击这里: https://github.com/appcoda/Rainbow-IBDesignable-Demo