Search code examples
iosios8-today-widgetuivisualeffectview

How to achieve a vibrant selection state in a Notification Center Today Widget


enter image description here

I want to achieve a selected state with an effect similar to what the built-in widgets have, where the colors behind the notification show through. How can I do this?


Solution

  • Simply add a UIButton to the contentView of a UIVisualEffectsView using [UIVibrancyEffect notificationCenterVibrancyEffect]:

    UIButton *myButton = ...
    self.effectsView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect notificationCenterVibrancyEffect]];
    self.effectsView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addSubview:self.effectsView];
    
    [self.effectsView.contentView addSubview:myButton];
    

    By default, your button's backgroundColor should be [UIColor clearColor]. Then, when it's tapped, just set its background color to [[UIColor lightGrayColor] colorWithAlphaComponent:0.5]. (The alpha value helps when content behind the notification center is almost all white).