如何在 Swift 中的標簽上制作投影效果？

Question

我不知道如何在標簽上編寫陰影。 我有一個樂譜標簽會發生變化，因此無法使用帶有陰影的 Photoshop 文本。 我需要對其進行編碼，使其始終自動在文本后面有一個模糊的陰影。 任何人都可以提供一些例子或幫助嗎？

---

人們說這是重復的，“重復”是關於 UIView 上的陰影，我的是關於 UILabel。 這不是一回事。

Answer 1

試一試——您可以直接在 Playground 頁面中運行它：

import UIKit
import PlaygroundSupport

let container = UIView(frame: CGRect(x: 0, y: 0, width: 600, height: 400))

container.backgroundColor = UIColor.lightGray

PlaygroundPage.current.liveView = container

var r = CGRect(x: 40, y: 40, width: 300, height: 60)

let label = UILabel(frame: r)
label.font = UIFont.systemFont(ofSize: 44.0)
label.textColor = .white
label.frame = r
label.text = "Hello Blur"

container.addSubview(label)

label.layer.shadowColor = UIColor.black.cgColor
label.layer.shadowRadius = 3.0
label.layer.shadowOpacity = 1.0
label.layer.shadowOffset = CGSize(width: 4, height: 4)
label.layer.masksToBounds = false

為陰影顏色、不透明度、半徑和偏移設置不同的值

結果：

Answer 2

UILabel有一個改變陰影的屬性，下圖顯示了屬性檢查器中的屬性和結果。

對標簽產生影響的結果

Answer 3

您可以編寫擴展並使用它。 將擴展代碼放在類 ViewController 之外。

我喜歡微妙的陰影。

extension UILabel {
    func textDropShadow() {
        self.layer.masksToBounds = false
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 0.2
        self.layer.shadowOffset = CGSize(width: 1, height: 2)
    }

    static func createCustomLabel() -> UILabel {
        let label = UILabel()
        label.textDropShadow()
        return label
    }
}

在您的標簽上只需調用此方法

myLabel.textDropShadow()

Answer 4

工作正常，但將陰影添加到所有標簽，而不是文本。

在這種情況下：

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let shadow = NSShadow()
        shadow.shadowColor = UIColor.blue
        shadow.shadowBlurRadius = 10
        
        let attrs: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 36),
            .foregroundColor: UIColor.red,
            .shadow: shadow
        ]
        
        let s = "MY TEXT"
        let attributedText = NSAttributedString(string: s, attributes: attrs)
        self.label.attributedText = attributedText
    }


}


You will get:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/CRMpg.png




**note:** You must add attributed string every time, as shadow is an attribute of string, not label, otherwise you can also derive class and override "setText". (keeping attributes inside the object in a a property you can set on init/setter)

Answer 5

Swift 4， IBInspectable 使用擴展

extension UILabel {

    @IBInspectable var isShadowOnText: Bool {
        get {
            return self.isShadowOnText
        }
        set {
            guard (newValue as? Bool) != nil else {
                return
            }

            if newValue == true{

                self.layer.shadowColor = UIColor.black.cgColor
                self.layer.shadowRadius = 2.0
                self.layer.shadowOpacity = 1.0
                self.layer.shadowOffset = CGSize(width: 2, height: 2)
                self.layer.masksToBounds = false
            }
        }
    }
}

Answer 6

Swift 4 - 帶有影子參數的擴展：

 // Label Shadow
    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
        }
    }

在您的標簽上只需調用此方法

let titleColor = UIColor(red:0.08, green:0.08, blue:0.08, alpha:1.0)
titleLbl.lblShadow(color: titleColor, radius: 3, opacity: 0.25)

Answer 7

你可以為所有 UIView 子類創建一個擴展方法。

extension UIView {
    func drawShadow(offset: CGSize, opacity: Float = 0.25, color: UIColor = .black, radius: CGFloat = 1) {
        layer.masksToBounds = false
        layer.shadowColor = color.cgColor
        layer.shadowOffset = offset
        layer.shadowOpacity = opacity
        layer.shadowRadius = radius
    }
}