【问题标题】:How to make a drop shadow effect on a label in Swift?如何在 Swift 中的标签上制作阴影效果?
【发布时间】:2017-07-12 15:57:28
【问题描述】:

我不知道如何在标签上编写投影。我有一个分数标签,它会发生变化,所以不可能只用带有阴影的 photoshopping 文本。我需要对其进行编码,以便它始终自动在文本后面有一个模糊的阴影。谁能提供一些例子或帮助?


人们说这是重复的,“重复”是关于 UIView 上的阴影,我的是关于 UILabel。这不是一回事。

【问题讨论】:

标签: ios swift uilabel


【解决方案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

使用不同的阴影颜色、不透明度、半径和偏移值

结果:

【讨论】:

  • 谢谢,我正在找人用代码解释它,你做到了。正如我所说,我有一个会更改并用代码编写的 scoreLabel,所以无论它显示什么数字/标签更改,我都必须对其应用阴影,我也忘记导入 UIKit,所以我很高兴你把它保留在代码。
  • 如果您的标签有背景颜色,这将不起作用。对于基于文本的解决方案,请参阅 @ingconti 的回答。
  • @Womble - 这是另一种好方法 - 有几个“陷阱”。当使用.adjustsFontSizeToFitWidth = trueDynamic Type 字体时——尤其是换行到多行时——阴影可能在底部被截断(有或没有背景颜色)。就个人而言,如果我需要这个,我可能会将标签嵌入到 UIView 中作为其背景。
  • @Womble - 另外,当使用动态字体时,attributedText 字体不会自动更新。
【解决方案2】:

UILabel 有一个改变其阴影的属性,下图显示了属性检查器中的属性和结果。

标签效果的结果

【讨论】:

  • 感谢您的回答,但是我似乎没有您的 UILabel 设置,我已经检查了所有选项卡。无论如何都想用代码编写它,所以这不是我正在寻找的解决方案,但我将来会在 storyboard/sks 中使用它。
  • @RasmusRossen,转到属性,它是第四部分 - 它就在那里!寻找“突出显示”。
【解决方案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()

【讨论】:

  • 如果您的标签有背景颜色,这将不起作用。对于基于文本的解决方案,请参阅 @ingconti 的回答。
【解决方案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)

【讨论】:

    【解决方案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
                }
            }
        }
    }
    

    【讨论】:

      【解决方案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)
      

      【讨论】:

        【解决方案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
            }
        }
        

        【讨论】:

          猜你喜欢
          • 2011-02-06
          • 1970-01-01
          • 2018-12-16
          • 2011-09-27
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-07-05
          • 1970-01-01
          相关资源
          最近更新 更多