Adding Blur Effekter på iOS
53
Del
31
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

Med iOS 7, vi så et skifte i Apples design paradigme for mobile enheter. Ikke bare gjorde de vedta den såkalte flat design, Apple også lagt noen elementer til dette mønsteret selv. En av disse tilsetninger er bruken av uskarpe-gjennomskinnelig bakgrunn for å formidle begrepet dybde og sammenheng. Ta Control Center
for eksempel, tåkelegger det innholdet i visningen bak det som det blir trukket opp. Dette gir brukeren en følelse av at det er plassert ovenfor
annet innhold på skjermen, og fortjener fokus. Det gjør det uten å gjøre brukeren mister oversikten over hvor hun er i appen.

Selv om uskarphet og gjennomskinnelighet er brukt over hele operativsystemet på iOS 7, ikke iOS SDK ikke gi oss noen APIer til oppnå en lignende effekt. I denne opplæringen, vil jeg gå gjennom noen metoder for å skape uklare synspunkter ved å lage prøven app vist nedenfor.

Vår sample app vil ha en visning på bunnen, som kan bli avslørt ved å trekke den opp . Utsikten er gjennomsiktig og visker ut innhold som er under den i hierarkiet visning, ligner Control Center på iOS 7.

1. Prosjektet Setup

Oversikt

Den app som vi skal bygge vil vise et bilde sammen med bildets navn og forfatter, vises i en hvit sirkel. Det vil også være en liten rektangulær visning nederst på skjermen som visker ut bilder og som kan trekkes opp for å vise mer informasjon om bildet.

Jeg kommer til å anta at du allerede vet hvordan du jobbe med grunnleggende elementer i brukergrensesnittet, for eksempel utsikt, utsikt image, og bla utsikt. I denne opplæringen, vil vi fokusere på hierarkiet utsikt og utsikten som vi trenger for å skape den blur effekt.

Ta en titt på bildet over. Det trekker fra hverandre hierarkiet visningen for å skape blur effekten vi er ute etter. De viktigste komponentene er:

Bakgrunn View:
Denne visningen viser bilder og kreditter. Dette er av den oppfatning at vi kommer til å dimme

Uklart Bilde:..
Denne visningen inneholder en uskarp versjon av innholdet i bakgrunnen visningen

Vis Mask:.
Utsikten masken er en ugjennomsiktig oppfatning at vi skal bruke til å maskere uskarpt bilde

Bla View:
bla visning er utsikten som inneholder ytterligere informasjon om bildet. Rulle syn er offset brukes til å øke eller redusere masken visning høyde. Dette vil resultere i uskarpe bildet for å avsløre seg selv som svar på rulling av bla syn.

Resources

Alle bildene, rammer og andre filer som er nødvendige for denne opplæringen er inkludert i kildefilene for denne opplæringen. Klone depotet fra GitHub eller laste ned kildefilene å følge med.

2. Opprette brukergrensesnittet

1. Oversikt

Åpne RootViewController.m i Xcode og ta en titt på sin loadView metoden. Du kan få en fugleperspektiv på hvordan brukergrensesnittet er lagt ut ved å se på gjennomføringen av denne metoden. Det er tre hoved subviews i vår søknad:

Header View:
Viser programmets navn

Content View:
Viser bilde og studiepoeng

Bla Vis
:
Inkluderer tilleggsinformasjon om en rulle uskarpt syn

I stedet for å samles på loadView metoden med initialisering og konfigurere subviews, er hjelpemetoder som brukes til å gjøre de tunge løftene:
//innhold utsikt [self.view addSubview: [selvtillit createContentView]]; //Header view [self.view addSubview: [selvtillit createHeaderView]]; //Bla view [self.view addSubview: [selvtillit createScrollView]];
2. Opprette Header Vis

Den header visning inneholder en gjennomsiktig rektangel og en tekstetikett med programmets navn Anmeldelser - (UIView *) createHeaderView {UIView * headerView = [[UIView alloc] initWithFrame. CGRectMake (0 , 0, self.view.frame.size.width, 60)]; headerView.backgroundColor = [UIColor colorWithRed: 229 /255,0 grønn: 39 /255,0 blå: 34 /255,0 alfa: 0,6]; UILabel * title = [[UILabel alloc] initWithFrame: CGRectMake (0, 20, self.view.frame.size.width, 40)]; title.text = @ "Dynamic Blur Demo"; ... [HeaderView addSubview: title]; returnere headerView;}
3. Opprette innhold Vis

Innholdet visningen viser bildet og det inkluderer også foto studiepoeng i en hvit sirkel Anmeldelser - (UIView *) createContentView {UIView * contentView = [[UIView alloc] initWithFrame. Selv .view.frame]; //Bakgrunnsbilde UIImageView * contentImage = [[UIImageView alloc] initWithFrame: contentView.frame]; contentImage.image = [UIImage imageNamed: @ "demo-bg"]; [contentView addSubview: contentImage]; //Photo credits UIView * creditsViewContainer = [[UIView alloc] initWithFrame: CGRectMake (self.view.frame.size.width /2 - 65, 335, 130, 130)]; metaViewContainer.backgroundColor = [UIColor whiteColor]; metaViewContainer.layer.cornerRadius = 65; [contentView addSubview: creditsViewContainer]; UILabel * photoTitle = [[UILabel alloc] initWithFrame: CGRectMake (0, 54, 130, 18)]; photoTitle.text = @ "Peach Garden"; ... [MetaViewContainer addSubview: photoTitle]; UILabel * fotograf = [[UILabel alloc] initWithFrame: CGRectMake (0, 72, 130, 9)]; photographer.text = @ "av Cas Cornelissen"; ... [MetaViewContainer addSubview: fotograf]; returnere contentView;}
4. Opprette rulle Vis

Rulle visning inneholder mer informasjon om bildet og en uskarp versjon av bildet. Rulle Utsikten er omtrent dobbelt lengden av skjermen, med den nederste halvdelen inneholder teksten visning og bildevisningen. Ved å aktivere paging på rulle syn, vil rulle vise innholdet smekk til toppen eller bunnen av visningen, avhengig av rulle visningens offset Anmeldelser -. (UIView *) createScrollView {UIView * containerView = [[UIView alloc] initWithFrame: self.view.frame]; blurredBgImage = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, self.view.frame.size.width, 568)]; [blurredBgImage setContentMode: UIViewContentModeScaleToFill]; [containerView addSubview: blurredBgImage]; UIScrollView * scrollView = [[UIScrollView alloc] initWithFrame: self.view.frame]; scrollView.contentSize = CGSizeMake (self.view.frame.size.width, self.view.frame.size.height * 2 - 110); scrollView.pagingEnabled = JA; ... [ContainerView addSubview: scrollView]; UIView * slideContentView = [[UIView alloc] initWithFrame: CGRectMake (0, 518, self.view.frame.size.width, 508)]; slideContentView.backgroundColor = [UIColor clearColor]; [scrollView addSubview: slideContentView]; UILabel * slideUpLabel = [[UILabel alloc] initWithFrame: CGRectMake (0, 6, self.view.frame.size.width, 50)]; slideUpLabel.text = @ "Photo informasjon"; ... [SlideContentView addSubview: slideUpLabel]; UIImageView * slideUpImage = [[UIImageView alloc] initWithFrame: CGRectMake (self.view.frame.size.width /2 - 12, 4, 24, 22,5)]; slideUpImage.image = [UIImage imageNamed: @ "up-arrow.png"]; [slideContentView addSubview: slideUpImage]; UITextView * detailsText = [[UITextView Alloc] initWithFrame: CGRectMake (25, 100, 270, 350)]; detailsText.text = @ "Lorem ipsum ... laborum"; ... [SlideContentView addSubview: detailsText]; returnere containerView;}
3. Tar et fotografi

For å dimme en visning, må vi først ta et øyeblikksbilde av innholdet og ha den klar i form av et bilde. vi kan da uklart bildet og bruke det som bakgrunn på en annen visning. La oss først se hvordan vi kan ta et øyeblikksbilde av innholdet i en UIView objekt

I iOS 7, lagt Apple en ny metode for å UIView for å ta bilder av en visning innhold, drawViewHierarchyInRect:. AfterScreenUpdates :. Denne metoden tar et øyeblikksbilde av utsikten innhold, herunder eventuelle subviews den inneholder.

La oss definere en metode i ViewController klassen som godtar en UIView objekt og returnerer en UIImage, et øyeblikksbilde av utsikten innhold. Anmeldelser - (UIImage *) takeSnapshotOfView: (UIView *) visning {UIGraphicsBeginImageContext (CGSizeMake (view.frame.size.width, view.frame.size.height)); [view drawViewHierarchyInRect: CGRectMake (0, 0, view.frame.size.width, view.frame.size.height) afterScreenUpdates: YES]; UIImage * image = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); returnere image;}
Trinn 1: Begynn et nytt bilde Context

Et bilde sammenheng er et bitmap-basert grafikk kontekst som du kan bruke til å tegne og manipulere bilder. UIView nye metode drawViewHierarchyInRect: afterScreenUpdates: rastrerer den UIView og trekker innholdet i det aktuelle bildet sammenheng

Dette betyr at før vi kaller denne metoden, må vi først opprette et nytt bilde kontekst ved å påberope UIGraphicsBeginImageContext, passerer i. den nødvendige størrelsen for bildet sammenheng

Trinn 2:. Ta Snapshot

Med bilde sammenheng satt opp, kan vi kalle visningens drawViewHierarchyInRect: afterScreenUpdates: metode. Det andre argumentet angir om øyeblikksbildet skal inneholde vise eksisterende innhold eller må inkludere eventuelle nye endringer før du tar snapshot

Trinn 3:. Lag Bilde fra bilde Context

Vi kan få innholdet i bildesammenheng, snapshot av visningen, ved å kalle UIGraphicsGetImageFromCurrentImageContext. Denne funksjonen returnerer en UIImage objekt

Trinn 4:.. End Bilde Context

Når du har opprettet snapshot, fjerner vi grafikk sammenheng fra bunken ved å påberope UIGraphicsEndImageContext


4. Tåkelegge Snapshot

Når du har snapshot, vi kan dimme det ved hjelp av en rekke teknikker. I denne opplæringen, vil jeg dekke tre teknikker:

uskarphet med Core Image rammeverket

uskarphet ved bruk av Brad Larson GPUImage rammeverk

uskarphet ved hjelp av Apples UIImage + ImageEffects kategori

Alternativ 1: Core Image

Core Image er et bildebehandlings rammeverk utviklet og vedlikeholdt av Apple. Den bruker en GPU eller CPU gjengivelse vei til å behandle bilder i nær sanntid.

Core Image gir oss en rekke filtre som kan brukes til å utføre operasjoner som spenner fra å endre et bildes fargetone eller metning til ansiktsgjenkjenning .

CIGaussianBlur er ett av filtrene inkludert i Core Image rammeverket og kan brukes til å dimme bilder. Tåkelegge et bilde med Core Image er ganske enkelt som du kan se nedenfor Anmeldelser - (UIImage *) blurWithCoreImage: (UIImage *) sourceImage {CIImage * inputImage = [CIImage imageWithCGImage: sourceImage.CGImage].; //Påfør Affine-Clamp filter for å strekke bildet slik at det ikke skjer //ser krympet når Gaussian Blur påføres CGAffineTransform forvandle = CGAffineTransformIdentity; CIFilter * clampFilter = [CIFilter filterWithName: @ "CIAffineClamp"]; [clampFilter SetValue: inputImage Forkey: @ "inputImage"]; [clampFilter SetValue: [NSValue valueWithBytes: & forvandle objCType:encode (CGAffineTransform)] Forkey: @ "inputTransform"]; //Påfør Gaussian blur filter med radius på 30 CIFilter * gaussianBlurFilter = [CIFilter filterWithName: @ "CIGaussianBlur"]; [gaussianBlurFilter SetValue: clampFilter.outputImage Forkey: @ "inputImage"]; [gaussianBlurFilter SetValue: @ 30 Forkey: @ "inputRadius"]; CIContext * kontekst = [CIContext contextWithOptions: null]; CGImageRef CGImage = [sammenheng createCGImage: gaussianBlurFilter.outputImage fromRect: [inputImage grad]]; //Sett opp utgang sammenheng. UIGraphicsBeginImageContext (self.view.frame.size); CGContextRef outputContext = UIGraphicsGetCurrentContext (); //Inverter bilde koordinerer CGContextScaleCTM (outputContext, 1,0, -1,0); CGContextTranslateCTM (outputContext, 0, -self.view.frame.size.height); //Tegn basisbildet. CGContextDrawImage (outputContext, self.view.frame, CGImage); //Påfør hvit fargetone CGContextSaveGState (outputContext); CGContextSetFillColorWithColor (outputContext, [UIColor colorWithWhite: en alpha: 0,2] .CGColor); CGContextFillRect (outputContext, self.view.frame); CGContextRestoreGState (outputContext); //Output bildet er klar. UIImage * outputImage = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); returnere outputImage;}

La oss bryte koden ovenfor blokk ned:

Vi først opprette en CIImage objekt fra UIImage objekt. Når du arbeider med Core Image rammeverket, er bilder representert ved CIImage stedene.