iOS 7 स्टाइल ब्लर व्यू


113

क्या किसी को किसी भी नियंत्रण का पता है जो iOS7 शैली के धुंधले विचारों को दोहराएगा।

मैं मान रहा हूं कि कुछ प्रकार के उविवि उपवर्ग हो सकते हैं जो व्यवहार को दोहराएंगे।

मैं इन प्रकार के विचारों के बारे में बात कर रहा हूं, जो पृष्ठभूमि को बहुत मोटे तौर पर धुंधला करते हैं ताकि वे पृष्ठभूमि दृश्य से प्रभाव खींच सकें।

यहां छवि विवरण दर्ज करें


6
GPUImage मदद कर सकता है।
मार्टन

@ अच्छी तरह से तो सवाल यह होगा कि जब ios7 SDK जारी किया गया है तो मैं अपने ऐप को केवल ios7 तक सीमित किए बिना यह कैसे कर सकता हूं;)।
एंडी


1
Apple ने एक UIImage श्रेणी जारी की है जो ठीक यही करता है। बस इसे खोजने की कोशिश कर रहा है।
फोगमिस्टर

1
कोड WWDC सत्र 201 से जुड़ा हुआ है। यह जनता पर है कि मैं सिर्फ इसे नहीं पा सकता।
फोगमिस्टर

जवाबों:


40

आप ऐसा करने के लिए बिन झांग RWBlurPopover की तरह कुछ को संशोधित करने में सक्षम हो सकता है । यह घटक मेरे GPUImage का उपयोग इसके नीचे के घटकों के लिए एक गाऊसी धुंधला लागू करने के लिए करता है, लेकिन आप आसानी से उसी के लिए एक CIGaussianBlur का उपयोग कर सकते हैं। GPUImage हालांकि तेजी से एक बाल हो सकता है

यह घटक आप पर निर्भर करता है कि आप जो प्रस्तुत कर रहे हैं, उसके पीछे के दृश्य को कैप्चर करने में सक्षम है, और इस सामग्री के पीछे के चेतन को देखने में परेशानी हो सकती है। बैकग्राउंड दृश्य को तेज करने के लिए कोर ग्राफिक्स के माध्यम से एक यात्रा लेने की आवश्यकता है, जिससे चीजें धीमी हो जाएंगी, इसलिए शायद हमारे पास पर्याप्त रूप से प्रत्यक्ष पहुंच नहीं है जो कि एनिमेशन के विचारों पर ओवरले के लिए एक शानदार तरीके से ऐसा करने में सक्षम हो।

उपरोक्त के अपडेट के रूप में, मैंने हाल ही में GPUImage में ब्लर को चर राड्य का समर्थन करने के लिए फिर से तैयार किया, जिससे iOS 7 के कंट्रोल सेंटर व्यू में ब्लर साइज की पूरी प्रतिकृति की अनुमति मिली। उस से, मैंने GPUImageiOS7BlurFilter क्लास बनाया जो उचित ब्लर साइज़ और कलर करेक्शन को इनकैप्सुलेट करता है जो Apple यहाँ उपयोग करता हुआ दिखाई देता है। यह है कि GPUImage का धब्बा (दाईं ओर) बिल्ट-इन ब्लर (बाईं ओर) की तुलना करता है:

Apple का धब्बा GPUImage का धब्बा

मैं एक 4X डाउनसमलिंग / अपसैंपलिंग का उपयोग करता हूं, जिससे पिक्सल्स की संख्या को कम करने के लिए गाऊसी ब्लर पर काम करना पड़ता है, इसलिए एक आईफोन 4 एस इस ऑपरेशन का उपयोग करके लगभग 30 एमएस में पूरी स्क्रीन को धुंधला कर सकता है।

अब भी आपके सामने यह चुनौती है कि इस धमाकेदार तरीके से सामग्री को कैसे आकर्षित किया जाए, जो एक शानदार तरीके से हो।


तो आपको कैसे लगता है कि Apple इसे खींच रहा है? यदि आप कैमरा ऐप खोलते हैं, और कंट्रोल सेंटर (नीचे से सेटिंग्स स्क्रीन) को खींचते हैं, तो कैमरा जो देखता है वह धुंधला हो जाता है।
स्नोमैन

2
@maq - यह सिस्टम पर हर चीज के लिए अंडर-हुड एक्सेस करने में मदद करता है। ओएस को विकसित करने वाला कोई व्यक्ति जो कर सकता है, वह उससे बहुत अलग है, जो सार्वजनिक इंटरफेस हमें करते हैं।
ब्रैड लार्सन

3
@maq - कैमरा विशेष रूप से फ़ीड करता है, हाँ। ऐसा करने का एक तरीका यह होगा कि कैमरा फ्रेम (AV फाउंडेशन के माध्यम से) में खींचने के लिए GPUImage का उपयोग किया जाए और फिर उस आउटपुट को लाइव कैमरा आउटपुट के लिए GPUImageView दोनों में और फिर समानांतर में एक गॉसियन कलंक (धुंधला और संभवतः एक फसल में खिलाया जाए) धुंधले दृश्य की स्थिति से मेल खाने के लिए) और उस आउटपुट को एक अन्य GPUImageView के साथ जो आपके नियंत्रण के पीछे धुंधली सामग्री को प्रदर्शित करेगा। यह संभव है, क्योंकि हमारे पास कैमरा फ्रेम से ओपनजीएल ईएस तक का एक तेज़ रास्ता है, लेकिन हमारे पास जेनेरिक यूआई तत्वों के समान कुछ भी नहीं है।
ब्रैड लार्सन

1
मैं एक UIView का एक स्क्रीनशॉट प्रोग्रामिक रूप से ले रहा हूं और एक समान प्रभाव बनाने की कोशिश करने के लिए GPUImageGaussianBlurFilter का उपयोग कर रहा हूं, लेकिन परिणाम Apple स्टाइल वन से बहुत अलग है। फिल्टर एक ग्रिड में धुंधला हो रहा है, हर जगह दिखाई वर्गों के साथ, जहां ऐप्पल सिर्फ एक चिकनी शीट है।
स्नोमैन

1
@maq - सुनिश्चित करें कि आप रिपॉजिटरी के नवीनतम कोड का उपयोग कर रहे हैं, क्योंकि पहले उच्च ब्लड रेडीआई पर एक बग था। उस ने कहा, धब्बा डिफ़ॉल्ट रूप से केवल 9-पिक्सेल क्षेत्र का नमूना लेता है, और यदि आप कलंक के लिए गुणक को बढ़ाते हैं तो उस बिंदु पर आप स्किपिंग पिक्सेल से कलाकृतियों को देखना शुरू करेंगे। यह प्रदर्शन कारणों से किया जाता है, लेकिन आप बड़ी संख्या में पिक्सेल का नमूना करने के लिए शीर्ष और खंड शेड को संशोधित कर सकते हैं। वह, या एक CIGaussianBlur को लागू करने का प्रयास करें, जिसमें अधिक सामान्यीकृत धुंधला कार्यान्वयन है। इन दिनों में से एक, मैं इस कलंक को बड़ी रेडी तक विस्तारित करूँगा।
ब्रैड लार्सन

28

मैं उपयोग कर रहा हूं 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
वहाँ FXBlurView का उपयोग करने के लिए कुछ चाल है? मैंने इसे आजमाया है, लेकिन हमने आईफोन 5 में बहुत ही भद्दे विचार किए हैं। उनका डेमो प्रोजेक्ट ठीक काम करता है। काफी अजीब है।
क्राइस

यह आप पर निर्भर करता है की आप क्या करना चाहते हो। जब मैं FXBlurViewएक के ऊपर लेटा था तो UIScrollViewमुझे भी एक बुरा परिणाम मिला। मेरा मानना ​​है कि धब्बा जोड़ने के तरीके के साथ यह करना है। Apple है, अगर मैं गलत नहीं हूँ, सीधे अपने स्वयं के कलंक का उपयोग करते समय GPU का उपयोग, जिसे हम डेवलपर्स के रूप में नहीं कर सकते। इसलिए, @ क्रेकक्रैक समाधान वास्तव में यहां सबसे अच्छा समाधान है।
पॉल पीलेन

2
आपने FXBlurView के साथ डिवाइस रोटेशन कैसे संभाला है? मैं इस समय एक मामूली संवाद प्रस्तुत कर रहा हूं; संवाद स्वयं ठीक घूमता है, लेकिन पृष्ठभूमि को गलत तरीके से पूरा किया जाता है (मूल रूप से रोटेशन के बाद इसे अपडेट करने की आवश्यकता होती है)।
फतुहोकू

1
बेशक, FXBlurView अच्छा विकल्प है, लेकिन जब CPU उपयोग की बात होती है। की तुलना में मैं अन्य blurView पसंद करते हैं। मैं अपने UICollectionVIew और UITableView में इसका उपयोग करता हूं लेकिन यह मेरे CPU उपयोग को बढ़ाता है। अगले रन में मैं उन आवंटन पर टिप्पणी करता हूं और यह सामान्य हो जाता है। मुझे उम्मीद है, यह किसी की मदद करेगा।
वत्सल शुक्ला

27

चेतावनी: टिप्पणियों में किसी ने कहा कि Apple इस तकनीक का उपयोग करके ऐप्स को अस्वीकार करता है। मेरे साथ ऐसा नहीं हुआ, लेकिन सिर्फ आपके विचार के लिए।

यह आपको आश्चर्यचकित कर सकता है, लेकिन आप एक यूआईटूलबार का उपयोग कर सकते हैं , जिसमें पहले से ही मानक प्रभाव (केवल आईओएस 7+) शामिल है। आप नियंत्रक के विचार देखें

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इस तरह से सिर्फ एक लाइन में बदलाव किया । - (शून्य) viewDidLoad {[सुपर viewDidLoad]; self.view = [[UIToolbar आवंटित] initWithFrame: CGRectZero]; } मेरे मामले में, मैं अपने विचारों को प्रोग्रामिक रूप से (पुरानी शैली) लेआउट करता हूं। मैं इस समाधान को आगे बढ़ाता हूं क्योंकि UIToolbar को मूल रूप से UIView विरासत में मिला है इसलिए मुझे इस समाधान में कोई समस्या नहीं दिख रही है। मैं विकास के साथ-साथ और अधिक परीक्षण करूंगा और इस समाधान का परीक्षण करूंगा।
अशोक

यह एक महान विचार है और यह वास्तव में अच्छी तरह से काम करने के लिए प्रकट होता है। काश मेरा अधिक नियंत्रण होता, लेकिन यह जितना अच्छा है उतना अच्छा है! उस ने कहा, @SudhirJonathan ने ऊपर एक लिंक का उल्लेख किया है जहां लेखक इसे अगले स्तर तक ले जाता है - HE STEALS THE CALAYER from UIToolBar and re-purposes! प्रतिभाशाली!
डेविड एच

2
वास्तव में? किस आधार पर? यह किसी भी निजी एपीआई का उपयोग नहीं कर रहा है, और यदि सभी चीजों को करने के नए तरीकों को खारिज कर दिया जाएगा तो बहुत सारे प्रभाव संभव नहीं होंगे ...
TheEye

अपने iOS 7.1 iPhone पर काम किया
marsant

क्या धुंधलापन "मरने" का एक तरीका है?
मैक्सिमम

13

IOS8 के बाद से आप UIBlurEffect का उपयोग कर सकते हैं ।

वहाँ पर एक अच्छा exemples हैं iOS8Sampler साथ UIBlurEffect और UIVibrancyEffect


2
आलसी के लिए: UIVisualEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
रिक सैंटोस

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 स्टाइल के तीन प्रकारों का समर्थन करता है। डार्क, लाइट और एक्स्ट्रालाइट।


1

आप एक 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 का उपयोग करना चाहिए। इस प्रकार आप YourUIVIV क्लास से ट्रेंकलसेंट यूआईटूलबर को ओवरले कर सकते हैं ।

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 यह एक पारदर्शी दृश्य को दूसरे दृश्य नियंत्रक में जोड़ने के अधिक कुशल तरीकों में से एक है। मैंने यह दिखाने के लिए AVCapture कोड को शामिल किया कि इसका उपयोग केवल एक धुंधली पृष्ठभूमि छवि जोड़ने के बजाय लाइव फ़ीडबैक के लिए किया जा सकता है, जैसा कि अन्य उपयोगकर्ताओं ने सुझाया है।
74U n3U7r1no

ठीक है, क्षमा याचना, आप शुरुआत में कुछ जोड़ना चाहते हैं जो दृष्टिकोण और इसके उपयोग के कारणों को संक्षेप में प्रस्तुत करता है।
मिश्रित

@combinatorial साभार
74U n3U7r1no
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.