I want an image to appear as a circle with a shadow. Doing the following don't work because the shadow is probably cut off by the clipping...
let layer = myImageView.layer
// cut circle
layer.borderWidth = 1
layer.masksToBounds = false
layer.borderColor = UIColor.whiteColor().CGColor
layer.cornerRadius = myImageView.frame.height/2
myImageView.clipsToBounds = true
// add shadow
layer.shadowColor = UIColor.blackColor().CGColor
layer.shadowOffset = CGSize(width: 0, height: 10)
layer.shadowOpacity = 0.4
layer.shadowRadius = 5
I had the same problem...
I solve this by putting an image on top of the button(in my case was a button not an image) to act like a shadow.
button.sizeToFit()
shadow.layer.cornerRadius = 6
shadow.backgroundColor = UIColor.whiteColor()
shadow.layer.shadowOpacity = 0.8
shadow.layer.shadowRadius = 6
shadow.layer.shadowOffset = CGSizeMake(0, 2)
button.layer.cornerRadius = 6
button.clipsToBounds = true
shadow is the imageView that will be the shadow, of course.
button in your case will be your image.
Related
i want to achieve something like this:
I have set rounded corners on my UILabel like this:
label.layer.cornerRadius = 8.0
label.clipsToBounds = true
and I have tried adding a shadow like this:
func dropShadow(color: UIColor, opacity: Float = 0.5, offSet: CGSize, radius: CGFloat = 1, scale: Bool = true) {
layer.masksToBounds = false
layer.shadowColor = color.cgColor
layer.shadowOpacity = opacity
layer.shadowOffset = offSet
layer.shadowRadius = radius
layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
I try to achieve by adding a UILabel inside UIView
viewlbl.layer.cornerRadius = 20
viewlbl.clipsToBounds = true
viewlbl.layer.shadowRadius = 10
viewlbl.layer.shadowOpacity = 1.0
viewlbl.layer.shadowOffset = CGSize(width: 3, height: 3)
viewlbl.layer.shadowColor = UIColor.red.cgColor
viewlbl.layer.masksToBounds = false
I wanted to recreate the AppStore's "today" cards with rounded corners and a light drop shadow.
I created a path, a maskLayer and a separate shadowLayer, which – according to several sources – is the way of doing it.
The problem, however, is that my lovely rounded rectangle with a shadow has got some gray strokes at it corners. How can I solve this? I tried different shadow opacities and different radii. It didn't solve my problem.
Here you can see my screenshots and my code below.
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
// create sample view and add to view hierarchy
let bigTeaser = UIView(frame: CGRect(x: 16, y: 200, width: 343, height: 267))
bigTeaser.backgroundColor = UIColor.white
view.addSubview(bigTeaser)
// create the path for the rounded corners and the shadow
let roundPath = UIBezierPath(roundedRect: bigTeaser.bounds, cornerRadius: 20)
// create maskLayer
let maskLayer = CAShapeLayer()
maskLayer.frame = bigTeaser.bounds
maskLayer.path = roundPath.cgPath
bigTeaser.layer.mask = maskLayer
// create shadowLayer
let shadowLayer = CAShapeLayer()
shadowLayer.path = roundPath.cgPath
shadowLayer.frame = bigTeaser.frame
shadowLayer.shadowOpacity = 0.3
shadowLayer.shadowRadius = 24
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOffset = CGSize(width: 0, height: 2)
// insert layers
bigTeaser.superview!.layer.insertSublayer(shadowLayer, below: bigTeaser.layer)
}
If you replace:
shadowLayer.path = roundPath.cgPath
to
shadowLayer.shadowPath = roundPath.cgPath
The ugly borders will magically disappear.
What I need:
What I have:
Here is my current code:
class SchedulerSummaryCell: UITableViewCell {
#IBOutlet weak var oneMileV: UIView! {
didSet {
oneMileV.backgroundColor = .clear
let blurEffect = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.translatesAutoresizingMaskIntoConstraints = false
oneMileV.insertSubview(blurView, at: 0)
makeCircular(oneMileV)
NSLayoutConstraint.activate([
blurView.heightAnchor.constraint(equalTo: oneMileV.heightAnchor),
blurView.widthAnchor.constraint(equalTo: oneMileV.widthAnchor),
blurView.leadingAnchor.constraint(equalTo: oneMileV.leadingAnchor),
blurView.topAnchor.constraint(equalTo: oneMileV.topAnchor)
])
oneMileV.layer.applySketchShadow(alpha: 0.5, y: 4, blur: 10)
}
}
}
(HELPER)
extension CALayer {
func applySketchShadow(
color: UIColor = .black,
alpha: Float = 0.16,
x: CGFloat = 0,
y: CGFloat = 3,
blur: CGFloat = 6,
spread: CGFloat = 0)
{
masksToBounds = false
shadowColor = color.cgColor
shadowOpacity = alpha
shadowOffset = CGSize(width: x, height: y)
shadowRadius = blur / 2.0
if spread == -1 {return}
if spread == 0 {
shadowPath = nil
} else {
let dx = -spread
let rect = bounds.insetBy(dx: dx, dy: dx)
shadowPath = UIBezierPath(rect: rect).cgPath
}
}
}
When I comment out the applySketchShadow code, I get this:
Questions
Why does the gaussian blur cancel out the rounded corners?
Is there a way for me to apply both rounded corners and gaussian blur?
How should I then add an image?
You have to add your UIImageView as a subview to a UIView. The UIView will be responsible for the shadow and the UIImageView is going to take care of the rounded corners. Unfortunately you cannot add a shadow directly to the UIImageView because you need to enable clipsToBounds = true which prevents the view to show content outside of its bounds. This however is necessary for the shadow to be shown.
This will do the work:
let shadowView = UIView()
shadowView.backgroundColor = .clear
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOffset = CGSize(width: 0.1, height: 1)
shadowView.layer.shadowRadius = 8
shadowView.layer.shadowOpacity = 0.14
shadowView.layer.masksToBounds = false
let imageView = UIImageView()
imageView.image = UIImage(named: "YourImage")
imageView.clipsToBounds = true
imageView.layer.cornerRadius = imageView.frame.width / 2
shadowView.addSubview(imageView)
For shadow effect use this extention it will help you.
extension UIImageView {
func addShadow() {
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 2, height: 5)
self.layer.shadowOpacity = 0.5
self.layer.shadowRadius = 1.0
self.clipsToBounds = false
}
}
Here is the code I have for UILabel
descriptionText.layer.cornerRadius = 8
descriptionText.layer.borderColor = UIColor.lightGray.cgColor
descriptionText.layer.borderWidth = 2
descriptionText.text = ""
descriptionText.layer.shadowOffset = CGSize(width: -10, height: -10)
descriptionText.layer.shadowRadius = -5.0
descriptionText.backgroundColor = .white
descriptionText.textColor = .black
descriptionText.numberOfLines = 0
descriptionText.lineBreakMode = .byWordWrapping
However This is what it looks like
Why is the Corner Not Transparent or how do you make what is outside the border transparent
Thanks in advance
You need to hide everything outside of the cornerRadius by setting .clipsToBounds on the label to true. Problem is that if you do this you will lose the shadow, as this is outside the bounds as well. Try this:
Place your label inside a container view, constrain the label to the container edges, and create an outlet to it. Then try the following code:
containerView.borderColor = UIColor.lightGray.cgColor
containerView.layer.borderColor = UIColor.lightGray.cgColor
containerView.layer.borderWidth = 2
containerView.layer.shadowOffset = CGSize(width: -10, height: -10)
containerView.layer.shadowRadius = -5.0
containerView.backgroundColor = UIColor.clear
descriptionText.text = "Testing"
descriptionText.cornerRadius = 8
descriptionText.clipsToBounds = true // or descriptionText.layer.masksToBounds = true
descriptionText.backgroundColor = .white
descriptionText.textColor = .black
descriptionText.numberOfLines = 0
descriptionText.lineBreakMode = .byWordWrapping
I’m trying to add a label to an SCNNode. So far I’ve managed to set a SKLabelNode as the material for the SCNNode. It sort of works, I can the SCNNode becomes the background colour of the SKLabelNode but I can’t see the text. Sometime I can see a red haze (the text colour is red) but no readable text.
I also tried setting the material as a UIView and adding a UiLabel as a sub view. Again it sets as I can the whole SCNNode becomes the background colour of the UiLabel but I can’t see any text.
var block = SCNNode()
var spriteScene = SKScene()
var Lbl = SKLabelNode()
lbl.text = “Hello World”
lbl.color = blue (playground colour literal)
lbl. = 2 //I tried various numbers
lbl.fontColor = SKColor.red
spriteScene.addChild(lbl)
I got it after some hit and trial. I had to try different values before I got these size, scale and rotation to display the label as I want.
note: My node here is SCNPlane with 0.3 width and 0.2 height, so size of SKScene and rectangle and position of label are hard coded accordingly.
func addLabel(text: String){
let sk = SKScene(size: CGSize(width: 3000, height: 2000))
sk.backgroundColor = UIColor.clear
let rectangle = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 3000, height: 2000), cornerRadius: 10)
rectangle.fillColor = UIColor.black
rectangle.strokeColor = UIColor.white
rectangle.lineWidth = 5
rectangle.alpha = 0.5
let lbl = SKLabelNode(text: text)
lbl.fontSize = 160
lbl.numberOfLines = 0
lbl.fontColor = UIColor.white
lbl.fontName = "Helvetica-Bold"
lbl.position = CGPoint(x:1500,y:1000)
lbl.preferredMaxLayoutWidth = 2900
lbl.horizontalAlignmentMode = .center
lbl.verticalAlignmentMode = .center
lbl.zRotation = .pi
sk.addChild(rectangle)
sk.addChild(lbl)
let material = SCNMaterial()
material.isDoubleSided = true
material.diffuse.contents = sk
node.geometry?.materials = [material]
node.geometry?.firstMaterial?.diffuse.contentsTransform = SCNMatrix4MakeScale(Float(1), Float(1), 1)
node.geometry?.firstMaterial?.diffuse.wrapS = .repeat
node.geometry?.firstMaterial?.diffuse.wrapS = .repeat
}