UIView with rounded corners and drop shadow?

前端 未结 30 2985
一整个雨季
一整个雨季 2020-11-22 08:00

I’ve been working on an application for a couple of years and received a simple design request: Round the corners on a UIView and add a drop shadow.To do as given below.

30条回答
  •  温柔的废话
    2020-11-22 08:14

    extension UIView {
        func dropRoundedShadowForAllSides() {
            let backgroundView = UIView(frame:self.frame)
            let radius = frame.height/2
            backgroundView.layer.masksToBounds = false
            self.layer.masksToBounds = true
            backgroundView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
            backgroundView.layer.shadowRadius = 4
            backgroundView.layer.shadowOpacity = 0.4
    
            let path = UIBezierPath()
    
            // Start at the Top Left Corner + radius distance
            path.move(to: CGPoint(x: 2*radius, y: 0.0))
    
            // Move to the Top Right Corner - radius distance
            path.addLine(to: CGPoint(x: backgroundView.frame.size.width - radius, y: 0.0))
    
            // Move to top right corner + radius down as curve
            let centerPoint1 = CGPoint(x:backgroundView.frame.size.width - radius,y:radius)
            path.addArc(withCenter: centerPoint1, radius: radius, startAngle: 3*(.pi/2), endAngle: 0, clockwise: true)
    
            // Move to the Bottom Right Corner - radius
            path.addLine(to: CGPoint(x: backgroundView.frame.size.width, y: backgroundView.frame.size.height - radius))
    
            // Move to top right corner + radius left as curve
            let centerPoint2 = CGPoint(x:backgroundView.frame.size.width - radius,y:backgroundView.frame.size.height - radius)
            path.addArc(withCenter: centerPoint2, radius: radius, startAngle: 0, endAngle: .pi/2, clockwise: true)
    
            // Move to the Bottom Left Corner - radius
            path.addLine(to: CGPoint(x: radius, y: backgroundView.frame.size.height))
    
            // Move to left right corner - radius up as curve
            let centerPoint3 = CGPoint(x:radius,y:backgroundView.frame.size.height - radius)
            path.addArc(withCenter: centerPoint3, radius: radius, startAngle: .pi/2, endAngle: .pi, clockwise: true)
    
            // Move to the top Left Corner - radius
            path.addLine(to: CGPoint(x: 0, y: radius))
    
            // Move to top right corner + radius down as curve
            let centerPoint4 = CGPoint(x:radius,y:radius)
            path.addArc(withCenter: centerPoint4, radius: radius, startAngle: .pi, endAngle: 3 * (.pi/2), clockwise: true)
    
            path.close()
    
            backgroundView.layer.shadowPath = path.cgPath
            if let superView = self.superview {
                superView.addSubview(backgroundView)
                superView.sendSubview(toBack: backgroundView)
                superView.bringSubview(toFront: self)
            }
    
        }
    }
    

提交回复
热议问题