UIVisualEffectViewを使用して画像をぼかす方法


208

誰かが画像にぼかしを適用する小さな例を挙げられますか?私はしばらくの間コードを理解しようと試みてきました:( obj cでまだ新しいです!

UIVisualEffectView複雑な視覚効果以上の単純な抽象化を提供します。結果は、目的の効果に応じて、ビューの背後に階層化されたコンテンツ、またはビューのcontentViewに追加されたコンテンツに影響を与える可能性があります。

UIVisualEffectView既存のビューにを適用して、既存のビューにぼかしまたは鮮やかな効果を適用します。UIVisualEffectViewをビュー階層に追加した後、サブビューをのcontentViewに追加しますUIVisualEffectView。サブビューを直接UIVisualEffectViewそれ自体に追加しないでください。

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView


1
ビューを追加するように注意してくださいUIVisualEffectViewさんcontentView github.com/onmyway133/blog/issues/124
onmyway133

また、サブビューにフレームを追加してフレームを設定する場合は、回転が機能することを確認するために、viewDidLayoutSubviewsでフレームを更新することを忘れないでください。
スティーブモーザー2018

回答:


415

このぼかしビューをimageViewに置くだけです。Objective-Cの例を次に示します。

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

とスウィフト:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
どうもありがとうございます!フレームの設定を忘れていました:(グーグルにはまだ視覚的なものがないので、これが最初の検索用語になるはずです:)
cNoob

1
APIが変更されないことを期待してください!これが、まだリリースされていないApple APIについて説明するのが難しい場合がある理由の1つです。たとえば、UIKit Dynamics APIの一部は、ベータ版とリリース間で若干異なります。メジャーなものは何もありませんが、元のAPIに対して作成されたサンプルコードは壊れていました。
Zev Eisenberg

5
とにかくぼかしをイン/アウトでアニメートする方法はありますか?
ルーベンマルティネスジュニア

3
@BS視覚効果ビューのアルファをアニメーション化できます。ブーム。
MaciejTrybiło2014年

2
UIBlurEffectは素晴らしいですが、iPad2のような古いデバイスでは機能しないことに注意してください-画面に半透明のレイヤーを配置するだけでぼやけていない理由を理解するために何時間も費やしました-古いデバイスでテストしていたためです
Keith

135

UIVisualEffectViewでUIVibrancyEffectとUIBlurEffectを使用する方法は次のとおりです

Objective-C:

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

スウィフト4:

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

1
回避策はサブクラス化なしでも機能します。定義するだけですextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
Appleはバグを修正したようです。サブクラス/延長問題を回避するには、iOSの8ベータ2にはもはや必要ありません
ベンジャミン・メイヨー

2
ありがとう。バグ修正をテストして確認し、回答を編集しました。
Matt Rundle、2014年

1
これを自分のビューに追加しようとしていますが、ビューを表示するたびに、白い背景が表示されるまで何度もぼやけています...削除した後、removeFromSuperViewでビューを削除していますが、同じ結果が得られます。 .. 何か案は?
ジョージアスダ2014年

@GeorgeAsdaを呼び出す代わりにremoveFromSuperView、あなたは[self.visualEffectView setHidden:NO];?ビューへの割り当てとビューへの追加は、非表示または表示にするよりも負荷の高い操作です。
ユン・リー

46

インターフェイスビルダーを使用して、単純な状況でこれらの効果を簡単に作成することもできます。ビューのZ値は、ドキュメントアウトラインにリストされている順序に依存するため、UIVisualEffectViewぼかしたいビューの前にドキュメントアウトラインにドラッグできます。これにより、指定されUIViewたのcontentViewプロパティであるネストされたが自動的に作成されUIVisualEffectViewます。このビュー内で、ぼかしの上に表示したいものを入れ子にします。

XCode6 beta5

また、vibrancyを簡単に利用することもできます。これにより、デフォルトでvibrancyが有効になっているドキュメントのアウトラインにUIVisualEffect別のネストが自動的に作成UIVisualEffectViewされます。次に、ネストされたUIView(ここでものcontentViewプロパティUIVisualEffectView)にラベルまたはテキストビューを追加して、「>スライドしてロックを解除する」UI要素と同じ効果を実現できます。

ここに画像の説明を入力してください


透けて見えるものが実際にぼやけていることを確認できますか?私の画像(階層で "BackgroundPhoto"と呼んだもの)は、ぼかしスタイル:暗い半透明のビューで淡色表示されています。(Xcode 6.01のリリースバージョンとiOSシミュレーターの使用)
tobinjim '22

「淡色表示されている」とはどういう意味ですか?あなたはそれがぼやけているとは思わないのですか?
ああ、2014

わかりました、数時間後に見ていきます。
ああ、2014

ありがとう!スクリーンショットで折りたたまれているBackgroundPhotoのビュー階層があります...私はUIImageViewを使用してそれに写真を割り当てました(緑の背景に明るい色の犬-白い脚と緑の草の間の鮮明な定義は視覚効果ビューで覆われたときとそうでないときと同じようにシャープです。
tobinjim 2014

1
私は...ダークにぼかしの種類を変更、ラベルが白い色を取得することを見てきました
ダニエル・

8

私はストーリーボードを介して視覚効果を作成することを好みます-UI要素の作成または維持に使用されるコードはありません。それも私に完全なランドスケープのサポートを与えます。ぼかしとVibrancyでUIVisualEffectsを使用する小さなデモを作成しました。

Githubのデモ


8

誰かがSwiftで答えを望んでいる場合:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

更新:

今のところ、それはIBで利用できるので、何もコーディングする必要はありません:)


2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

いくつかの投稿問題を修正でどのようにあなたの答えのヘルプOPのための答えを持つテキスト追加
ρяσѕρєяK

0

これは、テキストをより簡単にオーバーレイできるように、背景を明るいか暗いかにぼかすために使用されます。必要に応じて、鮮やかさを有効にして、テキストをぼかしと一緒に明るく対照的な色でレンダリングできます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.