TSM - iOS 7 blur - Introducere în flat design

În ultimul an toată lumea mobile a adoptat conceptul de flat design, fie vorba de Android, iOS sau Windows, fiecare dintre sisteme cu variațiunile proprii. În esența scopul e același: o mai bună înțelegere a interfeței grafice de către utilizator.

Odată cu iOS 7, Apple a introdus flat design împreună cu câteva concepte de user experience printre care și ideea de "know where you are" astfel ca utilizatorii să aibă o mai bună înțelegere a contextului în care se află. Cel mai bun exemplu este Notification Center, care odată deschis, blurează conținutul din spatele său. Acest lucru permite vederea noului conținut peste vechea pagină fără să blocheze vederea Home View-ului. Un alt exemplu bun ar fi atunci când vrem să afișăm o alertă: blurând conținutul din spatele ei va conduce natural atenția utilizatorului spre mesajul primit, fără a-l scoate însă din contextul în care se afla anterior.

Cum reușește Apple

Pentru realizarea acestui lucru, cei de la Apple lucrează direct cu GPU-ul, acest lucru asigurându-le viteză și calitate. De asemenea, le permite să realizeze așa numitul "live blur" , adică mișcarea  elementelor din spate să fie redată prin blur. Din păcate, Apple nu furnizează nici un API pentru a realiza acest lucru în iOS7 SDK, probabil din diverse motive de securitate,  iar să lucrezi de la zero cu GPU necesită multe linii de cod și timp. Ca să fim sinceri, vrem să implementăm doar o interfață grafică pentru un ecran de alertă, nu un joc 3D. 

Soluție

Aici apare întrebarea firească, cum obținem așa ceva în aplicațiile noastre? Există mai multe opțiuni, dar în acest articol am să prezint doar una, aleasă pentru simplitatea și rapiditatea cu care poate fi implementată. Această variantă constă în capturarea ecranului prezent, blurarea capturii de imagine și afișarea ei ca imagine de fundal în spatele mesajului de alertă creat. 

Începem prin a crea clasa noastră proprie de alertă, un view controller bazat pe UIViewController. Pentru capturarea imaginii și blurarea ei avem nevoie de o clasă numită "UIImage+ImageEffects.h" pe care o vom importa în controller-ul paginii.

#import "UIImage+ImageEffects.h"

Într-una dintre metodele de lifecycle ale controlle-rului adăugăm următoarele linii și avem deja cea mai simplă modalitate de a obține un fundal blurat:

-(void)viewWillAppear:(BOOL)animated {
    UIImage *snapshot = [self takeScreenSnapshot];
    UIColor *tintColor = 
      [UIColor colorWithWhite:0.2 alpha:0.15];
    
self.view.backgroundImage = [snapshot 
	applyBlurWithRadius:8 tintColor:
	tintColor saturationDeltaFactor:
        1.8 maskImage:nil];
}

- (UIImage *)takeScreenSnapshot {
    UIGraphicsBeginImageContext(self.bounds.size);
    if([self respondsToSelector:@selector(
     drawViewHierarchyInRect:afterScreenUpdates:)]){
        [self drawViewHierarchyInRect:
         self.bounds afterScreenUpdates:NO];
    }
    else{
        [self.layer renderInContext:
          UIGraphicsGetCurrentContext()];
    }
    UIImage *image = 
          UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    NSData *imageData = 
           UIImageJPEGRepresentation(image, 0.75);
    image = [UIImage imageWithData:imageData];
    return image;
}

1. applyBlurWithRadius este numărul de pixeli luați în calculul blur-ului. Cu cât mai mare numărul, cu atât veți avea o imagine mai blurată. 
2. tintColor este nuanța care va fi adaugată imaginii procesate. În exemplul de mai sus, am optat pentru un tint mai întunecat. 
3. saturationDeltaFactor este nivelul de saturație de culoare aplicat imaginii procesate.

maskImage deși nil în exemplul de mai sus, are întrebuințări folositoare în momentul în care vrem să blurăm doar o parte din imagine ca în exemplul de mai jos:  

În detaliu

Pentru cei care vor performață mai bună sau un altfel de blur putem arunca o privire în interiorul "UIImage+ImageEffects.h" și să facem câteva modificări. 

typedef enum {
    NOBLUR,
    BOXFILTER,
    TENTFILTER
} BlurType;

@import UIKit;

@interface UIImage (ImageEffects)

- (UIImage *) applyLightEffect;
- (UIImage *) applyExtraLightEffect;
- (UIImage *) applyDarkEffect;
- (UIImage *) applyDarkEffectWithTent: (CGFloat) radius;
- (UIImage *) applyTintEffectWithColor:(UIColor *)tintColor;

- (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius blurType: (BlurType) blurType tintColor:(UIColor *)tintColor saturationDeltaFactor:
  (CGFloat)saturationDeltaFactor maskImage:(UIImage *)
     maskImage;

@end

Printre noile metodele din UIImage+ImageEffects.h se numără și applyDarkEffectWithTent. Această variantă a blur-ului utilizează un filtru bazat pe algoritmul tent, mai rapid decât inițialul  alrgoritm box.  Iar în loc de 3 treceri necesare printr-un filtru de tip box, în cazul algoritmului "tent" este necesară o singură trecere.

- (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius blurType: (BlurType) blurType tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)
saturationDeltaFactor maskImage:(UIImage *)maskImage
{
	…
            if (blurType == BOXFILTER)
            {
vImageBoxConvolve_ARGB8888(&effectInBuffer, &effectOutBuffer, NULL, 0, 0, radius, radius, 0,
kvImageEdgeExtend);

vImageBoxConvolve_ARGB8888(&effectOutBuffer, 
&effectInBuffer, NULL, 0, 0, radius, radius, 0, 
kvImageEdgeExtend);

vImageBoxConvolve_ARGB8888(&effectInBuffer,
 &effectOutBuffer, NULL, 0, 0, radius, radius, 0,
 kvImageEdgeExtend);
  }
 else
{
 vImageTentConvolve_ARGB8888(&effectInBuffer, 
&effectOutBuffer, NULL, 0, 0, radius, radius, 0, kvImageEdgeExtend);
 }
  …
}

În acest mod se reduce timpul de procesare de la 184 ms la 16 ms. Până la urmă vrem o aplicație cu animații și tranziții cât se poate de fluente, fără timpi morți de așteptare și sacadări, iar calitatea rezultatului e comparabilă cu aceea obținută de Apple în Notification Center.

Finalizez prin a sugera totuși folosirea cât mai simplă și doar în locurile în care credem că ne foloșeste blur-ul pentru a evita îngreunarea funcționării fluide a aplicației.