web-dev-qa-db-ja.com

通知センターでぼやけたテキストを複製する方法（iOS 8）

IOS 8でTodayExtensionを使って遊んでいますが、そのぼかし効果をテキストやボタンに適用する方法を考えました。私はそれがUIVisualEffectViewと関係があることをすでに理解しました。でも使い方がわかりません。

私はObjective-Cを使用しています

誰かがこれを達成する方法を私に説明できますか？

ありがとう、デビッド

enter image description here

uilabelios8blur
21
David Gölzhäuser

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];
23
BalestraPatrick

ここでは実際に2つの効果を見ています。背景にはぼかし効果が適用され、ラベルには鮮やかな効果が適用されます。

ぼかし効果の場合、最初にUIBlurEffectをスタイル（暗い、明るい、余分な光）で初期化します。

UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

鮮やかな効果の場合、作成したぼかし効果でUIVibrancyEffectを初期化します。

UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

これは、活気効果が基礎となるぼかし効果を考慮に入れる必要があるためです。

次に、2つのUIVisualEffectViewを作成します。

UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

これらはビュー階層に追加する必要があります。 UIVisualEffectViewにはcontentViewプロパティがあり、それぞれの効果を適用するサブビューを追加する必要があります。 vibrancyEffectViewがblurEffectViewの上に、またはcontentViewのサブビューとして追加されていることを確認します。

これらすべてをIBで設定することもできます（私はXcode 6ベータ5を使用しています）。オブジェクトライブラリには、ビューにドラッグできる「ぼかしのある視覚効果ビュー」と「ぼかしと鮮やかさのある視覚効果ビュー」があります。 「ぼかしと鮮やかさのある視覚効果ビュー」は、上記のようにネストされた2つのUIVisualEffectViewを設定します。

詳細については、WWDC14セッション221とUIVisualEffectView.hヘッダーを確認してください。

9
Eric Sean Conner

「Bearbeiten」ボタンは、ボタンにシースルーテキストを描画することで再現できます。これを行う方法は this postで回答されています。

私の解決策については、以下を参照してください。オリジナルの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;
}
0
Lars Jansen

AYVibrantButton をAYVibrantButtonStyleFillスタイルで使用して、「Bearbeiten」ボタンを実現できました。

// 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];
0
Ken Toh

上記の例を試しましたが、箱から出してすぐに機能するものはありませんでした。これは私のために働く同様の例です：

- (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];
}
0
gklka