Giving UIView rounded corners
Try this
#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now :)
...
view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;
Note: If you are trying to apply rounded corners to a UIViewController
's view, it should not be applied in the view controller's constructor, but rather in -viewDidLoad
, after view
is actually instantiated.
How to set cornerRadius for only top-left and top-right corner of a UIView?
Pay attention to the fact that if you have layout constraints attached to it, you must refresh this as follows in your UIView subclass:
override func layoutSubviews() {
super.layoutSubviews()
roundCorners(corners: [.topLeft, .topRight], radius: 3.0)
}
If you don't do that it won't show up.
And to round corners, use the extension:
extension UIView {
func roundCorners(corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
layer.mask = mask
}
}
Additional view controller case: Whether you can't or wouldn't want to subclass a view, you can still round a view. Do it from its view controller by overriding the viewWillLayoutSubviews()
function, as follows:
class MyVC: UIViewController {
/// The view to round the top-left and top-right hand corners
let theView: UIView = {
let v = UIView(frame: CGRect(x: 10, y: 10, width: 200, height: 200))
v.backgroundColor = .red
return v
}()
override func loadView() {
super.loadView()
view.addSubview(theView)
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
// Call the roundCorners() func right there.
theView.roundCorners(corners: [.topLeft, .topRight], radius: 30)
}
}
Rounded Corners only on Top of a UIView
You can do this by setting a mask
on your view's layer:
CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii: (CGSize){10.0, 10.}].CGPath;
self.layer.mask = maskLayer;
IMPORTANT: You should do this in your view's layoutSubviews()
method, so the view has already been resized from the storyboard
In Swift <= 1.2
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: .TopLeft | .TopRight, cornerRadii: CGSize(width: 10.0, height: 10.0)).CGPath
layer.mask = maskLayer
Swift 2.x
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: UIRectCorner.TopLeft.union(.TopRight), cornerRadii: CGSizeMake(10, 10)).CGPath
layer.mask = maskLayer
Swift 3.x
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10, height: 10)).cgPath
layer.mask = maskLayer
How to set UIView mask with corner radius, border and shadow?
Heh, just half hour later I managed to find solution to my own problem:
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: radius, height: radius))
let frameLayer = CAShapeLayer()
frameLayer.path = path.cgPath
frameLayer.shadowPath = path.cgPath
frameLayer.lineWidth = borderWidth
frameLayer.strokeColor = borderColor.cgColor
frameLayer.fillColor = backgroundColor?.cgColor
frameLayer.shadowOffset = shadowOffset
frameLayer.shadowOpacity = shadowOpacity
frameLayer.shadowRadius = shadowRadius
frameLayer.shadowColor = shadowColor.cgColor
layer.mask = frameLayer
layer.insertSublayer(frameLayer, at: 0)
How to set corner radius of imageView?
Layer draws out of clip region, you need to set it to mask to bounds:
self.mainImageView.layer.masksToBounds = true
From the docs:
By default, the corner radius does not apply to the image in the
layer’s contents property; it applies only to the background color and
border of the layer. However, setting the masksToBounds property to
true causes the content to be clipped to the rounded corners
Different cornerRadius for each corner Swift 3 - iOS
You could set the default layer.cornerRadius
to the smallest value and then set the layer mask's border to the bigger value.
let demoView = UIView(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
demoView.backgroundColor = UIColor.red
demoView.layer.cornerRadius = 3.0
let maskPath = UIBezierPath(roundedRect: demoView.bounds,
byRoundingCorners: [.topLeft, .topRight, .bottomLeft],
cornerRadii: CGSize(width: 18.0, height: 0.0))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
demoView.layer.mask = maskLayer
view.addSubview(demoView)
Round two corners in UIView
CACornerMask introduced in iOS 11, which help to define topleft, topright, bottomleft, bottom right in view layer. Below is example to use.
Here I try to rounded only two top corner:
myView.clipsToBounds = true
myView.layer.cornerRadius = 10
myView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
FYI Ref:
UIView with shadow, rounded corners and custom drawRect
This is a tricky one. UIView
's clipsToBounds
is necessary to get the rounded corners. But CALayer
's masksToBounds
has to be false
so the shadow is visible. Somehow, everything works if drawRect
is not overridden, but actually it shouldn't.
The solution is to create a superview to provide the shadow (in the demonstration below this is the shadowView
). You can test the following in Playground:
class MyView : UIView {
override func drawRect(rect: CGRect) {
let c = UIGraphicsGetCurrentContext()
CGContextAddRect(c, CGRectMake(10, 10, 80, 80))
CGContextSetStrokeColorWithColor(c , UIColor.redColor().CGColor)
CGContextStrokePath(c)
}
}
let superview = UIView(frame: CGRectMake(0, 0, 200, 200))
let shadowView = UIView(frame: CGRectMake(50, 50, 100, 100))
shadowView.layer.shadowColor = UIColor.blackColor().CGColor
shadowView.layer.shadowOffset = CGSizeZero
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 5
let view = MyView(frame: shadowView.bounds)
view.backgroundColor = UIColor.whiteColor()
view.layer.cornerRadius = 10.0
view.layer.borderColor = UIColor.grayColor().CGColor
view.layer.borderWidth = 0.5
view.clipsToBounds = true
shadowView.addSubview(view)
superview.addSubview(shadowView)
Result:
Related Topics
Multiple Checkmark When Row Selected in Uitableview iOS
Titletextattributes Uiappearance Font in iOS 7
How to Activate Tcp Keepalive on Apple iOS Devices
App Crashes After Executing Background Fetch Completionhandler
How to Delete a Child from Firebase (Swift)
How to Wait for Method That Has Completion Block (All on Main Thread)
Is It Just the iPhone Simulator That Is Restricted to Intel Only MAC'S
Swrevealviewcontroller - Manually Switch to Another View
Uitableviewcell Selected Background Color on Multiple Selection
Change the Alpha Value of the Navigation Bar
How to List (Almost) All Emojis in Swift for iOS 8 Without Using Any Form of Lookup Tables
Calling Function from Another Viewcontroller in Swift
How to Upload Video to Server from Iphone
What's Currently the "Correct" Way to Set a Uiview's Corner Radius
Create Ssl Connection Using Certificate
Malloc Error "Can't Allocate Region" Failed with Error Code 12. Any Idea How to Resolve This