আইওএস 7 স্টাইলের ব্লার ভিউ


113

আইওএস 7 স্টাইলের অস্পষ্ট দর্শনগুলির প্রতিরূপ তৈরি করা এমন কোনও নিয়ন্ত্রণের কথা কি কেউ জানেন?

আমি ধরে নিচ্ছি এমন কিছু ইউআইভিউ সাবক্লাস থাকতে পারে যা আচরণটির প্রতিলিপি তৈরি করবে।

আমি এই ধরণের মতামতের কথা বলছি যা পটভূমিকে অত্যন্ত ঘন করে দেয় যাতে তাদের পটভূমির দর্শন থেকে প্রভাব পড়ে।

এখানে চিত্র বর্ণনা লিখুন


6
জিপিইউআইমেজ সাহায্য করতে পারে।
মার্টেন

@ অ্যানিল ভাল তবে প্রশ্নটি তখনই আসবে যখন আইওএস 7 এসডিকে প্রকাশিত হবে আমি কেবল আমার অ্যাপ্লিকেশনটিকে আইওএস 7-এ সীমাবদ্ধ না রেখে কীভাবে এটি করতে পারি;)।
endy


1
অ্যাপল একটি ইউআইআইমেজ বিভাগ প্রকাশ করেছে যা ঠিক এটি করে। এটি সন্ধান করার চেষ্টা করছি।
ফগমিস্টার

1
কোডটি ডাব্লুডাব্লুডিসি সেশন ২০১২ থেকে লিঙ্কযুক্ত It's এটি গিথুব এ প্রকাশ্য আমি এটি এটিএম খুঁজে পাচ্ছি না।
ফোগমিস্টার

উত্তর:


40

এটি করার জন্য আপনি বিন জাংয়ের আরডাব্লুব্লিউরপোভারের মতো কিছু সংশোধন করতে সক্ষম হতে পারেন । এই উপাদানটি আমার জিপিইউআইমেজটিকে নীচের অংশগুলিতে গাউসিয়ান ব্লার প্রয়োগ করতে ব্যবহার করে তবে আপনি কেবল তার জন্য খুব সহজেই সিআইজিউশিয়ান ব্লুর ব্যবহার করতে পারেন। জিপিইউআইমেজ যদিও দ্রুত চুল হতে পারে ।

এই উপাদানটি আপনি উপস্থাপন করছেন এমনটির পেছনের দৃষ্টিভঙ্গি ক্যাপচার করতে সক্ষম হওয়ার উপর নির্ভর করে এবং এই সামগ্রীর পিছনে সঞ্চারিত এমন দৃষ্টিভঙ্গিতে সমস্যা হতে পারে। ব্যাকগ্রাউন্ড ভিউটি রাস্টারাইজ করার জন্য কোর গ্রাফিক্সের মাধ্যমে একটি ট্রিপ নেওয়ার প্রয়োজনীয়তা হ্রাস পাবে, সুতরাং অ্যানিমেটিং ভিউগুলিতে ওভারলেগুলির জন্য পারফরম্যান্ট পদ্ধতিতে এটি করতে সক্ষম হওয়ার জন্য আমাদের সম্ভবত পর্যাপ্ত সরাসরি অ্যাক্সেস নেই।

উপরের আপডেট হিসাবে আমি সম্প্রতি জিপিইউআইমেজে ব্লারগুলিকে পরিবর্তনশীল রেডিয়িকে সমর্থন করতে পুনরায় কাজ করেছি, যা আইওএস 7 এর নিয়ন্ত্রণ কেন্দ্রের দৃশ্যে অস্পষ্ট আকারের সম্পূর্ণ প্রতিলিপিটির অনুমতি দেয়। সেখান থেকে, আমি GPUImageiOS7BlurFilter ক্লাস তৈরি করেছি যা অ্যাপলটি এখানে ব্যবহার করছে বলে মনে হচ্ছে এমন উপযুক্ত অস্পষ্ট আকার এবং রঙ সংশোধনকে encapsulates। এইভাবে জিপিইউআইমেজ এর অস্পষ্টতা (ডানদিকে) অন্তর্নির্মিত অস্পষ্টতার সাথে (বাম দিকে) তুলনা করে:

অ্যাপলের ঝাপসা জিপিইউআইমেজের ব্লার

গাউসিয়ান ব্লার ওভার অপারেটিং করতে পিক্সেল সংখ্যা হ্রাস করতে আমি একটি 4 এক্স ডাউনসাম্পলিং / আপসাম্পলিং ব্যবহার করি, সুতরাং একটি আইফোন 4 এস এই অপারেশনটি ব্যবহার করে প্রায় 30 এমএসে পুরো পর্দাটি ঝাপসা করতে পারে।

পারফর্ম্যান্ট পদ্ধতিতে এর পিছনে থাকা ভিউগুলি থেকে কীভাবে বিষয়বস্তুটিকে এই অস্পষ্টতার মধ্যে টানা যায় তার চ্যালেঞ্জ আপনার কাছে রয়েছে।


সুতরাং আপনি কীভাবে মনে করেন অ্যাপল এটিকে বন্ধ করে দিচ্ছে? আপনি যদি ক্যামেরা অ্যাপ্লিকেশনটি ওপেন করেন এবং কন্ট্রোল সেন্টারটি (নীচ থেকে সেটিংসের স্ক্রিন) টানেন তবে অস্পষ্টতা ক্যামেরা যা দেখায় তা অনুসরণ করে।
স্নোম্যান

2
@ মাক - এটি সিস্টেমের সমস্ত কিছুতে হুডের নীচে প্রবেশ করতে সহায়তা করে। ওএস বিকাশকারী কেউ কী করতে পারে তা পাবলিক ইন্টারফেস আমাদের যা করতে দেয় তার থেকে খুব আলাদা।
ব্র্যাড লারসন

3
@ মাক - ক্যামেরা বিশেষত ফিড দেয়, হ্যাঁ। এটি করার একটি উপায় হ'ল জিপিইউআইমেজ ব্যবহার করা হবে ক্যামেরা ফ্রেমে টানতে (এভি ফাউন্ডেশনের মাধ্যমে) এবং তারপরে লাইভ ক্যামেরার আউটপুটটির জন্য জিপিইউআইমেজভিউতে সেই আউটপুট উভয়ই রাখা হবে এবং তারপরে সমান্তরালে গাউসিয়ান ব্লার (এবং সম্ভবত একটি ফসল) খাওয়ানো হবে অস্পষ্ট দৃশ্যের অবস্থানের সাথে মেলে) এবং সেই আউটপুটটি অন্য কোনও GPUImageView এর সাথে মিলিয়ে যায় যা আপনার নিয়ন্ত্রণগুলির পিছনে অস্পষ্ট সামগ্রী প্রদর্শন করবে। এটি সম্ভব কারণ কারণ আমাদের কাছে ক্যামেরা ফ্রেম থেকে ওপেনজিএল ইএস-তে একটি দ্রুত পথ রয়েছে, তবে জেনেরিক ইউআই উপাদানগুলির মতো আমাদের কাছে তেমন কিছু নেই।
ব্র্যাড লারসন

1
আমি একটি ইউআইভিউ প্রোগ্রামের স্ক্রিনশট নিচ্ছি এবং একই রকম প্রভাব তৈরির চেষ্টা করার জন্য জিপিইউআইমেজগাউসিয়ান ব্লুর ফিল্টার ব্যবহার করছি, তবে ফলাফলটি অ্যাপল স্টাইলের চেয়ে একদম আলাদা। ফিল্টারটি একটি গ্রিডে ঝাপসা হয়ে যাচ্ছে বলে মনে হচ্ছে, সর্বত্র দৃশ্যমান স্কোয়ারগুলি রয়েছে যেখানে অ্যাপল কেবলমাত্র একটি মসৃণ শীট।
স্নোম্যান

1
@ মাক - নিশ্চিত হয়ে নিন আপনি সংগ্রহশালা থেকে সর্বশেষতম কোডটি ব্যবহার করছেন, কারণ এর আগে উচ্চ ঝাপসা রেডিয়ায় একটি বাগ ছিল। এটি বলেছিল, অস্পষ্টতা কেবলমাত্র 9 পিক্সেল অঞ্চলটিকে ডিফল্টরূপে নমুনা দেয় এবং তাই আপনি যদি সেই ধাপের ধাপের জন্য গুণককে বাড়িয়ে দেন তবে আপনি পিক্সেলগুলি এড়িয়ে যাওয়া থেকে শিল্পকর্মগুলি দেখতে শুরু করবেন। এটি পারফরম্যান্সের কারণে করা হয় তবে আপনি বৃহত্তর পিক্সেলের নমুনার জন্য ভার্টেক্স এবং খণ্ডের শেডারগুলি সংশোধন করতে পারেন। এটি, বা একটি সিআইজিউশিয়ান ব্লুর প্রয়োগ করার চেষ্টা করুন, যা আরও সাধারণীকরণের ঝাপসা বাস্তবায়ন করেছে। এই দিনগুলির মধ্যে একটি, আমি এই অস্পষ্টতাটিকে আরও বড় রেডিতে প্রসারিত করব।
ব্র্যাড লারসন

28

আমি ব্যবহার করছি FXBlurViewযা আইওএস 5 + এ দুর্দান্ত কাজ করে

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 এ অল্প সংখ্যক দৃষ্টিতে ফলাফল পেয়েছি Their তাদের ডেমো প্রকল্পটি দুর্দান্ত কাজ করে। মোটামুটি বিজোড়।
ক্রিস

এটি আপনি কী করতে চান তার উপর নির্ভর করে। আমি যখন FXBlurViewএকটি শীর্ষে রাখি তখন আমি UIScrollViewএকটি অল্প ফলাফলও পেয়েছিলাম। আমি বিশ্বাস করি যেভাবে এটি অস্পষ্টভাবে যুক্ত হয়েছে তার সাথে এটি করতে হবে। অ্যাপল হ'ল আমি যদি ভুলভাবে ভুল না হয়ে থাকি তবে নিজের ঝাপসা ব্যবহার করার সময় সরাসরি জিপিইউতে অ্যাক্সেস করতে পারি, যা আমরা বিকাশকারী হিসাবে করতে পারি না। সুতরাং, @cprcrack সমাধান আসলে এখানে সেরা সমাধান।
পল পিলেন

2
আপনি কীভাবে FXBlurView এর সাহায্যে ডিভাইস রোটেশনগুলি পরিচালনা করেছেন? আমি এই মুহুর্তে একটি মডেল সংলাপ উপস্থাপন করছি; ডায়ালগটি নিজেই সূক্ষ্মভাবে ঘোরে তবে ব্যাকড্রপটি ভুল উপায়ে স্কোয়েশ করা হয়েছে (মূলত রোটেশনের পরে এটি আপডেট করা দরকার)।
ফতুহোকু

1
অবশ্যই, এফএক্সবি্লুরভিউ ভাল বিকল্প, তবে যখন সিপিইউ ব্যবহারের বিষয়টি থাকে। আমি অন্যান্য ব্লারভিউয়ের চেয়ে পছন্দ করি। আমি এটিকে আমার ইউআইকোলিকেশনভিউ এবং ইউআইটিএবল ভিউতে ব্যবহার করি তবে এটি আমার সিপিইউ ব্যবহার বাড়ায়। পরের রানে আমি সেই বরাদ্দের মন্তব্য করি এবং এটি স্বাভাবিক হয়ে যায়। আমি আশা করি, এটি কাউকে সাহায্য করবে।
ভাতসাল শুক্ল

27

সতর্কতা: মন্তব্যগুলির মধ্যে কেউ বলেছেন যে অ্যাপল এই কৌশলটি ব্যবহার করে অ্যাপ্লিকেশনগুলি প্রত্যাখ্যান করে। এটি আমার সাথে ঘটেনি, তবে কেবল আপনার বিবেচনার জন্য।

এটি আপনাকে বিস্মিত করতে পারে তবে আপনি একটি ইউআইটিুলবার ব্যবহার করতে পারেন , এটি ইতিমধ্যে সেই মানক প্রভাবটি (কেবলমাত্র আইওএস 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। - (অকার্যকর) ভিউডিডলড {[সুপার ভিউডিডলড]; স্ব.উইউভিউ = [[ইউআইটিুলবার বরাদ্দ] initWithFrame: সিজিআরেক্টজিরো]; Case আমার ক্ষেত্রে, আমি আমার মতামত প্রোগ্রামক্রমে বিন্যাস করি (পুরানো শৈলী)। আমি এই সমাধানটিকে উত্সাহিত করেছি কারণ ইউআইটিউলবার ইউআইভিউর উত্তরাধিকার সূত্রে তাই মৌলিকভাবে আমি এই সমাধানটিতে কোনও সমস্যা দেখি না। উন্নয়নের পাশাপাশি এই সমাধানটি পরীক্ষা করার সাথে সাথে আমি আরও পরীক্ষা করব।
অশোক

এটি দুর্দান্ত ধারণা এবং এটি সত্যই ভালভাবে কাজ করে বলে মনে হচ্ছে। আশা করি আমার আরও নিয়ন্ত্রণ থাকত তবে এটি যতটা ভাল হয় ততই ভাল! এতে বলা হয়েছে, @ সুধীরজানাথন উপরে একটি লিঙ্ক উল্লেখ করেছেন যেখানে লেখক এটিকে পরবর্তী স্তরে নিয়ে যান - তিনি একটি ইউআইটিউলবার থেকে ক্লেয়ারকে স্টিল করেন এবং পুনরায় উদ্দেশ্য করে! উজ্জ্বল!
ডেভিড এইচ

2
সত্যি? কোন ভিত্তিতে? এটি কোনও প্রাইভেট এপিআই ব্যবহার করছে না, এবং যদি কাজ করার সমস্ত উদ্ভাবনী পদ্ধতিগুলি প্রচুর পরিমাণে প্রত্যাখ্যান করা সম্ভব হয় ...
TheEye

আমার আইওএস 7.1
আইফোনটিতে

অস্পষ্টতা "ডাই ডাউন" করার কোন উপায় আছে কি?
ম্যাক্সিম্মে

13

IOS8 যেহেতু আপনি UIBlurEffect ব্যবহার করতে পারেন ।

ইউআইব্লিউরএফেক্ট এবং ইউআইআইভিবারনসিএফেক্ট সহ আইওএস 8 স্যাম্পলারের একটি ভাল উদাহরণ রয়েছে


2
অলসতার জন্য: UIVisualEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
রিক সান্টোস

13

অস্পষ্ট ওভারলে পাওয়ার সর্বোত্তম নতুন উপায় হ'ল নতুন আইওএস 8 বৈশিষ্ট্য ইউআইভিউজুয়ালএফেক্টভিউ use

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

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

bluredView.frame = self.view.bounds;

[self.view addSubview:bluredView];

UIBlurEffect তিন ধরণের স্টাইল সমর্থন করে। গা ,়, হালকা এবং এক্সট্রা লাইট।


1

আপনি একটি ইউআইটিউলবার দিয়ে একটি শ্রেণি তৈরি করতে পারেন যা ইউআইভিউর একটি সাবক্লাস এবং এটি আলাদা ভিউ কন্ট্রোলারে ইনস্ট্যান্ট করতে পারে। এই পদ্ধতির একটি স্বচ্ছ UIToolBar (ইউআইভিউ দ্বারা উপবিষ্ট) প্রদর্শিত হয় যা সরাসরি প্রতিক্রিয়া সরবরাহ করে (এই ক্ষেত্রে একটি 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

উপরের ইউআইভিউ ভিউটি কাস্টমাইজ হয়ে গেলে, এগিয়ে যান এবং একটি শ্রেণিবদ্ধ তৈরি করুন যা একটি ভিউকন্ট্রোলারের একটি সাবক্লাস। নীচে আমি একটি ক্লাস তৈরি করেছি যা একটি অ্যাভিক্যাপচার সেশন ব্যবহার করছে। অ্যাপলের বিল্ট ইন ক্যামেরা কনফিগারেশনকে ওভাররাইড করার জন্য আপনাকে অবশ্যই AVCaptureSession ব্যবহার করতে হবে। সুতরাং আপনি আপনার ইউআইউভিউ ক্লাস থেকে প্রশান্ত 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 এটি অন্য দেখার নিয়ামককে স্বচ্ছ দৃষ্টিভঙ্গি যুক্ত করার আরও কার্যকর উপায়। অন্যান্য ব্যবহারকারীরা যেমন সুপারিশ করেছে ঠিক তেমন একটি অস্পষ্ট ব্যাকগ্রাউন্ড চিত্র যুক্ত করার চেয়ে এটি সরাসরি প্রতিক্রিয়ার জন্য ব্যবহার করা যেতে পারে তা দেখানোর জন্য আমি AVCapture কোডটি অন্তর্ভুক্ত করেছি।
74U n3U7r1no

ঠিক আছে, দুঃখিত, আপনি শুরুতে এমন কিছু যুক্ত করতে চাইতে পারেন যা পদ্ধতির সংক্ষিপ্তসার এবং এটি ব্যবহারের কারণগুলি বলে।
সংযুক্তি

@combinatorial ধন্যবাদ
74U n3U7r1no
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.