How to draw a simple rounded rect in swift (rounded corners)
44,015
Solution 1
//Put this code in ur drawRect
Objective - C
- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGPathRef clippath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x,y, width, height) cornerRadius:6].CGPath;
CGContextAddPath(ctx, clippath);
CGContextSetFillColorWithColor(ctx, self.color.CGColor);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
[self.color set];
[_path closePath]; // Implicitly does a line between p4 and p1
[_path fill]; // If you want it filled, or...
[_path stroke]; // ...if you want to draw the outline.
CGContextRestoreGState(ctx);
}
Swift 3
func drawRect(rect : CGRect)
{
// Size of rounded rectangle
let rectWidth = rect.width
let rectHeight = rect.height
// Find center of actual frame to set rectangle in middle
let xf:CGFloat = (self.frame.width - rectWidth) / 2
let yf:CGFloat = (self.frame.height - rectHeight) / 2
let ctx: CGContext = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight)
let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath
ctx.addPath(clipPath)
ctx.setFillColor(rectBgColor.cgColor)
ctx.closePath()
ctx.fillPath()
ctx.restoreGState()
}
Solution 2
How to create a rounded corner rectangle using BezierPath
var roundRect = UIBezierPath(roundedRect: <CGRect>, byRoundingCorners: <UIRectCorner>, cornerRadii: <CGSize>)
Or for an example with values:
var roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(16.f, 16.f))
Swift 5
var roundRect = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 100), byRoundingCorners:.allCorners, cornerRadii: CGSize(width: 16.0, height: 16.0))
Solution 3
@muku answer in Swift 4.x+:
override func draw(_ rect: CGRect) {
super.draw(rect)
let clipPath = UIBezierPath(roundedRect: rect, cornerRadius: 6.0).cgPath
let ctx = UIGraphicsGetCurrentContext()!
ctx.addPath(clipPath)
ctx.setFillColor(UIColor.red.cgColor)
ctx.closePath()
ctx.fillPath()
}
Solution 4
Swift 5, 4
iOS 11
override func draw(_ rect: CGRect) {
super.draw(rect)
guard let context = UIGraphicsGetCurrentContext() else { return }
context.saveGState()
defer { context.restoreGState() }
let path = UIBezierPath(
roundedRect: rect,
byRoundingCorners: [.topLeft, .topRight],
cornerRadii: CGSize(width: 4, height: 4)
)
context.addPath(path.cgPath)
context.closePath()
context.setStrokeColor(UIColor.red.cgColor)
context.strokePath()
}
Solution 5
SWIFT 3.x + 4.0 I've modified the example for Swift 3 and added few lines to centralise the rectangle in the UIView
func roundRect()
{
// Size of rounded rectangle
let rectWidth:CGFloat = 100
let rectHeight:CGFloat = 80
// Find center of actual frame to set rectangle in middle
let xf:CGFloat = (self.frame.width - rectWidth) / 2
let yf:CGFloat = (self.frame.height - rectHeight) / 2
let ctx: CGContext = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight)
let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath
ctx.addPath(clipPath)
ctx.setFillColor(rectBgColor.cgColor)
ctx.closePath()
ctx.fillPath()
ctx.restoreGState()
}
Full code with screenshots is available on: http://lab.dejaworks.com/uiview-with-rounded-background-designable-in-storyboard/
Related videos on Youtube
Author by
mcfly soft
Updated on July 25, 2021Comments
-
mcfly soft almost 3 years
I managed to draw a rect :-) But I don't know how to draw a rounded rect.
Can someone help me out with the following code how to round the rect?
let canvas = UIGraphicsGetCurrentContext() rec = CGRectMake(0, 0, 40, 40); //var maskPath = UIBezierPath(roundedRect: rec, byRoundingCorners: .BottomLeft | .BottomRight, cornerRadii: CGSize(width: 3, height: 3)) CGContextAddRect(canvas, rec); CGContextFillPath(canvas);
-
Nikunj almost 9 yearsRefer this Link: stackoverflow.com/questions/25591389/β¦
-
mcfly soft almost 9 yearsThanks, but this is reffering to rounded UIView and a rect in it. I really would like to round the rect itself.
-
Icaro almost 9 yearsI edit the content of my post I believe that it is what you are looking for now.
-
-
mcfly soft almost 9 yearsThats not what I am looking for. You do something with an UIImageView.
-
mcfly soft almost 9 yearsI tried to translate this in swift, but I get error with converting UIBezierPath to CGPath. Could you please add missing statement in my existing code ?
-
Mukesh almost 9 yearsclippath=(UIBezierPath(roundedRect: CGRectMake(0, 0, 0, 0), cornerRadius: 0)).CGPath
-
mcfly soft almost 9 yearsPerfect. Thanks a lot. Thats what I looked for.
-
mcfly soft almost 9 yearsThanks a lot . I upvoted yours, because its the correct answer. I accepted mukus answer, because he was faster in replying. Thanks
-
Trevor over 7 years@AbdulYasin "not so surprising" pardon ? if you don't have any basic skill, you can't blame other for this. I've added a link with working code and screenshots. You can check and see what is not working for you. Regards.
-
ixany almost 7 years@Trevor Great work, thank you! However, I am wondering if itβs possible to extend your solution so that every corner can have a different radius?
-
datWooWoo almost 7 yearsMagic variable _path in solution
-
William T. Mallard over 6 yearsCGPath is now cgPath
-
Aaron Halvorsen about 6 yearsthis is not swift 4.
-
Papon Smc over 4 yearslet ctx = UIGraphicsGetCurrentContext()! ------------- when build is nil value how to fix
-
Papon Smc over 4 yearslet ctx: CGContext = UIGraphicsGetCurrentContext()! ------------- when build is nil value how to fix
-
MegaManX over 3 yearsSimplest solution