Creiamo un immagine in circolare in stile Google plus

ios7

In questo tutorial vi mostrerò come creare delle immagini circolari tramite la classe CALayer. Un oggetto lager può controllare diversi attributi come ad esempio:

  • Il colore di backgroung
  • I bordi
  • Le ombre
  • Gli angoli
  • ecc

Per creare la nostra immagine circolare utilizzeremo l’attributo Corner radius ovvero tale proprietà  ci consente di gestire l’angolazione degli angoli di un layer. Create un nuovo progetto e inserite un imageview e impostate anche un immagine, a questo punto nel metodo viewDidLoad scrivete il seguente codice:


self.imageView.layer.cornerRadius = self.imageView.frame.size.width/ 2; //1

self.imageView.clipsToBounds = YES;//2

self.imageView.layer.borderWidth = 3.0f;//3

self.imageView.layer.borderColor = [UIColor blackColor].CGColor;//4

la prima riga di codice serve per impostare l’angolo del raggio dell’oggetto layer, per farsi che un immagine da quadrata diventi circolare il raggio è impostato alla metà della larghezza dell imageview, ad esempio se abbiamo un ImageView (Quadrata)di 100pixel il raggio sa sarò impostato a 50 pixel, La seconda riga di codice impostiamo il  clipsToBounds a yes in maniera che il layer possa “lavorare” correttamente. La terza riga di codice come si può intuire imposta lo spessore del bordo mentre la 4 e ultima riga di codice imposta il colore del bordo .

download_esempio-300x120