xcodeinterface-builderibdesignableibinspectable

How does the interface builder decide when a separator will be introduced when using IBInspectable


Right now I'm creating a custom view and I'm wondering how the interface builder decides when a line is introduced.

enter image description here

as you can see it divides it into 3 sub groups However I'm wondering how it is decided where a subgroup starts and ends.

Because all I did was create the IBInspectables underneath each other like this.

@IBInspectable var dotCount: Int = 0 { didSet { setup() } }

@IBInspectable var dotSize: CGFloat = 7 { didSet { dotSize = dotSize + 1.5 } }

@IBInspectable var dotSpacing: CGFloat = 10

@IBInspectable var dotColor: UIColor = UIColor.clear {
    didSet {
        for dot in dots {
            if let dot = dot, dot != selectedView {
                dot.backgroundColor = dotColor
            }
        }
    }
}

@IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        for dot in dots {
            if let dot = dot, dot != selectedView {
                dot.layer.borderWidth = borderWidth
            }
        }
    }
}

@IBInspectable var borderColor: UIColor = UIColor.clear {
    didSet {
        for dot in dots {
            if let dot = dot, dot != selectedView {
                dot.layer.borderColor = borderColor.cgColor
            }
        }
    }
}

@IBInspectable var dotSelectedColor: UIColor = UIColor.black {
    didSet {
        if let dot = selectedView {
            dot.backgroundColor = dotSelectedColor
        }
    }
}

@IBInspectable var dotSelectedBorderColor: UIColor = UIColor.clear {
    didSet {
        if let dot = selectedView {
            dot.layer.borderColor = dotSelectedBorderColor.cgColor
        }
    }
}

@IBInspectable var dotSelectedBorderWidth: CGFloat = 0.0 {
    didSet {
        if let dot = selectedView {
            dot.layer.borderWidth = dotSelectedBorderWidth
        }
    }
}

I'm just curious as how this works since I do believe it is useful to divide the elements in a certain way.

Hopefully someone will be able to tell me how this works exactly.


Solution

  • It gets sorted and separated by name, so you don't explicitly define a separator line e.g:

    @IBInspectable var cornerRadius: CGFloat = 0 {
       didSet {
           layer.cornerRadius = cornerRadius
           layer.masksToBounds = cornerRadius > 0
       }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
       didSet {
           layer.borderWidth = borderWidth
       }
    }
    
    @IBInspectable var borderColor: UIColor? {
       didSet {
           layer.borderColor = borderColor?.CGColor
       }
    }
    

    IB

    As You can see corner radius is separated from the border properties because the border properties have the same prefix: Border <subject>.