I tried to give a shadow to label text but it does not shown.
My code
private func drawValueLabel() {
valueLabel.layer.shadowColor = UIColor.red.cgColor
valueLabel.layer.shadowOffset = CGSize.init(width: 15.0, height: 15.0)
valueLabel.layer.shadowRadius = 3.0
valueLabel.layer.shadowOpacity = 1
valueLabel.layer.masksToBounds = false
valueLabel.clipsToBounds = false
valueLabel.layer.shouldRasterize = true
valueLabel.drawText(in: self.bounds)
}
Help me to show shadow
Thanks
I'm using this UIView extension for add shadow. With this extension you can add shadow from storyboard.
extension UIView {
#IBInspectable var shadow: Bool {
get {
return layer.shadowOpacity > 0.0
}
set {
if newValue == true {
self.addShadow()
}
}
}
func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
shadowOpacity: Float = 0.4,
shadowRadius: CGFloat = 3.0) {
layer.shadowColor = shadowColor
layer.shadowOffset = shadowOffset
layer.shadowOpacity = shadowOpacity
layer.shadowRadius = shadowRadius
}
}
Your code is working fine for me. Try giving some smaller offset so that you would be able to see it like
label.layer.shadowOffset = CGSize.init(width: 3.0, height: 3.0)
Use this -
label.layer.shadowColor = UIColor.black.cgColor
label.layer.shadowOpacity = 0.5
label.layer.shadowRadius = 2.0
label.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
Related
override func awakeFromNib() {
super.awakeFromNib()
makeRoundedCorners()
cellBackGroundView.layer.shadowColor = UIColor.black.cgColor
cellBackGroundView.layer.shadowOffset = CGSize(width: 10, height: 10)
cellBackGroundView.layer.shadowOpacity = 1
cellBackGroundView.layer.shadowRadius = 4
cellBackGroundView.clipsToBounds = true
cellBackGroundView.layer.masksToBounds = true
}
I am trying above code but shadow is not showing, not getting what is the issue.
It is because you are applying rounded corner and shadow both to a single view.
You should apply the rounded corner to the first view, and shadow to another view which is the superview of the first view.
For example, If cellBackGroundView is the subView of cell. then You should apply the rounded corner to cellBackGroundView and the shadow to cell(Which is the superView of cellBackGroundView).
addShadowToView(view: cell, value: 3)
addCornerToView(view: cell.cellBackGroundView, value: 8)
Let me share my functions with you,
For Shadow,
func addShadowToView (view : UIView, value: CGFloat) {
view.layer.shadowColor = UIColor.lightGray.cgColor
view.layer.shadowOffset = CGSize(width: value, height: value)
view.layer.shadowOpacity = 1.0
view.layer.shadowRadius = 2
view.clipsToBounds = false
}
For Rounded Corner,
func addCornerToView (view : UIView, value: CGFloat) {
view.layer.cornerRadius = value
view.clipsToBounds = true
}
you can remove clipsToBounds = true attribute
self.shadowColor = color.cgColor
self.shadowOffset = CGSize(width: 0.0, height: 1.4)
self.shadowOpacity = opacity
self.shadowRadius = 0.0
self.masksToBounds = false
Here is what i use for shadows:
extension UIView {
func addShadow(color: UIColor, shadowRadius: CGFloat, opacity: Float) {
layer.shadowColor = color.cgColor
layer.shadowOpacity = opacity
layer.shadowOffset = .zero
layer.shadowRadius = shadowRadius
layer.shadowPath = UIBezierPath(rect: bounds).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
}}
Usage:
view.addShadow(color: UIColor.black, shadowRadius: 4, opacity: 1)
You can try this one for collectionViewshadow
class CollectionViewCornerRound: UICollectionView {
var viewCornerRadius: CGFloat = 10 {
didSet {
layoutSubviews()
}
}
override func layoutSubviews() {
super.layoutSubviews()
layer.shadowRadius = 2
layer.shadowOpacity = 0.3
layer.cornerRadius = viewCornerRadius
layer.masksToBounds = true
layer.shadowOffset = .zero
clipsToBounds = true
}
}
I am using the following code:
bottomBorder.backgroundColor = UIColor.viewShadowGray().cgColor
bottomBorder.frame = CGRect(x: 0, y: view.frame.size.height - 1, width: view.frame.size.width, height: 1)
In extended UIColor file:
class func viewShadowGray() -> UIColor
{
return UIColor(red: 177.0/255.0, green: 177.0/255.0, blue: 179.0/255.0, alpha: 0.7)
}
changing the alpha value only makes the colour light, doesn't make it look blurred.
and getting :
I am expecting to obtain something as this:
How do I proceed rectifying this here?
edited , since you tried the shadow opacity thing in your new updated question i suggest using the implemented shadow properties for UIlayer
view.layer.masksToBounds = NO
view.layer.shadowOffset = CGSizeMake(-15, 20)
view.layer.shadowRadius = 5
view.layer.shadowOpacity = 0.5
view.layer.shadowColor = UIColor.black.cgColor
i would also recommend reading this article it would help you with that big time here
and check out this solution
extension UIView {
// OUTPUT 1
func dropShadow(scale: Bool = true) {
layer.masksToBounds = false
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.5
layer.shadowOffset = CGSize(width: -1, height: 1)
layer.shadowRadius = 1
layer.shadowPath = UIBezierPath(rect: bounds).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
// OUTPUT 2
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
}
}
original answer here
using them like this
view.layer.dropShadow()
I want to add shadow(it is not like default it somehow clouded and blurred) for my UIView like below
I have written an extension as
func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
self.layer.masksToBounds = false
self.layer.shadowColor = color.cgColor
self.layer.shadowOpacity = opacity
self.layer.shadowRadius = radius
self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
self.layer.shouldRasterize = true
self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
Output:
but not able to get the exact output.
Your help will be thankful.
I believe that you also need to set clipsToBounds.
self.clipsToBounds = false
I use IBInspectable to treat all the views in my app. Try it out
extension UIView {
#IBInspectable var cornerRadius: CGFloat {
set {
layer.cornerRadius = newValue
}
get {
return layer.cornerRadius
}
}
#IBInspectable var borderWidth: CGFloat {
set {
layer.borderWidth = newValue
}
get {
return layer.borderWidth
}
}
#IBInspectable var borderColor: UIColor? {
set {
layer.borderColor = newValue?.cgColor
}
get {
return UIColor(cgColor: layer.borderColor!)
}
}
#IBInspectable var shadowOffset: CGSize {
set {
layer.shadowOffset = newValue
}
get {
return layer.shadowOffset
}
}
#IBInspectable var shadowOpacity: Float {
set {
layer.shadowOpacity = newValue
}
get {
return layer.shadowOpacity
}
}
#IBInspectable var shadowRadius: CGFloat {
set {
layer.shadowRadius = newValue
}
get {
return layer.shadowRadius
}
}
#IBInspectable var shadowColor: UIColor? {
set {
layer.shadowColor = newValue?.cgColor
}
get {
return UIColor(cgColor: layer.shadowColor!)
}
}
}
in your case you should fix shadowOffset property.
You should disable clipToBounds in your 'containerView' (view that has your shadow dropping view placed as a subview)
Take a look at an example:
import UIKit
extension UIView {
func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
self.layer.masksToBounds = false
self.layer.shadowColor = color.cgColor
self.layer.shadowOpacity = opacity
self.layer.shadowRadius = radius
self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
self.layer.shouldRasterize = true
self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
}
let shadowedView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()
let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height:200))
mainView.backgroundColor = .white
mainView.addSubview(shadowedView)
here I will add a view container and enable clipToBounds :
let shadowedView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()
let containerView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
containerView.addSubview(shadowedView)
containerView.clipsToBounds = true
let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
mainView.backgroundColor = .white
mainView.addSubview(containerView)
In my xib file, I have created a generic function through which I wanted to add a bottom border through implementing a shadow to those textfields
func setupTextField(textField: UITextField) {
textField.leftViewMode = UITextFieldViewMode.always
let imageView = UIImageView();
let image = UIImage(named: "calendar");
imageView.image = image;
imageView.frame = CGRect(x: 5, y: 8, width: 20, height: 20)
textField.addSubview(imageView)
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: textField.frame.height))
textField.leftView = paddingView
textField.borderStyle = .none
textField.layer.backgroundColor = UIColor.white.cgColor
textField.layer.masksToBounds = false
textField.layer.shadowColor = UIColor(hex: "#D8D8D8").cgColor
textField.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
textField.layer.shadowOpacity = 1.0
textField.layer.shadowRadius = 0.0
}
And I have called this function from my awakeFromNib() method and as a result it added the shadow on my 2nd UITextField but not at the 1st one. Though from debug I can see that if there is no 2nd UITextField then this would draw a shadow on my 1st one.
How to overcome this problem?
For swift 4, swift 4.2, swift 5 Please refer below answer
Can give shadow to any UIView sub classes(imageview, label, textfield, textview etc)
extension UIView {
/* The color of the shadow. Defaults to opaque black. Colors created
* from patterns are currently NOT supported. Animatable. */
#IBInspectable var shadowColor: UIColor? {
set {
layer.shadowColor = newValue!.cgColor
}
get {
if let color = layer.shadowColor {
return UIColor(cgColor: color)
}
else {
return nil
}
}
}
/* The opacity of the shadow. Defaults to 0.4 Specifying a value outside the
* [0,1] range will give undefined results. Animatable. */
#IBInspectable var shadowOpacity: Float {
set {
layer.shadowOpacity = newValue
}
get {
return layer.shadowOpacity
}
}
/* The shadow offset. Defaults to (1, 2). Animatable. */
#IBInspectable var shadowOffset: CGPoint {
set {
layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
}
get {
return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
}
}
/* The blur radius used to create the shadow. Defaults to 3. Animatable. */
#IBInspectable var shadowRadius: CGFloat {
set {
layer.shadowRadius = newValue
}
get {
return layer.shadowRadius
}
}
}
Textfield shadow
swift 4.2
textFieldDOB.backgroundColor = UIColor.white textFieldDOB.clipsToBounds = false
textFieldDOB.layer.shadowColor = UIColor.black.cgColor
textFieldDOB.layer.shadowOffset = CGSize.zero
textFieldDOB.layer.shadowOpacity = 0.3
textFieldDOB.layer.shadowRadius = 6
textFieldDOB.borderStyle = .none
I have a UIButton which is very similar to the standard iOS keyboard alphabet button.
I am not sure how to create a shadow only for the bottom layer like how iOS have done.
I use the below code, but I see a shadow on all the side, not just the bottom:
CALayer *buttonLayer = [[CALayer alloc] init];
buttonLayer.shadowColor = [UIColor grayColor].CGColor;
buttonLayer.shadowOffset = CGSizeMake(0.f,1.f);
buttonLayer.masksToBounds = NO;
buttonLayer.shadowOpacity = 1.f;
How can I achieve the same effect?
You can mix the cornerRadius and shadow properties. I tested it on iOS 8.
Objective-C:
[self.globeButton setImage:[UIImage imageNamed:#"Globe"] forState:UIControlStateNormal];
self.globeButton.backgroundColor = [UIColor colorWithRed:171 green:178 blue:186 alpha:1.0f];
// Shadow and Radius
self.globeButton.layer.shadowColor = [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.25f] CGColor];
self.globeButton.layer.shadowOffset = CGSizeMake(0, 2.0f);
self.globeButton.layer.shadowOpacity = 1.0f;
self.globeButton.layer.shadowRadius = 0.0f;
self.globeButton.layer.masksToBounds = NO;
self.globeButton.layer.cornerRadius = 4.0f;
Swift:
globeButton.setImage(UIImage(named: "Globe"), for: .normal)
globeButton.backgroundColor = UIColor(red: 171/255, green: 178/255, blue: 186/255, alpha: 1.0)
// Shadow Color and Radius
globeButton.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
globeButton.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
globeButton.layer.shadowOpacity = 1.0
globeButton.layer.shadowRadius = 0.0
globeButton.layer.masksToBounds = false
globeButton.layer.cornerRadius = 4.0
Result:
SWIFT 3
import UIKit
class ButtonWithShadow: UIButton {
override func draw(_ rect: CGRect) {
updateLayerProperties()
}
func updateLayerProperties() {
self.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 3)
self.layer.shadowOpacity = 1.0
self.layer.shadowRadius = 10.0
self.layer.masksToBounds = false
}
}
!! Only if you do not need corner radius and shadow simultaneously. Otherwise watch this.
Be sure to also set shadowRadius to 0:
Given a UIButton property named button set its backing layer properties like this:
self.button.layer.shadowColor = [UIColor grayColor].CGColor;
self.button.layer.shadowOffset = CGSizeMake(0, 1.0);
self.button.layer.shadowOpacity = 1.0;
self.button.layer.shadowRadius = 0.0;
I have created IBInspectable extension that will help you.
You can directly assign from storyboard
Swift 5
//MARK:- IBInspectable
extension UIView {
#IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
#IBInspectable var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
#IBInspectable var borderColor: UIColor? {
get {
return UIColor(cgColor: layer.borderColor!)
}
set {
layer.borderColor = newValue?.cgColor
}
}
#IBInspectable
var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.masksToBounds = false
layer.shadowRadius = newValue
}
}
#IBInspectable
var shadowOpacity: Float {
get {
return layer.shadowOpacity
}
set {
layer.masksToBounds = false
layer.shadowOpacity = newValue
}
}
#IBInspectable
var shadowOffset: CGSize {
get {
return layer.shadowOffset
}
set {
layer.masksToBounds = false
layer.shadowOffset = newValue
}
}
#IBInspectable
var shadowColor: UIColor? {
get {
if let color = layer.shadowColor {
return UIColor(cgColor: color)
}
return nil
}
set {
if let color = newValue {
layer.shadowColor = color.cgColor
} else {
layer.shadowColor = nil
}
}
}
}
You can try with this code:
(sorry, i only know swift, not obj c. this code will add bottom shadow on your button.
button.layer.masksToBounds = false
button.layer.shadowColor = UIColor(rgb: 0x000000, alpha: 1.0).CGColor
button.layer.shadowOpacity = 1.0
button.layer.shadowRadius = 0
button.layer.shadowOffset = CGSizeMake(0, 1.0)
View bottom shadow
swift 4.2
viewTop.layer.shadowOffset = CGSize(width: 0, height: 1)
viewTop.layer.shadowColor = UIColor.lightGray.cgColor
viewTop.layer.shadowOpacity = 1
viewTop.layer.shadowRadius = 5
viewTop.layer.masksToBounds = false
in swift 2.0 add shadow uiview (uibutton) with code before class declaration or in swift file functions:
extension UIView {
func addShadowView(width:CGFloat=0.2, height:CGFloat=0.2, Opacidade:Float=0.7, maskToBounds:Bool=false, radius:CGFloat=0.5){
self.layer.shadowColor = UIColor.blackColor().CGColor
self.layer.shadowOffset = CGSize(width: width, height: height)
self.layer.shadowRadius = radius
self.layer.shadowOpacity = Opacidade
self.layer.masksToBounds = maskToBounds
}
}
in viewdidload add this code
button.addShadowView()
CornerRadius and shadow don't mix well on the same layer. So you will have to embed your "to be cornered" UIButton inside an UIView. The shadow will be applied on this UIView.
The following code, given as an example, produces the image below it:
import UIKit
class CustomButton: UIButton {
required init(coder decoder: NSCoder) {
super.init(coder: decoder)
backgroundColor = UIColor.whiteColor()
}
override func drawRect(rect: CGRect) {
updateLayerProperties()
}
func updateLayerProperties() {
layer.masksToBounds = true
layer.cornerRadius = 12.0
//superview is your optional embedding UIView
if let superview = superview {
superview.backgroundColor = UIColor.clearColor()
superview.layer.shadowColor = UIColor.darkGrayColor().CGColor
superview.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 12.0).CGPath
superview.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
superview.layer.shadowOpacity = 1.0
superview.layer.shadowRadius = 2
superview.layer.masksToBounds = true
superview.clipsToBounds = false
}
}
}
Put this method into your UIView extension and play with offset value
func drawShadow(shadowColor: UIColor = UIColor.black, opacity: Float =
0.3, offset: CGSize, radius: CGFloat = 5, shouldRasterize : Bool = false) {
self.layer.shadowColor = shadowColor.cgColor
self.layer.shadowOpacity = opacity
self.layer.shadowOffset = offset
self.layer.shadowRadius = radius
self.layer.shouldRasterize = shouldRasterize
}
To add shadow to a button with corner radius:
final class CustomButton: UIButton {
private var shadowLayer: CAShapeLayer!
override func layoutSubviews() {
super.layoutSubviews()
if shadowLayer == nil {
shadowLayer = CAShapeLayer()
shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 33).cgPath
if self.backgroundColor != nil {
shadowLayer.fillColor = self.backgroundColor?.cgColor
}
else{
shadowLayer.fillColor = UIColor.white.cgColor
}
shadowLayer.shadowColor = UIColor.gray.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowOffset = CGSize(width: 0.0, height: 3.0)
shadowLayer.shadowOpacity = 0.4
shadowLayer.shadowRadius = 2
layer.insertSublayer(shadowLayer, at: 0)
}
}
}
You can try with this code:
LoveButtonOutlet.layer.backgroundColor = UIColor.white.cgColor
LoveButtonOutlet.layer.cornerRadius = 10
LoveButtonOutlet.layer.borderWidth = 2
LoveButtonOutlet.layer.borderColor = UIColor.black.cgColor
LoveButtonOutlet.layer.shadowOffset = CGSize(width: 0, height: 1)
LoveButtonOutlet.layer.shadowColor = UIColor.darkGray.cgColor
LoveButtonOutlet.layer.shadowOpacity = 1
LoveButtonOutlet.layer.shadowRadius = 5
LoveButtonOutlet.layer.masksToBounds = false
extension UIButton
{
func setButtonCornerRadiusOnly(getValue:CGFloat)
{
self.layer.cornerRadius = getValue
self.clipsToBounds = true
}
func setButtonBorderColorAndHeight(getHeight:CGFloat,getColor:UIColor)
{
self.layer.borderColor = getColor.cgColor
self.layer.borderWidth = getHeight
}
func setBtnWithShadow()
{
self.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)
self.layer.shadowOpacity = 0.5
self.layer.shadowRadius = 1.5
self.layer.cornerRadius = self.frame.size.height/2
self.layer.masksToBounds = false
}
}