Làm thế nào để kiểm soát sự lan truyền bóng và làm mờ?

Tôi đã thiết kế các phần tử giao diện người dùng trong bản phác thảo và một trong số chúng có bóng với độ mờ 1 và độ lan rộng 0. Tôi đã xem tài liệu để biết thuộc tính lớp chế độ xem và lớp không có bất kỳ thứ gì có tên là trải rộng hoặc mờ hoặc bất kỳ thứ gì tương đương (điều khiển duy nhất là chỉ đơn thuần là shadowOpacity) Làm cách nào để kiểm soát những thứ như mờ và lan rộng?

BIÊN TẬP:

Đây là cài đặt của tôi trong Sketch: Và đây là những gì tôi muốn bóng của mình trông như thế nào:

Và đây là những gì nó trông như thế này vào lúc này: Lưu ý, bạn phải nhấp vào hình ảnh để thực sự nhìn thấy bóng.

Mã của tôi như sau:

func setupLayer(){
    view.layer.cornerRadius = 2
    view.layer.shadowColor = Colors.Shadow.CGColor
    view.layer.shadowOffset = CGSize(width: 0, height: 1)
    view.layer.shadowOpacity = 0.9
    view.layer.shadowRadius = 5
}

Dưới đây là cách áp dụng tất cả 6 thuộc tính đổ bóng của Sketch cho lớp của UIView với độ chính xác gần như hoàn hảo:

extension CALayer {
  func applySketchShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0)
  {
    shadowColor = color.cgColor
    shadowOpacity = alpha
    shadowOffset = CGSize(width: x, height: y)
    shadowRadius = blur / 2.0
    if spread == 0 {
      shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}

Giả sử chúng tôi muốn trình bày những điều sau:

Bạn có thể dễ dàng thực hiện việc này thông qua:

myView.layer.applySketchShadow(
  color: .black, 
  alpha: 0.5, 
  x: 0, 
  y: 0, 
  blur: 4, 
  spread: 0)

hoặc ngắn gọn hơn:

myView.layer.applySketchShadow(y: 0)

Thí dụ:

Trái: Ảnh chụp màn hình UIView của iPhone 8; phải: Hình chữ nhật phác thảo.

Ghi chú:

• Khi sử dụng số khác 0 spread, nó mã hóa một đường dẫn dựa trên boundsCALayer. Nếu giới hạn của lớp thay đổi, bạn sẽ muốn gọi lại applySketchShadow()phương thức.

Bạn có thể thử điều này .... bạn có thể chơi với các giá trị. Lệnh shadowRadiuschỉ ra lượng mờ. shadowOffsetra lệnh cho bóng đi đâu.

Swift 2.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height))
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.blackColor().CGColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.CGPath

Swift 3.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height 
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height)) 
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.black.cgColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.cgPath

Ví dụ với spread

Để tạo một bóng đổ cơ bản

    demoView.layer.cornerRadius = 2
    demoView.layer.shadowColor = UIColor.blackColor().CGColor
    demoView.layer.shadowOffset = CGSizeMake(0.5, 4.0); //Here your control your spread
    demoView.layer.shadowOpacity = 0.5 
    demoView.layer.shadowRadius = 5.0 //Here your control your blur

Ví dụ về Shadow cơ bản trong Swift 2.0

Sketch Shadow bằng IBDesignable và IBInspectable trong Swift 4

SKETCH VÀ XCODE THEO MẶT

CODE

@IBDesignable class ShadowView: UIView {

    @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
            }
        }
    }

    @IBInspectable var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    @IBInspectable var shadowOffset: CGPoint {
        get {
            return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
        }
        set {
            layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
        }

     }

    @IBInspectable var shadowBlur: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue / 2.0
        }
    }

    @IBInspectable var shadowSpread: CGFloat = 0 {
        didSet {
            if shadowSpread == 0 {
                layer.shadowPath = nil
            } else {
                let dx = -shadowSpread
                let rect = bounds.insetBy(dx: dx, dy: dx)
                layer.shadowPath = UIBezierPath(rect: rect).cgPath
            }
        }
    }
}

ĐẦU RA

LÀM THẾ NÀO ĐỂ SỬ DỤNG NÓ

Mã này hoạt động rất tốt đối với tôi:

yourView.layer.shadowOpacity = 0.2 // opacity, 20%
yourView.layer.shadowColor = UIColor.black.cgColor
yourView.layer.shadowRadius = 2 // HALF of blur
yourView.layer.shadowOffset = CGSize(width: 0, height: 2) // Spread x, y
yourView.layer.masksToBounds = false

Đối với những người đang cố gắng áp dụng bóng đổ cho một đường dẫn được xác định trước (chẳng hạn như đối với chế độ xem hình tròn), đây là những gì tôi đã kết thúc:

extension CALayer {
    func applyShadow(color: UIColor = .black,
                     alpha: Float = 0.5,
                     x: CGFloat = 0,
                     y: CGFloat = 2,
                     blur: CGFloat = 4,
                     spread: CGFloat = 0,
                     path: UIBezierPath? = nil) {
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowRadius = blur / 2
        if let path = path {
            if spread == 0 {
                shadowOffset = CGSize(width: x, height: y)
            } else {
                let scaleX = (path.bounds.width + (spread * 2)) / path.bounds.width
                let scaleY = (path.bounds.height + (spread * 2)) / path.bounds.height

                path.apply(CGAffineTransform(translationX: x + -spread, y: y + -spread).scaledBy(x: scaleX, y: scaleY))
                shadowPath = path.cgPath
            }
        } else {
            shadowOffset = CGSize(width: x, height: y)
            if spread == 0 {
                shadowPath = nil
            } else {
                let dx = -spread
                let rect = bounds.insetBy(dx: dx, dy: dx)
                shadowPath = UIBezierPath(rect: rect).cgPath
            }
        }
        shouldRasterize = true
        rasterizationScale = UIScreen.main.scale
    }
}

Tôi sẽ đăng một số ví dụ sau, nhưng điều này đã có tác dụng đối với các chế độ xem hình tròn đối với tôi.

Giải pháp của tôi dựa trên câu trả lời bài đăng này: (Swift 3)

let shadowPath = UIBezierPath(rect: CGRect(x: -1,
                                           y: -2,
                                           width: target.frame.width + 2,
                                           height: target.frame.height + 2))

target.layer.shadowColor = UIColor(hexString: shadowColor).cgColor
target.layer.shadowOffset = CGSize(width: CGFloat(shadowOffsetX), height: CGFloat(shadowOffsetY))
target.layer.masksToBounds = false
target.layer.shadowOpacity = Float(shadowOpacity)
target.layer.shadowPath = shadowPath.cgPath

Tôi thực sự thích câu trả lời được đăng ở đây và đề xuất trong các bình luận. Đây là cách tôi sửa đổi giải pháp đó:

extension UIView {
  func applyShadow(color: UIColor, alpha: Float, x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat) {
    layer.masksToBounds = false
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = alpha
    layer.shadowOffset = CGSize(width: x, height: y)
    layer.shadowRadius = blur / UIScreen.main.scale
    if spread == 0 {
      layer.shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      layer.shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}

SỬ DỤNG:

myButton.applyShadow(color: .black, alpha: 0.2, x: 0, y: 1, blur: 2, spread: 0)

Nó có thể là một chút sai lầm trong lịch sử, nhưng có thể một số đã gặp vấn đề tương tự. Tôi đã sử dụng mẫu mã từ câu trả lời được chấp nhận. Tuy nhiên, các hiệu ứng khá khác nhau: - giá trị y phải bằng một nửa so với giá trị tương tự trong bản phác thảo - Tôi đã thử áp dụng bóng đổ trên thanh điều hướng và hiệu ứng rất khác biệt - hầu như không nhìn thấy khi sử dụng cùng giá trị mà bản phác thảo có.

Vì vậy, có vẻ như phương pháp này hoàn toàn không phản ánh các thông số phác thảo. Bất kỳ gợi ý?