iOS 7スタイルのぼかしビュー


113

iOS7スタイルのぼかしビューを複製するコントロールを知っている人はいますか?

動作を複製するUIViewサブクラスの種類があると思います。

これらのタイプのビューとは、背景を非常に濃くぼかし、背景ビューからの引き寄せ効果があるタイプのビューのことです。

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


6
GPUImageが役立つ場合があります。
Maarten 2013年

@Anilよく問題は、ios7 SDKがリリースされたときに、アプリをios7のみに制限せずにこれを行うにはどうすればよいですか;)です。
エンディは、2013年


1
Appleは、まさにこれを行うUIImageカテゴリをリリースしました。それを見つけようとしているだけです。
フォグマイスター2013

1
コードはWWDCセッション201からリンクされています。githubで公開されているので、atmを見つけることができません。
フォグマイスター2013

回答:


40

これを行うには、Bin ZhangのRWBlurPopoverなどを変更できる場合があります。そのコンポーネントは、私のGPUImageを使用して、その下のコンポーネントにガウスぼかしを適用しますが、CIGaussianBlurを同じように簡単に使用することもできます。ただし、GPUImageは髪の毛の方が速いかもしれません。

ただし、そのコンポーネントは、提示しているビューの背後にあるビューをキャプチャできることに依存しており、このコンテンツの背後でアニメーション化するビューでは問題が発生する可能性があります。コアグラフィックスを経由して背景ビューをラスタライズする必要があるため、処理速度が低下するため、アニメーションビューのオーバーレイでこれを実行するための十分な直接アクセス権がない可能性があります。

上記の更新として、私は最近、可変半径をサポートするようにGPUImageのブラーを作り直し、iOS 7のコントロールセンタービューでブラーサイズを完全に複製できるようにしました。それから、Appleがここで使用しているように見える適切なぼかしサイズと色補正をカプセル化するGPUImageiOS7BlurFilterクラスを作成しました。これは、GPUImageのぼかし(右側)と組み込みのぼかし(左側)の比較です。

アップルのぼかし GPUImageのぼかし

4Xダウンサンプリング/アップサンプリングを使用して、ガウスぼかしが動作する必要があるピクセルの数を減らします。そのため、iPhone 4Sはこの操作を使用して約30 msで画面全体をぼかすことができます。

コンテンツをこのブラーの背後にあるビューからパフォーマンスの高い方法でこのブラーに引き込む方法には、まだ課題があります。


では、Appleはそれをどうやって引き延ばしていると思いますか?カメラアプリを開いてコントロールセンター(下から設定画面)を開くと、カメラが見ているとおりにぼかしが適用されます。
スノーマン

2
@maq-システム上のすべてへの内部アクセスを支援します。OSを開発している人ができることは、パブリックインターフェイスでできることとは大きく異なります。
ブラッド・ラーソン

3
@maq-特にカメラフィード。これを行う1つの方法は、GPUImageを使用して(AV Foundation経由で)カメラフレームをプルし、その両方をライブカメラ出力のGPUImageViewに出力し、同時にガウスぼかし(およびおそらくクロップ)にフィードすることです。ぼやけたビューの位置を合わせるために)、その出力を、コントロールの背後にあるぼやけたコンテンツを表示する別のGPUImageViewに出力します。これは、カメラフレームからOpenGL ESへの高速パスがあるために可能ですが、一般的なUI要素には同様のものはありません。
ブラッド・ラーソン

1
プログラムでUIViewのスクリーンショットを撮り、GPUImageGaussianBlurFilterを使用して同様の効果を作成しようとしていますが、結果はAppleスタイルのものとは大きく異なります。フィルターはグリッド内でぼやけているように見え、どこにでも四角が表示されています。Apple'sは1つの滑らかなシートです。
雪だるま2013年

1
@maq-以前に高ぼかし半径にバグがあったため、リポジトリから最新のコードを使用していることを確認してください。とはいえ、ぼかしはデフォルトで9ピクセルの領域のみをサンプリングするので、ぼかしの乗数をそのポイントを超えて増やすと、ピクセルのスキップによるアーティファクトが見え始めます。これはパフォーマンス上の理由で行われますが、頂点シェーダーとフラグメントシェーダーを変更して、より多くのピクセルをサンプリングできます。または、CIGaussianBlurを適用してみてください。CIGaussianBlurは、より一般化されたブラー実装を備えています。最近の1つ、このぼかしをより大きな半径に拡張します。
ブラッド・ラーソン

28

私はFXBlurViewiOS5 +でうまく機能するものを使っています

https://github.com/nicklockwood/FXBlurView

CocoaPods:

-> FXBlurView (1.3.1)
   UIView subclass that replicates the iOS 7 realtime background blur effect, but works on iOS 5 and above.
   pod 'FXBlurView', '~> 1.3.1'
   - Homepage: http://github.com/nicklockwood/FXBlurView
   - Source:   https://github.com/nicklockwood/FXBlurView.git
   - Versions: 1.3.1, 1.3, 1.2, 1.1, 1.0 [master repo]

私はそれを使って追加しました:

FXBlurView *blurView = [[FXBlurView alloc] initWithFrame:CGRectMake(50, 50, 150, 150)];
[self.blurView setDynamic:YES];
[self.view addSubview:self.blurView];

2
FXBlurViewを使用するためのトリックはありますか?私は試してみましたが、iPhone 5での表示が遅くなりました。彼らのデモプロジェクトは問題なく動作します。かなり奇妙です。
クリス、2014

何をしたいかによります。私のFXBlurView上に置くと、UIScrollView私も遅れた結果を得ました。これは、ぼかしを追加する方法に関係していると思います。Appleは、私が誤解していない限り、独自のブラーを使用するときにGPUに直接アクセスしますが、これは開発者として行うことはできません。したがって、@ cprcrackソリューションが実際にはここでの最良のソリューションです。
Paul Peelen 14

2
FXBlurViewでデバイスの回転をどのように処理しましたか?現在、モーダルダイアログを表示しています。ダイアログ自体は正常に回転しますが、背景は間違った方法で押しつぶされます(基本的に回転後に更新する必要があります)。
fatuhoku 2014年

1
もちろん、FXBlurViewは良いオプションですが、CPU使用率の問題がある場合。私は他のblurViewを好むよりも。UICollectionVIewとUITableViewでこれを使用しますが、CPU使用率が増加します。次の実行では、それらの割り当てをコメントし、それが正常になります。私はこれが誰かを助けることを願っています。
Vatsal Shukla

27

警告:コメントの誰かが、Appleがこの手法を使用するアプリを拒否すると述べました。それは私には起こりませんでしたが、あなたの考慮のためです。

これには驚かれるかもしれませんが、UIToolbar使用できます。UIToolbarには、すでにその標準的な効果が含まれています(iOS 7以降のみ)。あなたはコントローラのviewDidLoadを表示します:

self.view.opaque = NO;
self.view.backgroundColor = [UIColor clearColor]; // Be sure in fact that EVERY background in your view's hierarchy is totally or at least partially transparent for a kind effect!

UIToolbar *fakeToolbar = [[UIToolbar alloc] initWithFrame:self.view.bounds];
fakeToolbar.autoresizingMask = self.view.autoresizingMask;
// fakeToolbar.barTintColor = [UIColor white]; // Customize base color to a non-standard one if you wish
[self.view insertSubview:fakeToolbar atIndex:0]; // Place it below everything

1
はい、びっくりしました。私は確認しました、このアイデアは機能します。viewDidLoadこのように1行だけ変更しました。-(void)viewDidLoad {[super viewDidLoad]; self.view = [[UIToolbar alloc] initWithFrame:CGRectZero]; 私の場合、ビューをプログラムでレイアウトします(古いスタイル)。UIToolbarはUIViewを継承するため、このソリューションに賛成票を投じます。このソリューションでは基本的に問題は発生しません。このソリューションの開発とテストを進めながら、さらにテストを行います。
Ashok 2013年

これは素晴らしいアイデアであり、非常にうまく機能しているようです。もっとコントロールしたいのですが、これはそれで十分です!とは言っても、@ SudhirJonathanは、著者がこれを次のレベルに引き上げる上記のリンクに言及しました-彼はUIToolBarからCALAYERを盗み、再利用します!鮮やかさ!
David H

2
本当に?どの根拠に?それはプライベートAPIを使用しておらず、物事を行うすべての革新的な方法が拒否されると、多くの効果は不可能になります...
TheEye

私のiOS 7.1 iPhoneに従事
marsant

ぼやけを「なくす」方法はありますか?
maxisme 2014年


13

ぼやけたオーバーレイを取得するための最良の新しい方法は、新しいiOS 8機能UIVisualEffectViewを使用することです。

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *bluredView = [[UIVisualEffectView alloc] initWithEffect:effect];

bluredView.frame = self.view.bounds;

[self.view addSubview:bluredView];

UIBlurEffectは3種類のスタイルをサポートします。ダーク、ライト、エクストラライト。


1

UIViewのサブクラスであるUIToolBarを使用してクラスを作成し、別のビューコントローラーでインスタンス化できます。このアプローチは、ライブフィードバック(この場合はAVCaptureSessionの場合)を提供する(UIViewによってサブクラス化された)半透明のUIToolBarを示しています。

YourUIView.h

#import <UIKit/UIKit.h>

@interface YourUIView : UIView
@property (nonatomic, strong) UIColor *blurTintColor;
@property (nonatomic, strong) UIToolbar *toolbar;
@end

YourUIView.m

#import "YourUIView.h"

@implementation YourUIView

- (instancetype)init
{
    self = [super init];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    // If we don't clip to bounds the toolbar draws a thin shadow on top
    [self setClipsToBounds:YES];

    if (![self toolbar]) {
        [self setToolbar:[[UIToolbar alloc] initWithFrame:[self bounds]]];
        [self.toolbar setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self insertSubview:[self toolbar] atIndex:0];

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_toolbar]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:NSDictionaryOfVariableBindings(_toolbar)]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_toolbar]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:NSDictionaryOfVariableBindings(_toolbar)]];
    }
}

- (void) setBlurTintColor:(UIColor *)blurTintColor {
    [self.toolbar setBarTintColor:blurTintColor];
}

@end

上記のUIViewをカスタマイズしたら、ViewControllerのサブクラスであるクラスを作成します。以下に、AVCaptureセッションを使用するクラスを作成しました。Appleの組み込みカメラ構成をオーバーライドするには、AVCaptureSessionを使用する必要があります。したがって、YourUIViewクラスからの透明のUIToolBarをオーバーレイできます。

YourViewController.h

#import <UIKit/UIKit.h>

@interface YourViewController : UIViewController
@property (strong, nonatomic) UIView *frameForCapture;
@end

YourViewController.m

#import "YourViewController.h"
#import <AVFoundation/AVFoundation.h>
#import "TestView.h"

@interface YourViewController ()
@property (strong, nonatomic) UIButton *displayToolBar;

@end

@implementation YourViewController


AVCaptureStillImageOutput *stillImageOutput;
AVCaptureSession *session;

- (void) viewWillAppear:(BOOL)animated
{
    session = [[AVCaptureSession alloc] init];
    [session setSessionPreset:AVCaptureSessionPresetPhoto];

    AVCaptureDevice *inputDevice = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    NSError *error;
    AVCaptureDeviceInput *deviceInput = [AVCaptureDeviceInput deviceInputWithDevice:inputDevice error:&error];

    if ([session canAddInput:deviceInput]) {
        [session addInput:deviceInput];
    }

    AVCaptureVideoPreviewLayer *previewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];
    [previewLayer setVideoGravity:AVLayerVideoGravityResizeAspectFill];
    CALayer *rootLayer = [[self view] layer];
    [rootLayer setMasksToBounds:YES];
    CGRect frame = [[UIScreen mainScreen] bounds];

    self.frameForCapture.frame = frame;

    [previewLayer setFrame:frame];

    [rootLayer insertSublayer:previewLayer atIndex:0];

    stillImageOutput = [[AVCaptureStillImageOutput alloc] init];
    NSDictionary *outputSettings = [[NSDictionary alloc] initWithObjectsAndKeys:AVVideoCodecJPEG, AVVideoCodecKey, nil];
    [stillImageOutput setOutputSettings:outputSettings];

    [session addOutput:stillImageOutput];

    [session startRunning];

    [self.navigationController setNavigationBarHidden:YES animated:animated];
    [super viewWillAppear:animated];
}


- (void)viewDidLoad
{
    [super viewDidLoad];

    /* Open button */

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 350, self.view.bounds.size.width, 50)];
    [button addTarget:self action:@selector(showYourUIView:) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Open" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    button.backgroundColor = [UIColor greenColor];
    [self.view addSubview:button];

    UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 50, self.view.bounds.size.width, 50)];
    [anotherButton addTarget:self action:@selector(showYourUIView:) forControlEvents:UIControlEventTouchUpInside];
    [anotherButton setTitle:@"Open" forState:UIControlStateNormal];
    [anotherButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    anotherButton.backgroundColor = [UIColor redColor];
    [self.view addSubview:anotherButton];

}

- (void) showYourUIView:(id) sender
{
    TestView *blurView = [TestView new];
    [blurView setFrame:self.view.bounds];
    [self.view addSubview:blurView];
}


@end

答えは質問とはまったく無関係のようです。
組み合わせ

@combinatorialこれは、透過ビューを別のビューコントローラに追加する効率的な方法の1つです。他のユーザーが推奨しているように、ぼやけた背景画像を追加するだけでなく、ライブフィードバックに使用できることを示すためにAVCaptureコードを含めました。
74U n3U7r1no 14

わかりました、申し訳ありませんが、アプローチとそれを使用する理由をまとめたものを最初に追加することをお勧めします。
コンビナトリアル

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