Я играю с TodayExtension в iOS 8, и я задавался вопросом, как применить этот эффект размытия к тексту или кнопкам. Я уже понял, что это имеет какое-то отношение к UIVisualEffectView. Но я не знаю, как его использовать.
Я использую Objective-C
Кто-нибудь может объяснить мне, как это сделать?
Спасибо, Дэвид
Обновленный ответ для iOS 10
В iOS 10 вы можете использовать widgetPrimaryVibrancyEffect и widgetSecondaryVibrancyEffect для автоматического возврата объекта UIVibrancyEffect.
Ознакомьтесь с документацией здесь и здесь.
Ответ для iOS 9
Используйте этот код, чтобы применить эффект вибрации для всего вашего виджета:
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect notificationCenterVibrancyEffect]];
effectView.frame = self.view.bounds
effectView.autoresizingMask = self.view.autoresizingMask;
__strong UIView *oldView = self.view;
self.view = effectView;
[effectView.contentView addSubview:oldView];
self.view.tintColor = [UIColor clearColor];
На самом деле вы смотрите на два эффекта. Фон имеет эффект размытия, и метки имеют эффект яркости.
Для эффекта размытия вы сначала инициализируете UIBlurEffect со стилем (темный, светлый, дополнительный свет):
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
Для эффекта вибрации вы инициализируете UIVibrancyEffect с эффектом размытия, который вы только что создали:
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
Это связано с тем, что эффект вибрации должен учитывать основной эффект размытия.
Затем вы создаете два UIVisualEffectViews:
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
Они должны быть добавлены в иерархию представлений. UIVisualEffectView имеет свойство contentView, к которому вы должны добавить subviews, к которому вы хотите применить соответствующий эффект. Убедитесь, что функция vibrancyEffectView добавлено или в качестве подвидности contentView of, blurEffectView.
Вы также можете установить все это в IB (я использую Xcode 6 beta 5). В библиотеке объектов есть "Визуальный эффект с размытием" и "Визуальные эффекты с размытием и вибрацией", которые вы можете перетащить в представление. "Представления визуальных эффектов с размытием и вибрацией" устанавливают два UIVisualEffectView, вложенные, как описано выше.
Зайдите на WWDC14 Session 221 и заголовок UIVisualEffectView.h для получения дополнительной информации.
Кнопка "Bearbeiten" может быть воссоздана путем рисования сквозного текста на кнопке. Как это сделать, ответили в этом сообщении.
Пожалуйста, см. ниже мое решение. Оригинальный iOS "Bearbeiten" по-прежнему выглядит несколько иначе. Я сделал его похожим, изменив альфу. Неправильное решение. Надеюсь, что этот пост заставит кого-то найти правильный способ сделать это (и поделиться им).
В viewDidLoad:
_pinButton.backgroundColor = [UIColor clearColor];
_pinButton.layer.cornerRadius = 4.0;
_pinButton.clipsToBounds = YES;
UIColor *white = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.75];
UIColor *whiteT = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3];
UIFont *buttonFont = [UIFont fontWithName:@"HelveticaNeue" size:12.0];
[_pinButton setImage:[self imageWithCutOutString:@"Pin"
size:_pinButton.frame.size
backgroundColor:white
font:buttonFont]
forState:UIControlStateNormal];
[_pinButton setImage:[self imageWithCutOutString:@"Pin"
size:_pinButton.frame.size
backgroundColor:whiteT
font:buttonFont]
forState:UIControlStateHighlighted];
И сам метод imageWithCutOutString:
- (UIImage *)imageWithCutOutString:(NSString *)string size:(CGSize)size backgroundColor:(UIColor *)backgroundColor font:(UIFont *)font
{
NSDictionary *textAttributes = @{ NSFontAttributeName:font };
CGSize textSize = [string sizeWithAttributes:textAttributes];
UIGraphicsBeginImageContextWithOptions(size, NO, [[UIScreen mainScreen] scale]);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, backgroundColor.CGColor);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0.0, 0.0, size.width, size.height)];
CGContextAddPath(ctx, path.CGPath);
CGContextFillPath(ctx);
CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut);
CGPoint center = CGPointMake((size.width - textSize.width) / 2.0, (size.height - textSize.height) / 2.0);
[string drawAtPoint:center withAttributes:textAttributes];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
Я пробовал примеры выше, но ни один из них не казался готовым из коробки. Вот пример, который работает для меня:
- (void)viewDidLoad {
[super viewDidLoad];
UIVibrancyEffect *effect = [UIVibrancyEffect notificationCenterVibrancyEffect];
UIVisualEffectView *outer = [[UIVisualEffectView alloc] initWithEffect:effect];
outer.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
outer.frame = self.view.bounds;
UIVisualEffectView *inner = [[UIVisualEffectView alloc] initWithEffect:effect];
inner.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
inner.frame = self.view.bounds;
UILabel *label = [UILabel new];
label.text = @"HELLO, I am a vibrant label";
label.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
label.frame = self.view.bounds;
[inner.contentView addSubview:label];
[outer.contentView addSubview:inner];
[self.view addSubview:outer];
}
Мне удалось достичь кнопки "Bearbeiten", используя AYVibrantButton с стилем AYVibrantButtonStyleFill:
// Create the button
AYVibrantButton* moreButton = [[AYVibrantButton alloc] initWithFrame:CGRectMake(0, 0, 210, 30) style:AYVibrantButtonStyleFill];
// Set the vibrancy effect to the one provided by notification center
moreButton.vibrancyEffect = [UIVibrancyEffect notificationCenterVibrancyEffect];
// Setup basic button properties
moreButton.text = @"Show More..";
moreButton.font = [UIFont systemFontOfSize:13.0];
// Add it to your view
[self.view addSubview:moreButton];