how to corner Radius some edges in IBInspectable in swift 4?

Question

so here is the code that is working well

let path = UIBezierPath(roundedRect:viewToRound.bounds,
                    byRoundingCorners:[.topRight, .bottomLeft],
                    cornerRadii: CGSize(width: 20, height:  20))

let maskLayer = CAShapeLayer()

maskLayer.path = path.cgPath
viewToRound.layer.mask = maskLayer

But I need to use this many times in my codes So I created the class for view and want to use this in IBInspectable to be optional each edges to change the corners radiuses in story Board so I used this But it does not shown in story board

@IBInspectable
open var cornerEdges: CGSize {
    get {
        let path = UIBezierPath(roundedRect:self.bounds,
                                byRoundingCorners:[.topRight, .bottomLeft],
                                cornerRadii: CGSize(width: 20, height:  20))

        let maskLayer = CAShapeLayer()

        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
        return maskLayer.path as! CGSize
    }
    set(value) {
        maskLayer.path = value
    }
}

so what should I do for doing this in my codes ?

Prashant Tukadiya · Accepted Answer · 2018-07-24T06:12:25.557

3

Just Change your class to @IBDesignable to see in storyboard

Like

@IBDesignable // Add this to your class
class PlusButton: AnyUIClass { }

You can see it in storyboard

how to Get corners and radius from storybaord

Here is a sample code

@IBInspectable
open var cornerEdges: CGSize = CGSize(width: 20, height: 20)
@IBInspectable  var topLeft: Bool = true
@IBInspectable  var topRight: Bool = true
@IBInspectable  var bottomLeft: Bool = true
@IBInspectable  var bottomRight: Bool = true

override func awakeFromNib() {

    var options = UIRectCorner()
    if topLeft {
       options =  options.union(.topLeft)
    }
    if topRight {
       options =  options.union(.topRight)
    }
    if bottomLeft {
      options =  options.union(.bottomLeft)
    }
    if bottomRight {
      options =  options.union(.bottomRight)
    }


    let path = UIBezierPath(roundedRect:self.bounds,
                            byRoundingCorners:options,
                            cornerRadii: self.cornerEdges)

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    self.layer.mask = maskLayer
}

edited Jul 24 '18 at 06:12

answered Jul 24 '18 at 05:23

Prashant Tukadiya

15,838
4
62
98

I will see this error after using your code Use of unresolved identifier 'maskLayer' – Saeed Rahmatolahi Jul 24 '18 at 05:30
@SaeedRahmatolahi That is the same code you have posted in question . – Prashant Tukadiya Jul 24 '18 at 05:32
@SaeedRahmatolahi I suggest you to don't use get - set block here instead you can apply mask path in awakeFromNib method – Prashant Tukadiya Jul 24 '18 at 05:33
I have a class that do many things and use it many times in my app I want to use this in that class so I need to just use this as I mentioned in the question – Saeed Rahmatolahi Jul 24 '18 at 05:36
@SaeedRahmatolahi Okay What are the dynamic values I mean that required on runtime ? like corner radius – Prashant Tukadiya Jul 24 '18 at 05:38
edge corners for example I can set right top corner - left top corner - left bottom corner and right bottom corner so I need four edges corner in story board – Saeed Rahmatolahi Jul 24 '18 at 05:42
@SaeedRahmatolahi You can't take Drop down there. You have to create 4 Bool property that will be used to identify which corner need to apply the radius – Prashant Tukadiya Jul 24 '18 at 05:44
ok please tell me what for one corner I will do that for the rest corners – Saeed Rahmatolahi Jul 24 '18 at 05:45
that's not exactly what I wanted But this will help me for now thank you – Saeed Rahmatolahi Jul 24 '18 at 06:19
@SaeedRahmatolahi What you need then ? As I told you , You can't have corners in to the storyboard it is not supported this is best solution known :D=) – Prashant Tukadiya Jul 24 '18 at 06:26
no this is good thanks I wanted to do corners for each edges different for example top edge corner Radius 10 and top right corner Radius 5 and in story board don't see the width and height just see one number to change the corner But this is working thanks – Saeed Rahmatolahi Jul 24 '18 at 06:28
@SaeedRahmatolahi I wonder this is possible or not will update you if found anything :) – Prashant Tukadiya Jul 24 '18 at 06:31
thanks man I think it's possible to get one number in story board and use it in the class for both width and height – Saeed Rahmatolahi Jul 24 '18 at 06:32
I have changed the open var to Int open var cornerEdges : Int = 0 and defined new variable in codes var edge : CGSize = CGSize(width: cornerEdges, height: cornerEdges) and use edge value in every where instead of cornerEdges But this will show me error Value of type 'RoundButton' has no member 'edge' – Saeed Rahmatolahi Jul 24 '18 at 06:37
I have found that is the solution I will answer my question thanks for helping – Saeed Rahmatolahi Jul 24 '18 at 06:43

score 1 · Answer 2 · answered Jul 24 '18 at 06:45

so if you want to change both height and width edge corner you can use @PrashantTukadiya answer But if you want to just set a number for corner you can use this code

 @IBInspectable
open var cornerEdges : CGFloat = 0
@IBInspectable  var topLeft: Bool = false
@IBInspectable  var topRight: Bool = false
@IBInspectable  var bottomLeft: Bool = false
@IBInspectable  var bottomRight: Bool = false
 override func awakeFromNib() {
    super.awakeFromNib()

    var options = UIRectCorner()
    if topLeft {
        options =  options.union(.topLeft)
    }
    if topRight {
        options =  options.union(.topRight)
    }
    if bottomLeft {
        options =  options.union(.bottomLeft)
    }
    if bottomRight {
        options =  options.union(.bottomRight)
    }


    let path = UIBezierPath(roundedRect:self.bounds,
                            byRoundingCorners:options,
                            cornerRadii: CGSize(width: self.cornerEdges, height: self.cornerEdges))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    self.layer.mask = maskLayer
}

thanks for your helping now one more thing that is not important is how to change each edges corner different from the others — Saeed Rahmatolahi, Jul 24 '18 at 06:58
so there is a problem here after using this class in my codes in iPhone every things working well but in iPad the right top corner does not work @PrashantTukadiya — Saeed Rahmatolahi, Jul 25 '18 at 08:51

how to corner Radius some edges in IBInspectable in swift 4?

2 Answers2

how to Get corners and radius from storybaord