UIView with rounded corners and drop shadow?

前端 未结 30 3176
一整个雨季
一整个雨季 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条回答
  •  猫巷女王i
    2020-11-22 08:20

    Swift 3 & IBInspectable solution:
    Inspired by Ade's solution

    First, create an UIView extension:

    //
    //  UIView-Extension.swift
    //  
    
    import Foundation
    import UIKit
    
    @IBDesignable
    extension UIView {
         // Shadow
         @IBInspectable var shadow: Bool {
              get {
                   return layer.shadowOpacity > 0.0
              }
              set {
                   if newValue == true {
                        self.addShadow()
                   }
              }
         }
    
         fileprivate func addShadow(shadowColor: CGColor = UIColor.black.cgColor, shadowOffset: CGSize = CGSize(width: 3.0, height: 3.0), shadowOpacity: Float = 0.35, shadowRadius: CGFloat = 5.0) {
              let layer = self.layer
              layer.masksToBounds = false
    
              layer.shadowColor = shadowColor
              layer.shadowOffset = shadowOffset
              layer.shadowRadius = shadowRadius
              layer.shadowOpacity = shadowOpacity
              layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath
    
              let backgroundColor = self.backgroundColor?.cgColor
              self.backgroundColor = nil
              layer.backgroundColor =  backgroundColor
         }
    
    
         // Corner radius
         @IBInspectable var circle: Bool {
              get {
                   return layer.cornerRadius == self.bounds.width*0.5
              }
              set {
                   if newValue == true {
                        self.cornerRadius = self.bounds.width*0.5
                   }
              }
         }
    
         @IBInspectable var cornerRadius: CGFloat {
              get {
                   return self.layer.cornerRadius
              }
    
              set {
                   self.layer.cornerRadius = newValue
              }
         }
    
    
         // Borders
         // Border width
         @IBInspectable
         public var borderWidth: CGFloat {
              set {
                   layer.borderWidth = newValue
              }
    
              get {
                   return layer.borderWidth
              }
         }
    
         // Border color
         @IBInspectable
         public var borderColor: UIColor? {
              set {
                   layer.borderColor = newValue?.cgColor
              }
    
              get {
                   if let borderColor = layer.borderColor {
                        return UIColor(cgColor: borderColor)
                   }
                   return nil
              }
         }
    }
    

    Then, simply select your UIView in interface builder setting shadow ON and corner radius, like below:

    The result!

提交回复
热议问题