Swift 中带有 XIB 的自定义 UIView 子类
Custom UIView subclass with XIB in Swift
我正在使用 Swift 和 Xcode 6.4 的价值。
所以我有一个视图控制器，它将包含一些多对 UILabel 和 UIImageView。我想将 UILabel-UIImageView 对放入自定义 UIView 中，这样我就可以简单地在上述视图控制器中重复使用相同的结构。 （我知道这可以转化为 UITableView，但为了~学习~请多多包涵）。事实证明这是一个比我想象的更复杂的过程，我在想出 "right" 方法来使这一切在 IB 中工作时遇到了麻烦。
目前我一直在 UIView subclass 和相应的 XIB 上挣扎，覆盖 init(frame:) 和 init(coder)，从 nib 加载视图并将其添加为子视图。到目前为止，这就是我在 Internet 上找到的 seen/read。 （大约是：http://iphonedev.tv/blog/2014/12/15/create-an-ibdesignable-uiview-subclass-with-code-from-an-xib-file-in-xcode-6）。
这给我带来了在 init(coder) 和从包中加载 nib 之间导致无限循环的问题。奇怪的是 none 这些文章或以前关于堆栈溢出的答案都提到了这个！
好的，所以我检查了 init(coder) 以查看是否已经添加了子视图。那个"solved"那个，貌似。但是，我开始 运行 遇到一个问题，当我尝试为它们分配值时，我的自定义视图插座为零。
我做了一个 didSet 并添加了一个断点来查看......它们肯定是在一个点上设置的，但是当我尝试修改标签的 textColor 时，那个标签是 nil .
我在这里有点扯头发。
可重用组件看起来像软件设计 101，但我觉得 Apple 在密谋反对我。我应该在这里使用容器 VCs 吗？我是否应该只是嵌套视图并在我的主 VC 中拥有大量愚蠢的出口？为什么这么复杂？为什么每个人的示例都不适合我？
想要的结果（假装整个是 VC，框是我想要的自定义 uiviews）：
感谢阅读。
以下是我自定义的 UIView 子class。在我的主故事板中，我将 UIViews 的 subclass 设置为它们的 class.
class StageCardView: UIView {
@IBOutlet weak private var stageLabel: UILabel! {
didSet {
NSLog("I will murder you %@", stageLabel)
}
}
@IBOutlet weak private var stageImage: UIImageView!
var stageName : String? {
didSet {
self.stageLabel.text = stageName
}
}
var imageName : String? {
didSet {
self.stageImage.image = UIImage(named: imageName!)
}
}
var textColor : UIColor? {
didSet {
self.stageLabel.textColor = textColor
}
}
var splatColor : UIColor? {
didSet {
let splatImage = UIImage(named: "backsplat")?.tintedImageWithColor(splatColor!)
self.backgroundColor = UIColor(patternImage: splatImage!)
}
}
// MARK: init
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
if self.subviews.count == 0 {
setup()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
func setup() {
if let view = NSBundle.mainBundle().loadNibNamed("StageCardView", owner: self, options: nil).first as? StageCardView {
view.frame = bounds
view.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
addSubview(view)
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
// Drawing code
}
*/
}
编辑： 这是我到目前为止能够得到的...
XIB:
结果：
问题：尝试访问标签或图像出口时，它们为零。在上述访问的断点处检查时，标签和图像子视图在那里，视图层次结构符合预期。
如果需要的话，我可以在代码中完成这一切，但我不太喜欢在代码中进行自动布局，所以如果有办法避免它，我宁愿不这样做！
EDIT/QUESTION 移动：
我想出了如何让出口不再为零。
来自这个 SO 答案的灵感：Loaded nib but the view outlet was not set - new to InterfaceBuilder 除了我没有分配视图插座，我分配了各个组件插座。
现在我只是在墙上扔屎，看看它是否会粘住。有谁知道我为什么必须这样做？这是什么黑魔法？
关于视图重用的一般建议
你说得对，可重用和可组合的元素是软件 101。Interface Builder 不太擅长它。
具体来说，xibs 和故事板是通过重用在代码中定义的视图来定义视图的好方法。但是它们对于定义您自己希望在 xib 和故事板中重复使用的视图不是很好。 （可以做到，但属于进阶练习。）
所以，这是一条经验法则。如果您正在定义要从代码中重用的视图，请按照您的意愿进行定义。但是，如果您要定义一个视图，希望能够在故事板中重复使用，请在代码中定义该视图。
所以在你的情况下，如果你试图定义一个你想从情节提要中重复使用的自定义视图，我会用代码来完成。如果你对通过 xib 定义你的视图死心塌地，那么我会在代码中定义一个视图，并在它的初始化程序中让它初始化你的 xib 定义的视图并将其配置为子视图。
在这种情况下的建议
以下是您在代码中定义视图的大致方式：
class StageCardView: UIView {
var stageLabel = UILabel(frame:CGRectZero)
var stageImage = UIImageView(frame:CGRectZero)
override init(frame:CGRect) {
super.init(frame:frame)
setup()
}
required init(coder aDecoder:NSCoder) {
super.init(coder:aDecoder)
setup()
}
private func setup() {
stageImage.image = UIImage(named:"backsplat")
self.addSubview(stageLabel)
self.addSubview(stageImage)
// configure the initial layout of your subviews here.
}
}
您现在可以在代码中或通过情节提要对其进行实例化，但您无法在 Interface Builder 中按原样获得实时预览。
或者，通过将 xib 定义的视图嵌入到代码定义的视图中，您可以大致定义基于 xib 的可重用视图：
class StageCardView: UIView {
var embeddedView:EmbeddedView!
override init(frame:CGRect) {
super.init(frame:frame)
setup()
}
required init(coder aDecoder:NSCoder) {
super.init(coder:aDecoder)
setup()
}
private func setup() {
self.embeddedView = NSBundle.mainBundle().loadNibNamed("EmbeddedView",owner:self,options:nil).lastObject as! UIView
self.addSubview(self.embeddedView)
self.embeddedView.frame = self.bounds
self.embeddedView.autoresizingMask = .FlexibleHeight | .FlexibleWidth
}
}
现在您可以使用故事板或代码中的代码定义视图，它会加载其 nib 定义的子视图（IB 中仍然没有实时预览）。
我能够解决这个问题，但解决方案有点棘手。值得争论的是获得的收益是否值得付出努力，但这是我纯粹在界面构建器中实现它的方式
首先我定义了一个名为 P2View
的自定义 UIView 子类
@IBDesignable class P2View: UIView
{
@IBOutlet private weak var titleLabel: UILabel!
@IBOutlet private weak var iconView: UIImageView!
@IBInspectable var title: String? {
didSet {
if titleLabel != nil {
titleLabel.text = title
}
}
}
@IBInspectable var image: UIImage? {
didSet {
if iconView != nil {
iconView.image = image
}
}
}
override init(frame: CGRect)
{
super.init(frame: frame)
awakeFromNib()
}
required init?(coder aDecoder: NSCoder)
{
super.init(coder: aDecoder)
}
override func awakeFromNib()
{
super.awakeFromNib()
let bundle = Bundle(for: type(of: self))
guard let view = bundle.loadNibNamed("P2View", owner: self, options: nil)?.first as? UIView else {
return
}
view.translatesAutoresizingMaskIntoConstraints = false
addSubview(view)
let bindings = ["view": view]
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat:"V:|-0-[view]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: bindings)
let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat:"H:|-0-[view]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: bindings)
addConstraints(verticalConstraints)
addConstraints(horizontalConstraints)
}
titleLabel.text = title
iconView.image = image
}
这是界面生成器中的样子
这就是我将此自定义视图嵌入故事板上定义的示例视图控制器的方式。 P2View 的属性在属性检查器中设置。
有3点值得一提
第一个：
加载笔尖时使用Bundle(for: type(of: self))。这是因为界面构建器在单独的进程中呈现可设计对象，该主包与您的主包不同。
第二个：
@IBInspectable var title: String? {
didSet {
if titleLabel != nil {
titleLabel.text = title
}
}
}
将 IBInspectables 与 IBOutlets 结合使用时，您必须记住 didSet 函数在 awakeFromNib 方法之前调用。因此，插座未初始化，此时您的应用程序可能会崩溃。不幸的是，您不能省略 didSet 函数，因为界面构建器不会呈现您的自定义视图，因此我们必须在此处留下它。
第三个：
titleLabel.text = title
iconView.image = image
我们必须以某种方式初始化我们的控件。当 didSet 函数被调用时我们无法做到这一点，所以我们必须使用存储在 IBInspectable 属性中的值并在 awakeFromNib 方法的末尾初始化它们。
这就是您如何在 Xib 上实现自定义视图、将其嵌入到情节提要中、在情节提要中对其进行配置、使其呈现并拥有一个不会崩溃的应用程序。它需要破解，但这是可能的。
我正在使用 Swift 和 Xcode 6.4 的价值。
所以我有一个视图控制器，它将包含一些多对 UILabel 和 UIImageView。我想将 UILabel-UIImageView 对放入自定义 UIView 中，这样我就可以简单地在上述视图控制器中重复使用相同的结构。 （我知道这可以转化为 UITableView，但为了~学习~请多多包涵）。事实证明这是一个比我想象的更复杂的过程，我在想出 "right" 方法来使这一切在 IB 中工作时遇到了麻烦。
目前我一直在 UIView subclass 和相应的 XIB 上挣扎，覆盖 init(frame:) 和 init(coder)，从 nib 加载视图并将其添加为子视图。到目前为止，这就是我在 Internet 上找到的 seen/read。 （大约是：http://iphonedev.tv/blog/2014/12/15/create-an-ibdesignable-uiview-subclass-with-code-from-an-xib-file-in-xcode-6）。
这给我带来了在 init(coder) 和从包中加载 nib 之间导致无限循环的问题。奇怪的是 none 这些文章或以前关于堆栈溢出的答案都提到了这个！
好的，所以我检查了 init(coder) 以查看是否已经添加了子视图。那个"solved"那个，貌似。但是，我开始 运行 遇到一个问题，当我尝试为它们分配值时，我的自定义视图插座为零。
我做了一个 didSet 并添加了一个断点来查看......它们肯定是在一个点上设置的，但是当我尝试修改标签的 textColor 时，那个标签是 nil . 我在这里有点扯头发。
可重用组件看起来像软件设计 101，但我觉得 Apple 在密谋反对我。我应该在这里使用容器 VCs 吗？我是否应该只是嵌套视图并在我的主 VC 中拥有大量愚蠢的出口？为什么这么复杂？为什么每个人的示例都不适合我？
想要的结果（假装整个是 VC，框是我想要的自定义 uiviews）：
感谢阅读。
以下是我自定义的 UIView 子class。在我的主故事板中，我将 UIViews 的 subclass 设置为它们的 class.
class StageCardView: UIView {
@IBOutlet weak private var stageLabel: UILabel! {
didSet {
NSLog("I will murder you %@", stageLabel)
}
}
@IBOutlet weak private var stageImage: UIImageView!
var stageName : String? {
didSet {
self.stageLabel.text = stageName
}
}
var imageName : String? {
didSet {
self.stageImage.image = UIImage(named: imageName!)
}
}
var textColor : UIColor? {
didSet {
self.stageLabel.textColor = textColor
}
}
var splatColor : UIColor? {
didSet {
let splatImage = UIImage(named: "backsplat")?.tintedImageWithColor(splatColor!)
self.backgroundColor = UIColor(patternImage: splatImage!)
}
}
// MARK: init
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
if self.subviews.count == 0 {
setup()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
func setup() {
if let view = NSBundle.mainBundle().loadNibNamed("StageCardView", owner: self, options: nil).first as? StageCardView {
view.frame = bounds
view.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
addSubview(view)
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
// Drawing code
}
*/
}
编辑： 这是我到目前为止能够得到的...
XIB:
结果：
问题：尝试访问标签或图像出口时，它们为零。在上述访问的断点处检查时，标签和图像子视图在那里，视图层次结构符合预期。
如果需要的话，我可以在代码中完成这一切，但我不太喜欢在代码中进行自动布局，所以如果有办法避免它，我宁愿不这样做！
EDIT/QUESTION 移动：
我想出了如何让出口不再为零。
来自这个 SO 答案的灵感：Loaded nib but the view outlet was not set - new to InterfaceBuilder 除了我没有分配视图插座，我分配了各个组件插座。
现在我只是在墙上扔屎，看看它是否会粘住。有谁知道我为什么必须这样做？这是什么黑魔法？
关于视图重用的一般建议
你说得对，可重用和可组合的元素是软件 101。Interface Builder 不太擅长它。
具体来说，xibs 和故事板是通过重用在代码中定义的视图来定义视图的好方法。但是它们对于定义您自己希望在 xib 和故事板中重复使用的视图不是很好。 （可以做到，但属于进阶练习。）
所以，这是一条经验法则。如果您正在定义要从代码中重用的视图，请按照您的意愿进行定义。但是，如果您要定义一个视图，希望能够在故事板中重复使用，请在代码中定义该视图。
所以在你的情况下，如果你试图定义一个你想从情节提要中重复使用的自定义视图，我会用代码来完成。如果你对通过 xib 定义你的视图死心塌地，那么我会在代码中定义一个视图，并在它的初始化程序中让它初始化你的 xib 定义的视图并将其配置为子视图。
在这种情况下的建议
以下是您在代码中定义视图的大致方式：
class StageCardView: UIView {
var stageLabel = UILabel(frame:CGRectZero)
var stageImage = UIImageView(frame:CGRectZero)
override init(frame:CGRect) {
super.init(frame:frame)
setup()
}
required init(coder aDecoder:NSCoder) {
super.init(coder:aDecoder)
setup()
}
private func setup() {
stageImage.image = UIImage(named:"backsplat")
self.addSubview(stageLabel)
self.addSubview(stageImage)
// configure the initial layout of your subviews here.
}
}
您现在可以在代码中或通过情节提要对其进行实例化，但您无法在 Interface Builder 中按原样获得实时预览。
或者，通过将 xib 定义的视图嵌入到代码定义的视图中，您可以大致定义基于 xib 的可重用视图：
class StageCardView: UIView {
var embeddedView:EmbeddedView!
override init(frame:CGRect) {
super.init(frame:frame)
setup()
}
required init(coder aDecoder:NSCoder) {
super.init(coder:aDecoder)
setup()
}
private func setup() {
self.embeddedView = NSBundle.mainBundle().loadNibNamed("EmbeddedView",owner:self,options:nil).lastObject as! UIView
self.addSubview(self.embeddedView)
self.embeddedView.frame = self.bounds
self.embeddedView.autoresizingMask = .FlexibleHeight | .FlexibleWidth
}
}
现在您可以使用故事板或代码中的代码定义视图，它会加载其 nib 定义的子视图（IB 中仍然没有实时预览）。
我能够解决这个问题，但解决方案有点棘手。值得争论的是获得的收益是否值得付出努力，但这是我纯粹在界面构建器中实现它的方式
首先我定义了一个名为 P2View
UIView 子类
@IBDesignable class P2View: UIView
{
@IBOutlet private weak var titleLabel: UILabel!
@IBOutlet private weak var iconView: UIImageView!
@IBInspectable var title: String? {
didSet {
if titleLabel != nil {
titleLabel.text = title
}
}
}
@IBInspectable var image: UIImage? {
didSet {
if iconView != nil {
iconView.image = image
}
}
}
override init(frame: CGRect)
{
super.init(frame: frame)
awakeFromNib()
}
required init?(coder aDecoder: NSCoder)
{
super.init(coder: aDecoder)
}
override func awakeFromNib()
{
super.awakeFromNib()
let bundle = Bundle(for: type(of: self))
guard let view = bundle.loadNibNamed("P2View", owner: self, options: nil)?.first as? UIView else {
return
}
view.translatesAutoresizingMaskIntoConstraints = false
addSubview(view)
let bindings = ["view": view]
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat:"V:|-0-[view]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: bindings)
let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat:"H:|-0-[view]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: bindings)
addConstraints(verticalConstraints)
addConstraints(horizontalConstraints)
}
titleLabel.text = title
iconView.image = image
}
这是界面生成器中的样子
这就是我将此自定义视图嵌入故事板上定义的示例视图控制器的方式。 P2View 的属性在属性检查器中设置。
有3点值得一提
第一个：
加载笔尖时使用Bundle(for: type(of: self))。这是因为界面构建器在单独的进程中呈现可设计对象，该主包与您的主包不同。
第二个：
@IBInspectable var title: String? {
didSet {
if titleLabel != nil {
titleLabel.text = title
}
}
}
将 IBInspectables 与 IBOutlets 结合使用时，您必须记住 didSet 函数在 awakeFromNib 方法之前调用。因此，插座未初始化，此时您的应用程序可能会崩溃。不幸的是，您不能省略 didSet 函数，因为界面构建器不会呈现您的自定义视图，因此我们必须在此处留下它。
第三个：
titleLabel.text = title
iconView.image = image
我们必须以某种方式初始化我们的控件。当 didSet 函数被调用时我们无法做到这一点，所以我们必须使用存储在 IBInspectable 属性中的值并在 awakeFromNib 方法的末尾初始化它们。
这就是您如何在 Xib 上实现自定义视图、将其嵌入到情节提要中、在情节提要中对其进行配置、使其呈现并拥有一个不会崩溃的应用程序。它需要破解，但这是可能的。