/ UIKit

Vibrant text for today extensions

Learn how to make the vibrant text effect inside the today extension widgets for iOS.


Long story short, I was struggling to find a solution for making the text color exactly the same like it was in the official weather widget made by Apple. The all mighty search engine was not my best friend with this topic, but eventually I've discovered some really great articles.

Today-Widget

The trick is that UIVibrancyEffect has built-in class methods - since iOS10 - to achieve the exact same effect for any text. The funny thing is that I was reading an article about bad Apple docs lately by @twostraws, and this time I should have go directly for the official documentation. #lol

You just have to call the method and wrap your content inside the visual effect view. Just a few lines of code, sadly this can NOT be done from interface builder. :)

let effect = UIVibrancyEffect.widgetPrimary()
let effectView = UIVisualEffectView(effect:  effect)
effectView.contentView.addSubview(label)
self.view.addSubview(effectView)

The final result is pretty neat, now you don't have to work with static colors, all your labels, buttons or even template icons can benefit from this nice visual effect.

External sources

Vibrant text for today extensions
Share this