ios - ぼかしオーバーレイ ビューの作成

Question

新しい iOS のミュージック アプリでは、ぼやけたビューの後ろにアルバム カバーが表示されます。

どうすればそのようなことを達成できるでしょうか。ドキュメントを読みましたが、何も見つかりませんでした。

Answer 1

を使用UIVisualEffectViewして、この効果を得ることができます。これは、パフォーマンスと優れたバッテリ寿命のために微調整されたネイティブ API であり、実装も簡単です。

迅速：

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //always fill the view
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

目的 C:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

このビュー コントローラーをモーダルで表示して基になるコンテンツをぼかす場合は、モーダル プレゼンテーション スタイルを Over Current Context に設定し、背景色を clear に設定して、これがオーバートップで表示された後に基になるビュー コントローラーが表示されたままになるようにする必要があります。

Answer 2

コードを投稿することは許可されていないと思いますが、WWDC サンプル コードについて言及している上記の投稿は正しいです。リンクは次のとおりです: https://developer.apple.com/downloads/index.action?name=WWDC%202013

探しているファイルは UIImage のカテゴリで、メソッドは applyLightEffect です。

上記のコメントで述べたように、Apple Blur には彩度があり、ぼかし以外にもさまざまなことが行われています。単純なぼかしではうまくいきません...彼らのスタイルをエミュレートしたい場合.

Answer 3

CIGaussianBlur を使用した Swift での高速な実装を次に示します。

func blur(image image: UIImage) -> UIImage {
    let radius: CGFloat = 20;
    let context = CIContext(options: nil);
    let inputImage = CIImage(CGImage: image.CGImage!);
    let filter = CIFilter(name: "CIGaussianBlur");
    filter?.setValue(inputImage, forKey: kCIInputImageKey);
    filter?.setValue("\(radius)", forKey:kCIInputRadiusKey);
    let result = filter?.valueForKey(kCIOutputImageKey) as! CIImage;
    let rect = CGRectMake(radius * 2, radius * 2, image.size.width - radius * 4, image.size.height - radius * 4)
    let cgImage = context.createCGImage(result, fromRect: rect);
    let returnImage = UIImage(CGImage: cgImage);

    return returnImage;
}

Answer 4

これに対する最も簡単な解決策は、iOS 7 でその背後にあるすべてをぼかす UIToolbar をオーバーライドすることだと思います。

UIToolbarの代わりにのサブクラスにするだけで、どのビューでも実行できますUIView。たとえば、UIViewControllerのプロパティを使用して実行することもできます...view

1）「のサブクラス」である新しいクラスを作成し、「UIViewControllerユーザーインターフェイスにXIBを使用」のチェックボックスをオンにします。

2) ビューを選択し、右側のパネル (alt-command-3) の ID インスペクタに移動します。「クラス」を に変更しUIToolbarます。属性インスペクタ (alt-command-4) に移動し、「背景」の色を「クリア カラー」に変更します。

3) サブビューをメイン ビューに追加し、インターフェイスの IBOutlet に接続します。それを呼び出しますbackgroundColorView。.mこれは、実装 ( ) ファイルのプライベート カテゴリとして、次のようになります。

@interface BlurExampleViewController ()
@property (weak, nonatomic) IBOutlet UIView *backgroundColorView;
@end

4) ビュー コントローラの実装 ( .m) ファイルに移動し、-viewDidLoadメソッドを次のように変更します。

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.barStyle = UIBarStyleBlack; // this will give a black blur as in the original post
    self.backgroundColorView.opaque = NO;
    self.backgroundColorView.alpha = 0.5;
    self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
}

これにより、暗い灰色のビューが得られ、その背後にあるすべてがぼやけます. OS/SDK が提供するすべての機能を利用して、おかしなことをしたり、中心的な画像のぼやけを遅らせたりする必要はありません。

次のように、このView Controllerのビューを別のビューに追加できます。

[self addChildViewController:self.blurViewController];
[self.view addSubview:self.blurViewController.view];
[self.blurViewController didMoveToParentViewController:self];

// animate the self.blurViewController into view

ご不明な点がございましたら、お気軽にお問い合わせください。喜んでお手伝いさせていただきます。

---

編集

UIToolbar は 7.0.3 で変更され、色付きのぼかしを使用すると望ましくない効果が生じる可能性があります。

以前はを使用して色を設定できましたbarTintColorが、以前にこれを行っていた場合は、アルファ コンポーネントを 1 未満に設定する必要があります。そうしないと、UIToolbar は完全に不透明な色になり、ぼかしがなくなります。

これは次のように実現できます: (注意してselfいただきたいのは のサブクラスですUIToolbar)

UIColor *color = [UIColor blueColor]; // for example
self.barTintColor = [color colorWithAlphaComponent:0.5];

これにより、ぼやけたビューに青みがかった色合いが与えられます。

Answer 5

これが誰かに役立つ場合は、Jordan H の回答に基づいて作成した迅速な拡張機能を次に示します。これは Swift 5 で記述されており、Objective C から使用できます。

extension UIView {

    @objc func blurBackground(style: UIBlurEffect.Style, fallbackColor: UIColor) {
        if !UIAccessibility.isReduceTransparencyEnabled {
            self.backgroundColor = .clear

            let blurEffect = UIBlurEffect(style: style)
            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            //always fill the view
            blurEffectView.frame = self.self.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            self.insertSubview(blurEffectView, at: 0)
        } else {
            self.backgroundColor = fallbackColor
        }
    }

}

注: テキストに影響を与えずに UILabel の背景をぼかしたい場合は、コンテナー UIView を作成し、UILabel をコンテナー UIView にサブビューとして追加し、UILabel の backgroundColor を UIColor.clear に設定してから、blurBackground(style : UIBlurEffect.Style, fallbackColor: UIColor) をコンテナー UIView に追加します。Swift 5 で書かれた簡単な例を次に示します。

let frame = CGRect(x: 50, y: 200, width: 200, height: 50)
let containerView = UIView(frame: frame)
let label = UILabel(frame: frame)
label.text = "Some Text"
label.backgroundColor = UIColor.clear
containerView.addSubview(label)
containerView.blurBackground(style: .dark, fallbackColor: UIColor.black)

Answer 6

目的-C

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = self.accessImageView.bounds;
[self.accessImageView addSubview:visualEffectView];

スイフト 3.0

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

から: https://stackoverflow.com/a/24083728/4020910

Answer 7

UIImageEffects の使用

より詳細に制御したい場合は、Apple のUIImageEffectsサンプル コードを利用できます。

UIImageEffects Apple の Developer Library からコードをコピーできます: Blurring and Tinting an Image

そして、これを適用する方法は次のとおりです。

#import "UIImageEffects.h"
...

self.originalImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];

Answer 8

ぼやけた画像を返すためのKevの回答のSwift 3バージョン-

func blurBgImage(image: UIImage) -> UIImage? {
        let radius: CGFloat = 20;
        let context = CIContext(options: nil);
        let inputImage = CIImage(cgImage: image.cgImage!);
        let filter = CIFilter(name: "CIGaussianBlur");
        filter?.setValue(inputImage, forKey: kCIInputImageKey);
        filter?.setValue("\(radius)", forKey:kCIInputRadiusKey);

        if let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage{

            let rect = CGRect(origin: CGPoint(x: radius * 2,y :radius * 2), size: CGSize(width: image.size.width - radius * 4, height: image.size.height - radius * 4))

            if let cgImage = context.createCGImage(result, from: rect){
                return UIImage(cgImage: cgImage);
                }
        }
        return nil;
    }

Answer 9

Apple は、UIImage+ImageEffects.h と呼ばれる UIImage クラスの拡張機能を提供しています。このクラスには、ビューをぼかすために必要なメソッドがあります

Answer 10

「ぼかし付き視覚効果ビュー」と「ぼかしと鮮やかさ付き視覚効果ビュー」を使用して、背景のぼかしを直接作成できます。

iOSアプリで背景ぼかしを作るのに必要な作業は...

1. Object Library で「Visual Effect View with Blur」を検索します。

ステップ 1 画像

2. ストーリーボードで「ぼかしのある視覚効果ビュー」をドラッグしてセットアップします...

ステップ 2 画像

3. 最後に... アプリの背景をぼかします。

ボタンをクリックする前のアプリケーションレイアウト！

アプリケーション全体の背景をぼかすボタンをクリックした後のアプリケーション ビュー!