Custom UIView with IBDesignable UIView inside not showing in app

228 Views Asked by At

I'm trying to create a UIView with this style:

enter image description here

I made the circles using an @IBDesignable class, using the code in this answer:

import UIKit

@IBDesignable
class CircleView: UIView {
    private var shapeLayer = CAShapeLayer()
    @IBInspectable var fillColor: UIColor = .blue {
        didSet {
            shapeLayer.fillColor = fillColor.cgColor
        }
    }

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        shapeLayer.fillColor = fillColor.cgColor
        layer.addSublayer(shapeLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        shapeLayer.path = UIBezierPath(ovalIn: bounds).cgPath
    }
}

So, I made another UIView, let's call it DotsView that contains both the UILabel on top, and a horizontal UIStackView, when I'm on that xib file, the circles are showing up correctly.

Then in my UIStoryboard I have a UIViewController, where I place my custom UIView (DotsView), and set its class to it, on both the xib for DotsView as well as the storyboard, like so:

enter image description here

And while I know, the dots aren't going to show up on the storyboard as they are "wrapped" in my DotsView, they should appear on my simulator when run, which isn't the case.

Am I missing something in order to show this custom view?

This is the DotsView class, nothing removed:

import UIKit

class DotsView: UIView {
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var titleLabel: UILabel!
    
    @IBOutlet weak var firstDigitDot: CircleView!
    @IBOutlet weak var secondDigitDot: CircleView!
    @IBOutlet weak var thirdDigitDot: CircleView!
    @IBOutlet weak var fourthDigitDot: CircleView!
    
    //initWithFrame to init view from code
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
      
    //initWithCode to init view from xib or storyboard
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
      
    //common func to init our view
    private func setupView() {
        Bundle.main.loadNibNamed("DotsView", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
    }
}

I edited the above code for the DotsView, according to this tutorial.

But now, the app is crashing:

Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<NSObject 0x600003120ca0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key contentView.'
terminating with uncaught exception of type NSException

I have set my File's owner to the DotsView, but I'm unsure on why this is happening now

My xib's file name is DotsView.xib as well

0

There are 0 best solutions below