In IOS Swift, How do you make white text visible over any background like on snapchat stories

Question

I am attempting to use Swift in order to put white text over user profile pictures, but these pictures could be of any color. Does anyone know how to do this in Swift?

Snapchat does this in it's stories where it places white text in the top left corner and the text is visible over any background without a noticeable background effect or darkening of the label's background. Please note I am not referring to the transparent label on the regular snapchat pictures, but just on the snapchat stories.

Please see the following images as examples:

snapchat story example 1

enter image description here

snapchat story example 2

enter image description here

I have unsuccessfully attempted to do this by creating a label with a black background that has a low alpha and making the label size only surround the characters of the label's text.

    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

Mat · Answer 1 · 2016-08-19T00:30:53.407

You can use CIFilter and apply it to the picture. There are several filters you can play with. Alternatively you may use CALayer shadow properties.

Here both an examples:

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

}

You can see the comparison here:

score 1 · Answer 2 · answered Apr 19 '17 at 15:39

A Swift3 label example.

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
}()

score 0 · Answer 3 · answered Aug 19 '16 at 00:43

You can achieve this by creating an outline for your text. So that if the background color is white, the text will still be visible. Just derive a class from UILabel and override drawRect function. If you are using Storyboard, just replace the UILabel with this class.

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)

In IOS Swift, How do you make white text visible over any background like on snapchat stories

3 Answers3