iOS 7风格模糊视图

时间:2013-06-11 04:45:16

标签: ios objective-c core-graphics

是否有人知道将复制iOS7样式模糊视图的任何控件。

我在假设可以有某种UIView子类来复制这种行为。

我说的是这些类型的视图,它们背景非常厚,因此它们具有背景视图中的拉力效果。

enter image description here

6 个答案:

答案 0 :(得分:41)

您可以修改Bin Zhang的RWBlurPopover之类的内容来执行此操作。该组件使用我的GPUImage将高斯模糊应用于其下面的组件,但您也可以轻松地使用CIGaussianBlur。 GPUImage可能是a hair faster though

该组件依赖于您能够捕获您正在呈现的视图背后的视图,并且可能在使用此内容背后的动画视图时遇到问题。需要通过Core Graphics浏览栅格化背景视图会降低速度,因此我们可能没有足够的直接访问权限,无法以高效的方式执行此操作,以便在动画视图上进行叠加。

作为对上述内容的更新,我最近重新设计了GPUImage中的模糊以支持变量半径,允许在iOS 7的控制中心视图中完全复制模糊大小。从那时起,我创建了GPUImageiOS7BlurFilter类,它封装了Apple似乎在这里使用的正确模糊大小和颜色校正。这就是GPUImage的模糊(右侧)与内置模糊(左侧)的比较:

Apple's blur GPUImage's blur

我使用4倍下采样/上采样来减少高斯模糊操作所需的像素数,因此iPhone 4S可以使用此操作在大约30毫秒内模糊整个屏幕。

你仍然面临着如何以高效的方式将内容从这个背后的视图中提取出来的挑战。

答案 1 :(得分:29)

我正在使用FXBlurView,它在iOS5 +上运行良好

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 :(得分:27)

警告:评论中有人声称Apple拒绝使用此技术的应用程序。这不是发生在我身上,只是为了你的考虑。

这可能会让您感到惊讶,但您可以使用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

答案 3 :(得分:13)

从iOS 8开始,您可以使用UIBlurEffect

iOS8SamplerUIBlurEffectUIVibrancyEffect有很好的例子。

答案 4 :(得分: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支持三种Style。 Dark,Light和ExtraLight。

答案 5 :(得分:1)

您可以使用UIToolBar创建一个类,该UIToolBar是UIView的子类,并在单独的视图控制器中实例化它。这种方法演示了一个半透明的UIToolBar(UIView子类),提供实时反馈(在本例中为AVCaptureSession)。

<强> 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会话的类。您必须使用AVCaptureSession才能覆盖Apple内置的摄像头配置。因此,您可以从 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