Hi i want to set shadow of UItextView like below in image.
I have tried below code but it does not give me same result rather it also make the text of UITextView as shadow.
self.tv_comments.layer.shadowRadius = 5.0
self.tv_comments.layer.borderColor = UIColor.gray.cgColor
self.tv_comments.layer.borderWidth = 1
self.tv_comments.layer.shadowColor = UIColor.gray.cgColor
self.tv_comments.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
self.tv_comments.layer.shadowOpacity = 1.0
self.tv_comments.textColor = UIColor.black
Above code results me this view which is not required
The below code works fine
self.tv_comments.layer.shadowColor = UIColor.black.cgColor;
self.tv_comments.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
self.tv_comments.layer.shadowOpacity = 1.0
self.tv_comments.layer.shadowRadius = 5.0
self.tv_comments.layer.masksToBounds = false
However, when masksToBounds = false, any sublayers that extend outside the layer's boundaries will be visible. So UITextField scroll text outside the layer.
If this is a problem for you, just add another UIView under your UITextView and set it's layer to display shadow.
Is your UITextView background color is clear color ? If yes, then set the background color of UITextView or UITextView layer background color. Because setting UITextView background color nik will set it's layer's background color to nil.So
self.tv_comments.backgroundColor = UIColor.white
//or self.tv_comments.backgroundColor = UIColor.clear
//self.tv_comments.layer.backgroundColor = UIColor.white
self.tv_comments.layer.shadowRadius = 5.0
self.tv_comments.layer.borderColor = UIColor.gray.cgColor
self.tv_comments.layer.borderWidth = 1
self.tv_comments.layer.shadowColor = UIColor.gray.cgColor
self.tv_comments.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
self.tv_comments.layer.shadowOpacity = 1.0
self.tv_comments.textColor = UIColor.black
Your code has two issues:
1) Border
Your desired output does not have a border. So do not set one.
2) View clips shadow
By default a UIView clips its content to its bounds. As a result, you can not see anything drawn outside the bounds (your shadow). Set clipsToBounds to false.
Working example:
// Test view setup
let parent = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 200.0, height: 200.0))
parent.backgroundColor = UIColor.white
let tv_comments = UITextView(frame: CGRect(x: 50.0, y: 50.0, width: 100.0, height: 100.0))
tv_comments.text = "Test Test Test Test Test Test "
tv_comments.backgroundColor = UIColor.white
parent.addSubview(tv_comments)
// replace your code with the code below
tv_comments.clipsToBounds = false
tv_comments.layer.shadowRadius = 5.0
tv_comments.layer.shadowColor = UIColor.gray.cgColor
tv_comments.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
tv_comments.layer.shadowOpacity = 0.8
tv_comments.textColor = UIColor.black
Result:
Related
I created a standard border around my UIView like so:
vwGroup.layer.borderColor = UIColor.yellow.cgColor
vwGroup.layer.borderWidth = 2.0;
but I would like to have 5px of padding/margin/spacing between the UIView, and the border that surrounds it.
Right now it just draws the border immediately around it. I'd like to push it out so there is clear space between.
Any suggestions? I suspect insets are the way to go but can't figure it out.
Thank you!
Insets isn't the way to go. You use inset for padding a view's internal content from its margins. For what you need your best option is to wrap your vwGroup inside another UIView and set the border in the wrapping view. Something like:
let wrappingView = UIView(frame: someFrame)
wrappingView.backgroundColor = .clear
wrappingView.layer.borderColor = UIColor.yellow.cgColor
wrappingView.layer.borderWidth = 2.0;
wrappingView.addSubview(vwGroup)
Of course this is just for you to get the big picture. You might want to set proper frames/constraints.
Try this, it is helpful for you.
First, Add this extension
extension CALayer {
func addGradientBorder(colors:[UIColor],width:CGFloat = 1) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(origin: CGPoint.zero, size: self.bounds.size)
gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
gradientLayer.endPoint = CGPoint(x:1.0,y:1.0)
gradientLayer.colors = colors.map({$0.cgColor})
let shapeLayer = CAShapeLayer()
shapeLayer.lineWidth = width
shapeLayer.path = UIBezierPath(rect: self.bounds).cgPath
shapeLayer.fillColor = nil
shapeLayer.strokeColor = UIColor.red.cgColor
gradientLayer.mask = shapeLayer
self.addSublayer(gradientLayer)
}
}
Then add the UIView with border
let vwGroup = UIView(frame: CGRect(x: 50, y: 150, width: 200, height: 200))
vwGroup.backgroundColor = .red
//-- This is for padding between boarder and view -- you can set padding color ---
vwGroup.layer.addGradientBorder(colors:[UIColor.black,UIColor.black] , width: 40)
//-- This is for outer boarder -- you can also change the color of outer boarder --
vwGroup.layer.addGradientBorder(colors:[UIColor.white,UIColor.white] , width: 10)
self.view.addSubview(vwGroup)
Output is:
swift 5.4
call like this:
customView.layer.innerBorder()
did it, by add a sublayer
extension CALayer {
func innerBorder(borderOffset: CGFloat = 24.0, borderColor: UIColor = UIColor.blue, borderWidth: CGFloat = 2) {
let innerBorder = CALayer()
innerBorder.frame = CGRect(x: borderOffset, y: borderOffset, width: frame.size.width - 2 * borderOffset, height: frame.size.height - 2 * borderOffset)
innerBorder.borderColor = borderColor.cgColor
innerBorder.borderWidth = borderWidth
innerBorder.name = "innerBorder"
insertSublayer(innerBorder, at: 0)
}
}
I've created a rounded UIView, which should also have a shadow. So far, everything works, but on the corners, the shadow isn't rounded properly.
How to round the shadow corner?
Here's the code and a screenshot:
popupView.layer.cornerRadius = 15
popupView.layer.shadowColor = UIColor.black.cgColor
popupView.layer.shadowOffset = CGSize(width: 0, height: 0)
popupView.layer.shadowOpacity = 0.3
popupView.layer.shadowRadius = 3.0
popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath
popupView.layer.shouldRasterize = false
So, I basically threw your code into Playground and played around with a bit, what I found was, I could basically remove view.layer.shadowPath and it would work...
import UIKit
let view = UIView(frame: CGRect(x: 100, y: 100, width: 500, height: 500))
view.backgroundColor = UIColor.white
view.layer.cornerRadius = 15
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0)
view.layer.shadowOpacity = 1.0
view.layer.shadowRadius = 6.0
//view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
view.layer.shouldRasterize = false
let outter = UIView(frame: CGRect(x: 0, y: 0, width: 700, height: 700))
outter.backgroundColor = UIColor.red
outter.addSubview(view)
outter
What I also found was:
view.layer.masksToBounds = true did not achieve the desired result
view.layer.shadowPath = UIBezierPath(roundedRect: view.bounds, cornerRadius: 15).cgPath also works, but adds in an additional point of failure, as you need to remember to set the cornerRadius property if you change it on the view, or add a variable to seed both, but since if you didn't set the shadowPath, it would generate the same result, it makes me wonder why you'd both using it.
Use
popupView.layer.shadowPath = UIBezierPath(roundedRect: popupView.bounds, cornerRadius: 15).cgPath
instead of
popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath
and add a little bit of shadowOpacity like a 1.3 to see better the shadow.
You need to set the views layers masksToBounds value to true
popupView.layer.masksToBounds = true
I want to set the bottom shadow of UIView.I am also setting corner radius.If i set maskToBounds to true then i am not able to set the shadow of UIView please tell how can i set both corner radius & shadow of UIView.
func addShadwToView(){
self.viewContainer.layer.masksToBounds = true;
self.viewContainer.layer.shadowRadius = 15;
self.viewContainer.layer.shadowOffset = CGSize(width: 0, height: 20)
self.viewContainer.layer.shadowOpacity = 0.5;
self.viewContainer.layer.cornerRadius = 5
self.viewContainer.layer.borderColor = UIColor.lightGray.cgColor
self.viewContainer.layer.borderWidth = 0.5
}
If you want both a corner radius and a drop shadow, so don't turn on -masksToBounds, but rather set the corner radius and set the bezier path of the shadow with a rounded rect. Keep the radius of the two the same:
Try it:
func addShadwToView(){
var borderLine = CAShapeLayer()
borderLine.path = UIBezierPath(roundedRect: frame2, byRoundingCorners: [.allCorners], cornerRadii: CGSize(width: 30, height: 0)).cgPath
borderLine.shadowColor = UIColor.white.cgColor
borderLine.shadowOffset = CGSize(width: 0, height: 1)
borderLine.shadowOpacity = 0.3
borderLine.shadowRadius = 10
self.viewContainer.layer.masksToBounds = true;
self.viewContainer.layer.cornerRadius = 5
self.viewContainer.layer.borderColor = UIColor.lightGray.cgColor
self.viewContainer.layer.borderWidth = 0.5
self.viewContainer.layer.addSublayer(borderLine)
}
Try this code...this will solve your problem
func addShadow(){
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: customView.frame.width, height: customView.frame.height))
customView.layer.shadowColor = UIColor.lightGray.cgColor
customView.layer.shadowOffset = CGSize(width: 0, height: 20)
customView.layer.shadowOpacity = 0.5
customView.layer.shadowRadius = 15
customView.layer.masksToBounds = false
customView.layer.shadowPath = shadowPath.cgPath
}
There are tons of answers on SO for rounding a particular corner. The issue I'm running into is I'm trying to align a button corner to a rounded corner of the view below. Please see the image. The yellow view is rounded in 4 corners. I'm trying to get the close button to round off at top right to align with the yellow view's round corner. I've used the Swift 3 code below, but the button stays square. Can anyone please point out what is missing?
viewRaised is the yellow view.
Many thanks!
let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.topRight, .bottomLeft], cornerRadii: CGSize(width: 10, height: 10))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
btnCancel.layer.mask = maskLayer
btnCancel.layer.masksToBounds = true
self.viewRaised.layer.cornerRadius = 10
self.viewRaised.layer.masksToBounds = false
self.viewRaised.layer.shadowOffset = CGSize(width: 5, height: 10);
self.viewRaised.layer.shadowRadius = 10;
self.viewRaised.layer.shadowOpacity = 0.5;
UPDATE:
Interesting thing is that the same code seems to be working but only for top left. See the second image.
self.viewRaised.layer.cornerRadius = 10
self.viewRaised.layer.masksToBounds = false
self.viewRaised.layer.shadowOffset = CGSize(width: 5, height: 10);
self.viewRaised.layer.shadowRadius = 10;
self.viewRaised.layer.shadowOpacity = 0.5;
let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.allCorners], cornerRadii: CGSize(width: 10, height: 10))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
btnCancel.layer.mask = maskLayer
This is quite perplexing. I'm using XCode Version 8.0 beta 6 (8S201h)
Your btnCancel.layer.mask should be set to the yellow view.
You need to add btnCancel as a sublayer of of yellow view's parent.
Example (Swift 3.x) :
let yellowView = UIView(frame: CGRectMake(20.0, 20.0, 200.0, 200.0))
yellowView.backgroundColor = UIColor.yellowColor()
yellowView.layer.borderColor = UIColor.clearColor().CGColor
yellowView.layer.borderWidth = 1.0
yellowView.layer.cornerRadius = 10.0
self.view.addSubview(yellowView) // Add yellowView to self's main view
let btnCancel = UIView(frame: CGRectMake(20.0, 20.0, 45.0, 45.0))
btnCancel.backgroundColor = UIColor.redColor()
btnCancel.layer.mask = yellowView.layer // Set btnCancel.layer.mask to yellowView.layer
self.view.addSubview(btnCancel) // Add btnCancel to self's main view, NOT yellowView
NOTE:
You don't need to enable clipsToBounds because you're setting a mask layer.
You Also don't need to create a new CAShapeLayer for the mask. Use yellowView's layer as the mask.
Swift 4.x :
let yellowView = UIView(frame: CGRect(x: 20.0, y: 20.0, width: 200.0, height: 200.0))
yellowView.backgroundColor = .yellow
yellowView.layer.borderColor = UIColor.clear.cgColor
yellowView.layer.borderWidth = 1.0
yellowView.layer.cornerRadius = 10.0
self.view.addSubview(yellowView) // Add yellowView to self's main view
let btnCancel = UIView(frame: CGRect(x: 20.0, y: 20.0, width: 45.0, height: 45.0))
btnCancel.backgroundColor = .red
btnCancel.layer.mask = yellowView.layer // Set btnCancel.layer.mask to yellowView.layer
self.view.addSubview(btnCancel) // Add btnCancel to self's main view, NOT yellowView
All I needed to do was remove the whole of this. But it worked if I remove the bolded line only. But the rest of the lines were not needed once since Cancel Button was the subview of the yellow view.
let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.topRight, .bottomLeft], cornerRadii: CGSize(width: 10, height: 10))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
btnCancel.layer.mask = maskLayer
btnCancel.layer.masksToBounds = true
I have a tableview with three rows. I am trying to make the table rows have rounded corners and also a shadow effect around the entire tableview. For some reason, I cannot make the tableview both have the rounded corners and shadow effect but I could do them separately if I comment out the code responsible for one of the features. Here is the code I am using:
//this is for shadow effect
tableView.backgroundColor = UIColor.clearColor()
tableView.layer.shadowColor = UIColor.darkGrayColor().CGColor
tableView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0
tableView.layer.shadowOpacity = 1.0
tableView.layer.shadowRadius = 2
// This is for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
You can add your table view to a container view and add drop shadow to that container view:
let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds), style: .Plain)
containerView.backgroundColor = UIColor.clearColor()
containerView.layer.shadowColor = UIColor.darkGrayColor().CGColor
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
// This is for rounded corners
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)
Edit
Swift 3.0:
let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds, style: .plain)
containerView.backgroundColor = UIColor.clear
containerView.layer.shadowColor = UIColor.darkGray.cgColor
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)
The RDC's answer is good, but for me the result didnt resolve my case, follow is my fix :
//for table view border
tableView.layer.borderColor = UIColor .grayColor().CGColor
tableView.layer.borderWidth = 1.0
//for shadow
let containerView:UIView = UIView(frame:self.tableView.frame)
//dont use clear color,fit blue color
containerView.backgroundColor = UIColor.blueColor()
//shadow view also need cornerRadius
containerView.layer.cornerRadius = 10
containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
//containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
//for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
self.view.addSubview(tableView)
i tried above solution but in my application tableview didSelectRowAt was not working.
use this Extension for UITabeleView
for corner
for shadow
//if u want shadow for all side use (shadowOffset = .zero)
extension UITableView {
func addCorner(){
self.layer.cornerRadius = 15
self.clipsToBounds = true
}
func addShadow(){
self.layer.shadowColor = UIColor.lightGray.cgColor
self.layer.shadowRadius = 5
self.layer.shadowOpacity = 0.5
self.layer.shadowOffset = .zero
self.layer.masksToBounds = false
}
}
How to use::
self.tableView.addCorner()
self.tableView.addShadow()
Thanks to #beyowulf
I have upgraded for me with Swift 2.2, to
set Border,
Rounded corner and
Drop shadow to the table view
//for table view border
tableView.layer.borderColor = UIColor .grayColor().CGColor
tableView.layer.borderWidth = 1.0
//for shadow
let containerView:UIView = UIView(frame:self.tableView.frame)
containerView.backgroundColor = UIColor.clearColor()
containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
//containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
//for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(tableView)
result looks like