CODEWITHSUNDEEP
iosswiftuitableview
Shahzad Ali
Shahzad Ali

Reputation: 123

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

Image

Upvotes: 3

Views: 305

Answers (3)

Darshan Panchal
Darshan Panchal

Reputation: 297

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..!!

Upvotes: 0

claude31
claude31

Reputation: 884

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).

Upvotes: 0

Pramod Kumar
Pramod Kumar

Reputation: 2652

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.

Upvotes: 3

Related Questions