4

I am working on my first Today Centre widget, which simply consists of three labels on the default storyboard. It's working fine, but I read in the iOS Human Interface Guidelines that secondary text should "use the system-provided vibrant appearance" with notificationCenterVibrancyEffect.

What's the correct way to add this vibrancy effect to my two secondary labels? I've read about UIVisualEffectView, but it's still not clear to me how to use it for this purpose. I don't think I want to put a blurred view behind my labels because Notification Centre already blurs the background.

John Topley
  • 113,588
  • 46
  • 195
  • 237

2 Answers2

2

UIVisualEffectView when configured with a UIVibrancyEffect is meant to be used as a container—just drop your labels in its contentView and you’ll get the appropriate appearance on top of the Notification Center blur. The text color doesn’t matter; when it’s added to the contentView it gets special treatment and effectively always renders with the same appearance, though you can still adjust the alpha of the view (not of the text color) to make it more or less prominent.

vibrancy examples

Noah Witherspoon
  • 57,021
  • 16
  • 130
  • 131
  • Not necessarily—Interface Builder has support for visual effect views too. Just set them up following the same pattern. See [this answer](http://stackoverflow.com/a/27829073/30618) for some more detail on that. – Noah Witherspoon Jan 16 '16 at 21:03
  • OK, I think I finally got this worked out. I followed the answer you linked to in your comment, but additionally I had to tick the Vibrant checkbox in Interface Builder for both visual effect views. Crucially, I moved the primary label outside the view hierarchy of the two visual effect views, so it doesn't have a vibrant appearance. This leaves the secondary labels as part of the visual effect view hierarchy, which means they do get vibrancy. – John Topley Jan 19 '16 at 20:29
  • Also, I still have no idea whether visual effect views in Interface Builder automatically use `notificationCenterVibrancyEffect`, or whether you have to build the whole lot in code to get that. – John Topley Jan 19 '16 at 20:30
  • They probably don’t, but from my experimentation it would appear that `+notificationCenterVibrancyEffect` has the same appearance as a vibrancy effect configured for a dark-style blur, so you should be fine using that for now. – Noah Witherspoon Jan 19 '16 at 20:37
  • 1
    I wasn't happy with the appearance of my vibrant secondary text because it looked too dark, so I used one of my Apple Developer Technical Support incidents. I was told that only a single visual effect view is needed and that it should have `notificationCenterVibrancyEffect` set via an IBOutlet. I pointed out that Interface Builder's _Visual Effects View with Blur and Vibrancy_ object uses a hierarchy of two visual effects views and was advised to file a bug report. – John Topley Jan 28 '16 at 19:06
  • Interesting! Yep, definitely sounds like an issue worth filing. IB should be able to handle that. – Noah Witherspoon Jan 28 '16 at 19:20
1

good day, first of all u should use a correct view hierarchy, when U add some objects in your VisualEffectView example:

enter image description here

UIVibrancyEffect used in combination with UIVisualEffectView, adjusts the colors of the content to make it feel more transparent. UIVibrancyEffect can blending some objects with the background example:

enter image description here

More particularly to your question(https://stackoverflow.com/a/25392645/4912496) Apple recommends to use vibrant effect for secondary text, because its simply beautiful for example(apple native app use vibrant effect, and Sports.ru don't use it):

enter image description here

But, some apps don't use this effect... To ensure that your widget gets the vibrancy effect that’s appropriate for displaying items in the Today view, use notificationCenterVibrancyEffect. Some info. https://www.omnigroup.com/developer/how-to-make-text-in-a-uivisualeffectview-readable-on-any-background

Community
  • 1
  • 1
Joe Hallenbeck
  • 1,452
  • 12
  • 24