在IOS Swift中,如何使白色文本在任何背景上都可见,如snapchat故事

在IOS Swift中,如何使白色文本在任何背景上都可见,如snapchat故事,ios,swift,user-interface,snapchat,Ios,Swift,User Interface,Snapchat,我试图使用Swift将白色文本置于用户配置文件图片之上,但这些图片可以是任何颜色。有人知道如何在Swift中实现这一点吗 Snapchat在其故事中做到了这一点,它将白色文本放置在左上角,文本在任何背景上都可见,没有明显的背景效果或标签背景变暗。请注意,我指的不是常规snapchat图片上的透明标签,而是snapchat故事上的透明标签 请参见以下图片作为示例: snapchat故事示例1 snapchat故事示例2 我尝试创建一个具有低alpha的黑色背景的标签,并使标签大小仅围绕标签文本

我试图使用Swift将白色文本置于用户配置文件图片之上,但这些图片可以是任何颜色。有人知道如何在Swift中实现这一点吗

Snapchat在其故事中做到了这一点,它将白色文本放置在左上角,文本在任何背景上都可见,没有明显的背景效果或标签背景变暗。请注意,我指的不是常规snapchat图片上的透明标签,而是snapchat故事上的透明标签

请参见以下图片作为示例:

snapchat故事示例1

snapchat故事示例2

我尝试创建一个具有低alpha的黑色背景的标签,并使标签大小仅围绕标签文本的字符,但没有成功

    let nameLabel = UILabel()
    nameLabel.text = "userName"
    nameLabel.textColor = UIColor.whiteColor()
    nameLabel.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.2)
    let adjustedNameSize = nameLabel.sizeThatFits(CGSize(width: 0.8*screenWidth, height: 0.1*screenHeight))
    var nameFrame = CGRectMake(0.05*screenWidth,0.05*screenHeight,0.8*screenWidth,0.1*screenHeight)
    nameFrame.size = adjustedNameSize
    nameLabel.frame = nameFrame
    nameLabel.layer.cornerRadius = 15
    nameLabel.clipsToBounds = true
您可以使用它并将其应用于图片。您可以使用几个过滤器。或者,您可以使用CALayer阴影属性

这里有两个例子:

@IBOutlet weak var img1: UIImageView!
@IBOutlet weak var img2: UIImageView!
@IBOutlet weak var nameLabel: UILabel!


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    //Using filters 


    let beginImage = CIImage(image: img2.image!)
    let edgeDetectFilter = CIFilter(name: "CIVignetteEffect")!
    edgeDetectFilter.setValue(beginImage, forKey: kCIInputImageKey)
    edgeDetectFilter.setValue(0.3, forKey: "inputIntensity")
    edgeDetectFilter.setValue(0.2, forKey: "inputRadius")

    let newImage = UIImage(CIImage: edgeDetectFilter.outputImage!)

    img2.image = newImage

    //applying layer to the label 

    nameLabel.layer.shadowOpacity = 0.5
    nameLabel.layer.shadowRadius = 0.5
    nameLabel.layer.shadowColor = UIColor.blackColor().CGColor
    nameLabel.layer.shadowOffset = CGSizeMake(0.0, -0.5)

}
您可以在此处看到比较:


您可以通过为文本创建大纲来实现这一点。因此,如果背景颜色为白色,文本仍将可见。只需从UILabel派生一个类并重写drawRect函数。如果您使用的是故事板,只需将UILabel替换为此类即可

class OutlinedLabel : UILabel
{
  override func drawRect(rect: CGRect)
  {
    let shadowOffset = self.shadowOffset
    let textColor = self.textColor

    let context = UIGraphicsGetCurrentContext()
    CGContextSetLineWidth(context, 1)
    CGContextSetLineJoin(context, CGLineJoin.Round)

    CGContextSetTextDrawingMode(context, CGTextDrawingMode.Stroke);
    self.textColor = UIColor.blackColor()
    super.drawTextInRect(rect)

    CGContextSetTextDrawingMode(context, CGTextDrawingMode.Fill)
    self.textColor = textColor
    self.shadowOffset = CGSizeMake(0, 0)
    super.drawTextInRect(rect)

    self.shadowOffset = shadowOffset
  }
}



let label = OutlinedLabel(frame: CGRectMake(100,100,200,200))
label.text = "Hello"

label.font = label.font.fontWithSize(80)
label.textColor = UIColor.whiteColor()
self.view.addSubview(label)

Swift3标签示例

var myLabel: UILabel = {
    let label = UILabel()
    label.textColor = .white
    label.layer.shadowOpacity = 0.5
    label.layer.shadowRadius = 0.5
    label.layer.shadowColor = UIColor.gray.cgColor
    label.layer.shadowOffset = CGSize(0.0, -0.5)
    label.backgroundColor = .clear
    label.textAlignment = .center
    label.numberOfLines = 1
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()