Here corner is working but shadow is not work in iOS 9 and 10 - ios

Here corner is working but shadow is not work in iOS 9 and 10
and iOS 11 both are working fine
viewBlueMe.chatCellDesign([.topLeft,.bottomLeft,.topRight], [.layerMinXMinYCorner,.layerMinXMaxYCorner,.layerMaxXMinYCorner], radius: 5)
extenstion :
extension UIView {
func chatCellDesign(_ corners:UIRectCorner,_ cormerMask:CACornerMask, radius: CGFloat) {
if #available(iOS 11.0, *){
self.clipsToBounds = false
self.layer.cornerRadius = radius
self.layer.maskedCorners = cormerMask
self.layer.shadowColor = UIColor.gray.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowOffset = CGSize.zero
self.layer.shadowRadius = 5
}else{
let rectShape = CAShapeLayer()
rectShape.bounds = self.frame
rectShape.position = self.center
rectShape.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
self.layer.mask = rectShape
// FIXME: THIS CODE IS NOT WORK
self.layer.shadowColor = UIColor.gray.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowOffset = CGSize.zero
self.layer.shadowRadius = 5
}
}
}
i need this type of output in iOS 9 and 10 also this is iOS11
Thanks in advance

Create one outerview and place your UILabel inside it, and please find below details,
outerView.layer.cornerRadius = 5.0
outerView.layer.shadowColor = UIColor.black.cgColor
outerView.layer.shadowOffset = CGSize.zero
outerView.layer.shadowOpacity = 0.2
outerView.layer.shadowRadius = 5.0
UPDATE
See below image,
and this is IBOutlets
#IBOutlet weak var tmpView: UIView!
#IBOutlet weak var innerView: UIView!
You can do this way,
innerView.roundCorners([.topLeft, .topRight, .bottomLeft], radius: 5)
tmpView.layer.shadowColor = UIColor.black.cgColor
tmpView.layer.shadowOffset = CGSize.zero
tmpView.layer.shadowOpacity = 0.2
tmpView.layer.shadowRadius = 10.0
Find UIView extension here,
extension UIView {
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
this will give you below output,
FYI. Play around shadow property for exact output you want.

Related

How to round corners top left + top right corners for iOS 9

I'm trying to round the top and left corners but know how to do it for iOS 11+ (cause of the easiest new feature) but can't do that for iOS 9-, could be cool if u guys could help me with that :)
Here's an image of how it looks like now without rounding -
for example for iOS 11+, I do it like this -
layer.maskedCorners = [
.layerMinXMaxYCorner,
.layerMaxXMaxYCorner
]
layer.cornerCurve = .continuous
Make a UIView extension and add the below method in it:
extension UIView {
func roundCorners(corners: UIRectCorner, radius: CGFloat) {
DispatchQueue.main.async {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.frame = self.bounds
mask.path = path.cgPath
self.layer.mask = mask
}
}
}
And then you can round corner radius of any views from any sides.
Example:
anyView.roundCorners(corners: [.topRight, .bottomLeft, .bottomRight], radius: 20)
Note: Don't forget to set the clipsToBounds property of the view to true before using this method. Happy Coding :)
Write this method and put it wherever you need, for example in viewDidLoad:
private let cornerRadius: CGFloat = 10
private func setMaskLayers() {
if #available(iOS 11.0, *) {
yourView.clipsToBounds = true
yourView.layer.cornerRadius = cornerRadius
yourView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
} else {
let path = UIBezierPath(roundedRect: yourView.bounds, byRoundingCorners: [.topRight, .topLeft], cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
yourView.layer.mask = maskLayer
}
}

UIView Custom Class trigger either shadow or roundCorners/addCornerRadius but not both in swift 3 [duplicate]

This question already has answers here:
UIView with rounded corners and drop shadow?
(35 answers)
Closed 4 years ago.
UIView Custom Class trigger only shadow. I want to display both shadow and rounded corner for specific edges.Here is my code. Any suggestions would be appreciated.
extension UIView {
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
class CustomView: UIView {
override func layoutSubviews() {
self.shadowColor = UIColor.darkGray
self.shadowOffset = CGSize(width: 4, height: 4)
self.shadowOpacity = 0.5
self.shadowRadius = 6.0
//only rounded corners triggered in UI
self.backgroundColor = UIColor.white
self.roundCorners(corners: [.topRight, .bottomRight], radius: 15.0)
}
}
Thanks in advance
Use separate views for the shadow and the border. The base view is transparent and has the shadow. The border view clips any other subcontent that it has to its borders. See the code below.
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
Use this function:-
func addShadow(view: UIView, corner: CGFloat) {
view.layer.shadowColor = UIColor.gray.cgColor
view.layer.shadowOpacity = 0.5
view.layer.shadowRadius = 2
view.layer.shadowOffset = CGSize(width: 1, height: 1)
view.layer.masksToBounds = false
view.layer.cornerRadius = corner
}

How To Add Border To a UIView With Mask?

Here's what I need to do to my two buttons.
and here's what I got right now.
What I'm doing:
- Set these up in IB inside a stackView.
- Add masks
- Add borders with width and color
- Add shadow.
The borders are being added but being cut-off as well by the masks.
Codes:
public func addCornerRadiusToCorners(
_ corners: UIRectCorner,
cornerRadius: CGFloat,
borderColor: UIColor,
borderWidth: CGFloat) {
// self.layer.masksToBounds = true
// self.clipsToBounds = true
self.layer.borderWidth = borderWidth
self.layer.borderColor = borderColor.cgColor
let size = CGSize(width: cornerRadius, height: cornerRadius)
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
public func addDefaultShadow() {
let shadowPath = UIBezierPath(rect: self.bounds)
self.layer.masksToBounds = false
self.layer.shadowOffset = CGSize(width: 1, height: 1)
self.layer.shadowOpacity = 0.5
self.layer.shadowPath = shadowPath.cgPath
}
Any idea how to achieve the result in the first photo?
EDIT: the border is being cut, the result was just got from the UI Debugger of Xcode. Sorry.
Add corner radius to you view on viewDidAppear
#IBOutlet weak var segmentView: UIView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
segmentView.layer.cornerRadius = segmentView.frame.size.height/2;
segmentView.layer.borderWidth = 1.0;
segmentView.clipsToBounds = true
segmentView.layer.borderColor = UIColor.lightGray.cgColor
segmentView.layer.shadowColor = UIColor.black.cgColor
segmentView.layer.shadowOpacity = 0.2
segmentView.layer.shadowRadius = 10.0
segmentView.layer.shadowOffset = CGSize(width: 1, height: 1)
segmentView.layer.masksToBounds = false
}
Sample Output:
you forgot to clip ur view.
self.clipsToBounds = true
you need to set maskstobounds to the view layer
segmentView.layer.masksToBounds = true

Add a shadow with CAShapeLayer?

I have a CAShapeLayer with bottom rounded corners only. What I want is to add a shadow at the bottom, but it's not working, even though the code looks obviously right. All it does it round the bottom corners but I don't see a shadow.
let shapeLayer = CAShapeLayer()
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shapeLayer.path = path
shapeLayer.shadowColor = UIColor(r: 233, g: 233, b: 233).cgColor
shapeLayer.shadowOffset = CGSize(width: 0.0, height: 2.8)
shapeLayer.shadowOpacity = 1.0
shapeLayer.shadowRadius = 0.0
shapeLayer.shouldRasterize = true
shapeLayer.rasterizationScale = UIScreen.main.scale
layer.rasterizationScale = UIScreen.main.scale
layer.mask = shapeLayer
The shapeLayer is rounding the corners of your view because it's set as the layer's mask. You probably want to add it as a sublayer instead.
Old:
layer.mask = shapeLayer
New:
layer.addSublayer(shapeLayer)
I wrote another answer about adding a shadow to a view with rounded corners here if it helps: https://stackoverflow.com/a/41475658/6658553
Another solution,
The following UIView extension will work with any shape you mask the view with
extension UIView {
func addShadow() {
self.backgroundColor = UIColor.clear
let roundedShapeLayer = CAShapeLayer()
let roundedMaskPath = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: [.topLeft, .bottomLeft, .bottomRight],
cornerRadii: CGSize(width: 8, height: 8))
roundedShapeLayer.frame = self.bounds
roundedShapeLayer.fillColor = UIColor.white.cgColor
roundedShapeLayer.path = roundedMaskPath.cgPath
self.layer.insertSublayer(roundedShapeLayer, at: 0)
self.layer.shadowOpacity = 0.4
self.layer.shadowOffset = CGSize(width: -0.1, height: 4)
self.layer.shadowRadius = 3
self.layer.shadowColor = UIColor.lightGray.cgColor
}
}

Round Top Corners of a UIButton in Swift

I know I can round all four corners using:
myBtn.layer.cornerRadius = 8
myBtn.layer.masksToBounds = true
Since I only want to round two, I did some research and found this:
extension UIView {
func roundCorners(corners:UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.CGPath
self.layer.mask = mask
}
}
Which is called like this:
view.roundCorners([.TopLeft , .TopRight], radius: 10)
Yet this doesn't work for a UIButton. When I switch the extension to be for type UIButton and pass it a button , the output looks like this:
The question is, how do I adapt this to work on a UIButton?
Swift 4: For latest iOS 11 onwards
override func viewDidLoad() {
super.viewDidLoad()
if #available(iOS 11.0, *) {
self.viewToRound.clipsToBounds = true
viewToRound.layer.cornerRadius = 20
viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
} else {
// Fallback on earlier versions
}
}
Earlier iOS (10,9 etc) Versions (works for iOS 11 too)
override func viewDidLayoutSubviews() {
self.viewToRound.clipsToBounds = true
let path = UIBezierPath(roundedRect: viewToRound.bounds,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 20, height: 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
viewToRound.layer.mask = maskLayer
}
Adding Extension of UIButton:
extension UIButton{
func roundedButton(){
let maskPath1 = UIBezierPath(roundedRect: bounds,
byRoundingCorners: [.topLeft , .topRight],
cornerRadii: CGSize(width: 8, height: 8))
let maskLayer1 = CAShapeLayer()
maskLayer1.frame = bounds
maskLayer1.path = maskPath1.cgPath
layer.mask = maskLayer1
}
}
Calling in viewDidAppear/viewDidLayoutSubviews:
btnCorner.roundedButton()
Button Corner OutPut:
For swift 3 Kirit Modi's answer is changed to:
extension UIButton {
func roundedButton(){
let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: [.topLeft , .topRight],
cornerRadii:CGSize(width:8.0, height:8.0))
let maskLayer1 = CAShapeLayer()
maskLayer1.frame = self.bounds
maskLayer1.path = maskPAth1.cgPath
self.layer.mask = maskLayer1
}
}
At the start of the extension's file don't forget to add:
import UIKit
If you want an extension for a UIView with the option of rounding top or bottom corners you can use:
extension UIView {
func roundedCorners(top: Bool){
let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])
let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: corners,
cornerRadii:CGSize(width:8.0, height:8.0))
let maskLayer1 = CAShapeLayer()
maskLayer1.frame = self.bounds
maskLayer1.path = maskPAth1.cgPath
self.layer.mask = maskLayer1
}
}
Which is called for a button as:
myButton.roundedCorners(top: true)
iOS 11 has made it really easy to round corners. The code below rounds the top left and bottom right corners.
myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]
For swift 5 and the most flexibility
Define an extension with a roundCorners function
extension UIButton {
func roundCorners(corners: UIRectCorner, radius: Int = 8) {
let maskPath1 = UIBezierPath(roundedRect: bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
let maskLayer1 = CAShapeLayer()
maskLayer1.frame = bounds
maskLayer1.path = maskPath1.cgPath
layer.mask = maskLayer1
}
}
Call the roundCorners function
myButton.roundCorners(corners: [.topLeft, .topRight])
Or with a specific radius
myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)
Update you extension to be like this:
extension UIView {
func roundCorners(corners:UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
let rect = self.bounds
mask.frame = rect
mask.path = path.cgPath
self.layer.mask = mask
}
}
The shape layer (mask) needs to know the frame
Use this Code,
let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.CGPath
viewTo.layer.mask = maskLayer
hope its helpful
That's what helped me
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
}
}
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 viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
yourButtonOutletName.roundCorners(
corners: [.topLeft, .topRight],
radius: yourButtonOutletName.frame.height / 2
)
}
You forgot to set the frame of your shape layer:
mask.frame = layer.bounds
rounding is applied to corner's of view/Button .. , but coming to border of button , it is not applying correctly. can I have any solution for that? #
Here is the code that I have used , which is working (border) in iOS11.0 and above and not in below versions(<11.0)
if #available(iOS 11.0, *) {
self.layer.cornerRadius = radius
self.layer.maskedCorners = maskedCorners
} else {
let shapeLayer = CAShapeLayer()
shapeLayer.position = self.center
self.layer.masksToBounds = true
self.clipsToBounds = true
let bezirePath = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
shapeLayer.bounds = frame
shapeLayer.path = bezirePath.cgPath
self.layer.mask = shapeLayer

Resources