Mostrare a video un’immagine utilizzando UIImageView – Guida Sviluppo App iOS

Nei capitoli precedenti abbiamo utilizzato alcuni semplici elementi grafici dall’aspetto predefinito (come, ad esempio, Navigation Bar, button label ed altro). Andiamo adesso ad introdurre in che modo possiamo inserire delle immagini all’interno della nostra interfaccia grafica.

Iniziamo con il dire che è possibile gestire svariate tipologie di immagini, ma si consiglia sempre l’uso di immagini .png. Questo perchè il formato .png non è un formato compresso, come potrebbe essere il jpeg, e dunque la qualità dell’immagine risulterà sicuramente migliore.

Gli elelemnti facente parte dell’UIKit framework che andremo ad analizzare in questo capitolo sono UIIMage e UIIMageView: il primo può essere considerato una sorta di contenitore dell’immagine, mentre l’altro è il modo per rendere visibile l’immagine all’interno del nostro dispositivo.

Il primo approccio che possiamo introdurre è quello che sfrutta le potenzialita offerte da Interface Builder. Infatti, in questo caso, è sufficiente trascinare un elemento di tipo UIIMageView all’interno della finestra di lavoro e poi, nella sezione degli attributi, è possibile impostare il nome relativo dell’immagine semplicemente inserendo il nome del file. Questo tipo di approccio permette, in una certa view, di vedere sempre la solita immagine. Ci piacerebbe invece poter gestire in maniera autonoma l’immagine che andremo a visualizzare, per esempio in eseguito ad un’azione da parte dell’utente. Per questo motivo, per il momento, abbandoniamo Interface Builder per concentrarci esclusivamente sul codice sorgente.

Dunque creiamo un nuovo progetto View-based e poniamoci immediatamente nel ViewController.h. All’interno di questo file dichiariamo un attributo di tipo UIIMageView e scriviamo la relativa property. Adesso prendiamo un’immagine a piacimento e la copiamo nella cartella Other Sources della gerarchia a sinistra, e nella successiva schermata che ci proporrà Xcode mettiamo la spunta dove viene chiesto se si vuole copiare l’immagine direttamente all’interno della directory del progetto. A questo punto apriamo il file di implementazione e scriviamo, all’interno del metodo viewDidLoad, il seguente frammento di codice:

UIImage *img = [ UIImage imageNamed: @"Paesaggi05.png" ];
immagine = [ [ UIImageView alloc ] initWithImage: img ];
[img release];
[self.view addSubview:immagine];

Come possiamo vedere la prima istruzione del codice dichiara ed inizializza una variabile di tipo UIImage che rappresenta il nostro contenitore dell’immagine. Nella riga successiva prendiamo la nostra immagine (dichiarata nei file header come una UIImageView) ed inizializziamola con l’immagine che abbiamo creato precedentemente. A questo punto il nostro contenitore per l’immagine non è più necessario e facciamo quindi il release dell’oggetto. Adesso siamo pronti per mostrare l’immagine creata semplicemento usando il classico metodo addSubView.

Tramite codice è possibile gestire molti degli aspetti dell’immagine. Infatti, usando delle trasformazioni, è possibile modificare la dimensione dell’immagine, l’orientamento e molti altri attributi. Per esempio se vogliamo routare la nostra immagine di 90° sarà sufficiente aggiungere solamente due linee di codice:

CGAffineTransform rotate = CGAffineTransformMakeRotation(1.57079633);
[immagine setTransform:rotate];

Nella prima riga di codice si crea una trasformazione nella quale si effettua una rotazione. Nel nostro caso abbiamo inserito un valore di rotazione che equivale a 90° verso destra e dunque, basta cambiare il valore passato come argomento a CGAffineTransformMakeRotation per ottenere delle rotazioni diverse. Nella seconda riga di codice si applica semplicemente la trasformazione alla nostra immagine con il metodo setTransform.