Swift UI and shadow colors - ios

So, I need a button in iOS / swift, that has outer shadow on bottom and right border, and inner shadow on top and left border. I was studying tutorials for several days, and came up with following solution that is ALMOST what I need.
internal func Setup() {
self.backgroundColor = .white
self.contentEdgeInsets = UIEdgeInsets(top: 10, left:30, bottom: 10, right: 30)
// Outer shadow
self.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
self.layer.shadowOffset = CGSize(width: 10, height: 10)
self.layer.shadowOpacity = 1.0
self.layer.shadowRadius = 6
self.layer.masksToBounds = false
self.layer.cornerRadius = self.frame.height / 2
// call to add inner shadow
self.addInnerShadow()
}
internal func addInnerShadow() {
let cornerRadius = self.bounds.height / 2
let innerShadow = CALayer()
innerShadow.frame = bounds
// Shadow path (1pt ring around bounds)
let path = UIBezierPath(roundedRect: innerShadow.bounds.insetBy(dx: -1, dy: -1), cornerRadius: cornerRadius)
let cutout = UIBezierPath(roundedRect: innerShadow.bounds, cornerRadius: cornerRadius).reversing()
path.append(cutout)
innerShadow.shadowPath = path.cgPath
innerShadow.masksToBounds = true
// Shadow properties. Color is SAME as in outer shadow, but will come out differently
innerShadow.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
innerShadow.shadowOffset = CGSize(width: 8, height: 8)
innerShadow.shadowOpacity = 1.0
innerShadow.shadowRadius = 6
innerShadow.cornerRadius = cornerRadius
// Add
layer.addSublayer(innerShadow)
}
Function Setup() is called during button's init(), and it all creates nice shadowed button with rounded corners.
But the question is - why the top inner shadow is so light? It should be of the same color as the bottom outer shadow. If I set any other color (like red), it is always very light, with only a tint of the required color. Why? Is it possible to control the color of inner shadow as directly as I do it with outer shadow?

Related

Shadow does not work with round corner on top Tableview

Hello in my condition i am using two conditions ,one to make round corner only top view after that shadow on the top only , only one condition works if i am adding code for shadow it does not work but i remove corner code then shadow works please guide me
for round corner i am using this extension
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
}
and for shadow
func shadowToUIView( uiview : UIView){
uiview.layer.shadowColor = UIColor.darkGray.cgColor
uiview.layer.shadowOpacity = 0.50
uiview.layer.shadowOffset = CGSize(width: 1, height: 1)
uiview.layer.shadowRadius = 5
uiview.layer.shouldRasterize = false
}
and in cell for row i am using this
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! HomeTableViewCell
cell.firstView.roundCorners(corners: [.topLeft,.topRight], radius: 25.0)
shadowToUIView(uiview: cell.firstView)
HomeMenu.openMenuCard(cell:cell, indexPath:indexPath, firstViewMain:firstViewMain, openedTab: openedTab)
return cell
}
after adding replied code
Here is the method that will allow you to make the UIView round with shadow:
extension UIView {
func addShadow(cornerRadius: CGFloat, maskedCorners: CACornerMask, color: UIColor, offset: CGSize, opacity: Float, shadowRadius: CGFloat) {
self.layer.cornerRadius = cornerRadius
self.layer.maskedCorners = maskedCorners
self.layer.shadowColor = color.cgColor
self.layer.shadowOffset = offset
self.layer.shadowOpacity = opacity
self.layer.shadowRadius = shadowRadius
}
}
Use:
For rounding all the corners:
<your_view_object>.addShadow(cornerRadius: 10.0, maskedCorners: [.layerMaxXMaxYCorner, .layerMinXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMinYCorner], color: AppColors.themeBlack.withAlphaComponent(0.6), offset: CGSize.zero, opacity: 0.4, shadowRadius: 4.0)
For rounding only top corners:
<your_view_object>.addShadow(cornerRadius: 10.0, maskedCorners: [.layerMaxXMinYCorner, .layerMinXMinYCorner], color: AppColors.themeBlack.withAlphaComponent(0.6), offset: CGSize.zero, opacity: 0.4, shadowRadius: 4.0)
For rounding only bottom corners:
<your_view_object>.addShadow(cornerRadius: 10.0, maskedCorners: [.layerMaxXMaxYCorner, .layerMinXMaxYCorner], color: AppColors.themeBlack.withAlphaComponent(0.6), offset: CGSize.zero, opacity: 0.4, shadowRadius: 4.0)
For making the shadow as per you requirement change the others parameters.
Doc for layer.mask states:
"The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through, but fully transparent pixels block that content. The default value of this property is nil. When configuring a mask, remember to set the size and position of the mask layer to ensure it is aligned properly with the layer it masks."
So, I added
mask.frame = self.bounds.offsetBy(dx: -6.0, dy: -6.0)
Works correctly (need to adapt offset values).
Good Question..!!!
I have same requirement in my recent school application.Here's
Best solutions which will working as per your requirement.
Please use below ShadowView class for rounded shadow.
https://ibb.co/3S0rD7s
https://ibb.co/qCtrGqz
class ShadowView:UIView{[![enter image description here][1]][1]
private var theShadowLayer: CAShapeLayer?
override func layoutSubviews() {
super.layoutSubviews()
let rounding = CGFloat.init(10.0)
var shadowLayer = CAShapeLayer.init()
shadowLayer.name = "ShadowLayer1"
shadowLayer.path = UIBezierPath.init(roundedRect: bounds, cornerRadius: rounding).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowColor = UIColor.init(red: 60.0/255.0, green: 64.0/255.0, blue: 67.0/255.0, alpha:0.3).cgColor
shadowLayer.shadowRadius = CGFloat.init(2.0)
shadowLayer.shadowOpacity = Float.init(0.5)
shadowLayer.shadowOffset = CGSize.init(width: 0.0, height: 1.0)
if let arraySublayer1:[CALayer] = self.layer.sublayers?.filter({$0.name == "ShadowLayer1"}),let sublayer1 = arraySublayer1.first{
sublayer1.removeFromSuperlayer()
}
self.layer.insertSublayer(shadowLayer, below: nil)
shadowLayer = CAShapeLayer.init()
shadowLayer.name = "ShadowLayer2"
shadowLayer.path = UIBezierPath.init(roundedRect: bounds, cornerRadius: rounding).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowColor = UIColor.init(red: 60.0/255.0, green: 64.0/255.0, blue: 67.0/255.0, alpha:0.15).cgColor
shadowLayer.shadowRadius = CGFloat.init(6.0)
shadowLayer.shadowOpacity = Float.init(0.5)
shadowLayer.shadowOffset = CGSize.init(width: 0.0, height: 2.0)
if let arraySublayer2:[CALayer] = self.layer.sublayers?.filter({$0.name == "ShadowLayer2"}),let sublayer2 = arraySublayer2.first{
sublayer2.removeFromSuperlayer()
}
self.layer.insertSublayer(shadowLayer, below: nil)
}
}
Easy to implement
Simple design make One Containerview inheritance of class ShadowView And add Sub container view (rounded corner view)..That’s it..!!!..Run it..!!

How to add gradients on custom class buttons?

I am beginner in Swift/Xcode. I made a custom class in my Xcode project to handle buttons appearance (color, shape etc) that works find.
However, I can't succeed to add gradients to these buttons.
I tried the below code, but it adds a new squared gradient onto my rounded buttons instead of applying the intended gradients to those buttons. Here is what I already gave many tries:
- add this code to my custom button class (inheriting from UIButton)
- add this code to my custom button class (inheriting from UIView)
- above 2 approaches and removing the backgroungColor settings
- Using a separate function called from viewController
func ConfigMenuButtons() {
// Set button shape color
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 122/255, green: 127/255, blue: 249/255, alpha: 1)
let darkBlue = UIColor(red: 74/255, green: 88/255, blue: 205/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
clipsToBounds = true
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
But I always end up with this "square shaped gradient layer" appearing onto the targeted buttons, instead of having these gradients applied directly to these buttons.
If someone had any piece of advice, it would be fantastic.
Thank you!
Here is the screen shot of the button with its partial expected effect
Here is a screenshot of fixed issue
I finally fixed the issue as below adding a CGRect size.
func ConfigMenuButtons() {
// Set button shape
layer.cornerRadius = 37
// Set button size
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 74).isActive = true
heightAnchor.constraint(equalToConstant: 74).isActive = true
// Set button text
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)
// Set button shadow
layer.shadowRadius = 2
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.8
// Set button gradient colors
let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)
// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
// THAT IS THE LINE THAT COULD FIX THE ISSUE
gradientLayer.frame = CGRect(x: 0, y: 0, width: 74, height: 74)
// Set rounded shape
gradientLayer.cornerRadius = 37
// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}

How to implement a black gradient on an image in iOS using swift

I am working on an iOS project where I have white labels on bright images. The problem is for bright images the white labels are not showing. Here is an example:
Label not showing: https://imgur.com/hKtejHn
Label showing: https://imgur.com/Ef5qJAh
I think if I add a black gradient on all the image then the white labels will be visible. Can anyone help me as to how to implement the solution in Swift?
Thank!
If you want to add gradient on your imageView then you can just implement CAGradientLayer on your imageView.layer.
Try to change some values for your own custom look, but the code below is pretty much it.
let gradientLayer = CAGradientLayer()
gradientLayer.frame = imageView.frame
let colors = [
UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor,
UIColor(red: 0, green: 0, blue: 0, alpha: 0).cgColor
]
gradientLayer.startPoint = CGPoint(x: 0.1, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.9, y: 0.5)
gradientLayer.colors = colors
imageView.layer.addSublayer(gradientLayer)
You can change colors, add colors, change start/end-points. You can find a lot of different CAGradientLayer-guides on youtube or google.
try this:
extension UILabel {
func lblShadow(color: UIColor , radius: CGFloat, opacity: Float){
self.textColor = color
self.layer.masksToBounds = false
self.layer.shadowRadius = radius
self.layer.shadowOpacity = opacity
self.layer.shadowOffset = CGSize(width: 1, height: 1)
self.layer.shouldRasterize = true
self.layer.rasterizationScale = UIScreen.main.scale
}
}
usage:
label.lblShadow(color: UIColor.white, radius: 3, opacity: 0.75)

Round left border of a UIButton

To round the bottom left corner of a UIButton, I took code from this answer and modified the line: borderLayer.strokeColor = GenerateShape.UIColorFromHex(0x989898, alpha: (1.0-0.3)).CGColor b/c it didn't work.
However, the left border of the UIButton is not rounded. How to fix?
Code
button.frame = CGRect(x: 0, y: 0, width: 0.5*popUpView.frame.width, height: 0.25*popUpView.frame.height)
button.layer.borderWidth = 3
button.roundBtnCorners(roundedCorners, radius: cornerRadius)
extension UIButton{
// Round specified corners of button
func roundBtnCorners(_ corners:UIRectCorner, radius: CGFloat)
{
let borderLayer = CAShapeLayer()
borderLayer.frame = self.layer.bounds
borderLayer.strokeColor = UIColor(red: 168/266, green: 20/255, blue: 20/255, alpha: 0.7).cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = 1.0
let path = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
borderLayer.path = path.cgPath
self.layer.addSublayer(borderLayer);
}
}
Istead of:
self.layer.addSublayer(borderLayer)
Try:
self.layer.mask = borderLayer
I cannot see how you are creating the parameters for roundBtnCorners but below is the line I changed in your code and it worked. I would check to make sure you are passing the correct parameters.
button.roundBtnCorners(.bottomLeft , radius: 10)
Solved it! It was because my button.layer.borderWidth = 3 was drawing a really thick rectangle, so I couldn't see the border drawn by roundBtnCorners
I deleted the line below:
button.layer.borderWidth = 3
Result:

UIView with shadow, rounded only top corners and masked bottom edge

I'm struggling to achieve the view that would have rounded only top corners and shadow around it. The whole view should be masked at the bottom by the superview to prevent the shadow to overlap following subview (shadow offset should be (0, 0)).
When I use:
// Adding shadow
let contentSubviewLayer = contentSubview.layer
contentSubviewLayer.masksToBounds = false
contentSubviewLayer.shadowOpacity = 0.3
contentSubviewLayer.shadowRadius = 2.5
contentSubviewLayer.shadowOffset = CGSizeMake(0, 0)
contentSubviewLayer.cornerRadius = 5.0
contentSubviewLayer.shadowPath = UIBezierPath(rect: contentSubview.bounds).CGPath
self.layer.masksToBounds = true
I get:
But after adding masking the bottom edge:
// Adding maskView to round only top corners
let maskLayer = CAShapeLayer()
maskLayer.frame = self.contentSubview.bounds
let roundedPath = UIBezierPath(roundedRect: maskLayer.bounds, byRoundingCorners: [UIRectCorner.TopLeft, UIRectCorner.TopRight], cornerRadii: CGSizeMake(CORNER_RADIUS, CORNER_RADIUS))
maskLayer.fillColor = UIColor.whiteColor().CGColor
maskLayer.backgroundColor = UIColor.clearColor().CGColor
maskLayer.path = roundedPath.CGPath
contentSubview.layer.mask = maskLayer
I'm getting:
The desired effect should be the conjunction of the two above and should resemble something like this with shadows around the left, top and right edges:
Please help!
Thank you in advance.
I tend to use an app called PaintCode to generate the Swift code I need for this type of thing. I did something similar recently and it spat this out for me:
let context = UIGraphicsGetCurrentContext()
//// Color Declarations
let chiesi_light_grey = UIColor(red: 0.851, green: 0.851, blue: 0.851, alpha: 1.000)
//// Shadow Declarations
let chiesi_shadow = NSShadow()
chiesi_shadow.shadowColor = chiesi_light_grey.colorWithAlphaComponent(0.8 * CGColorGetAlpha(chiesi_light_grey.CGColor))
chiesi_shadow.shadowOffset = CGSize(width: 0.1, height: 4.1)
chiesi_shadow.shadowBlurRadius = 2
//// Rectangle Drawing
let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 50, height: 54), byRoundingCorners: [UIRectCorner.BottomLeft, UIRectCorner.BottomRight], cornerRadii: CGSize(width: 8, height: 8))
rectanglePath.closePath()
CGContextSaveGState(context)
CGContextSetShadowWithColor(context, chiesi_shadow.shadowOffset, chiesi_shadow.shadowBlurRadius, (chiesi_shadow.shadowColor as! UIColor).CGColor)
UIColor.whiteColor().setFill()
rectanglePath.fill()
CGContextRestoreGState(context)
chiesi_light_grey.setStroke()
rectanglePath.lineWidth = 2
rectanglePath.stroke()
Maybe it will help you.

Resources