{"id":556,"date":"2009-10-29T22:34:43","date_gmt":"2009-10-29T21:34:43","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=556"},"modified":"2010-02-15T20:31:02","modified_gmt":"2010-02-15T19:31:02","slug":"t003-creare-una-presentazione-di-foto","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t003-creare-una-presentazione-di-foto\/","title":{"rendered":"T#003 &#8211; Creare una presentazione di foto"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1.jpg\" alt=\"t003_ex\" title=\"t003_ex\" width=\"66\" height=\"128\" class=\"alignleft size-full wp-image-583\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1.jpg 386w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1-156x300.jpg 156w\" sizes=\"auto, (max-width: 66px) 100vw, 66px\" \/> In questo breve tutorial vedremo come creare un piccolo programma in grado di far girare automaticamente una presentazione di immagini o foto che scorrono una dopo l&#8217;altra in modo automatico. <\/p>\n<p>L&#8217;avvio della presentazione sar\u00e0 gestito da un pulsante UIButton cos\u00ec come il suo arresto. <\/p>\n<p>Per prima cosa avviate Xcode, e create un nuovo progetto, scegliete tra l&#8217;elenco dei Template proposti &#8220;View-based Application&#8221; e andate avanti. <\/p>\n<p>Inserite un nome, ad esempio &#8220;Presentazione&#8221; per la vostra nuova applicazione, scegliete quindi dove volete salvarla e proseguite. <\/p>\n<p>Si aprir\u00e0 la schermata principale di Xcode. Tramite &#8220;Groups &#038; Files&#8221; sulla sinistra aprite la cartella &#8220;Classes&#8221; e cliccate quindi sul file PresentazioneViewController.h in cui dovete inserire il seguente codice:<br \/>\n<!--more--><\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n#import <UIKit\/UIKit.h>\r\n\r\n@interface PresentazioneViewController : UIViewController {\r\n      IBOutlet UIImageView *immagine;\r\n      NSArray *array;\r\n}\r\n\r\n-(void)avvia:(id)sender;\r\n-(void)ferma:(id)sender;\r\n\r\n@end\r\n<\/pre>\n<p>Questo tipi di files (con estensione .h) servono a dichiarare tutti gli oggetti, le propriet\u00e0 e i metodi che verranno poi usati nelle nostre applicazioni. Qui ci saranno quindi le sole dichiarazioni, verranno poi definiti i comportamenti nel rispettivo file con estensione .m della classe. <\/p>\n<p>Vediamo il significato di questo breve listato. La prima riga #import <UIKit\/UIKit.h> serve per importare nel nostro progetto il framework UIKit, grazie al quale ci sar\u00e0 permesso di usare tutti gli oggetti preconfezionati e offerti da Apple, come i pulsanti, le caselle di testo, le label e via dicendo. <\/p>\n<p>L&#8217;istruzione @interface PresentazioneViewController : UIViewController \u00e8 l&#8217;inizio vero e proprio della nostra dichiarazione e UIViewController \u00e8 la classe parente da cui la nostra nuova classe eredita tutte le propriet\u00e0 e i metodi. Per ora prendete per buona questa istruzione, spiegheremo in una delle prossime lezioni dedicate all&#8217;objective-c il significato e il funzionamento delle classi. Le parentesi graffe servono a raggruppare in un unico blocco pi\u00f9 istruzioni di codice, chi conosce il C avr\u00e0 ben chiaro questo concetto che riprenderemo nelle prossime lezioni. <\/p>\n<p>Troviamo quindi l&#8217;istruzione IBOutlet UIImageView *immagine; <\/p>\n<p>IBOutlet indica che questo oggetto sar\u00e0 collegato ad un oggetto di tipo UIImageView che creeremo con Interface Builder, mentre immagine \u00e8 il nome del nostro oggetto. Con NSArray *array; invece andiamo a creare l&#8217;oggetto che conterr\u00e0 tutte le nostre immagini, che chiamiamo per semplicit\u00e0 array ed \u00e8 ti tipo NSArray. Gli array sono dei particolari contenitori simili alle ariabili che per\u00f2 possono contenere al loro interno pi\u00f9 valori, identificati e utilizzabili poi grazie ad un indice che va da 0 a n-1, dove n \u00e8 il numero degli oggetti al suo interno. <\/p>\n<p>Le due istruzioni -(void)avvia:(id)sender; e -(void)ferma:(id)sender; servono a dichiarare i metodi, quindi le azioni, che saranno collegate ai due pulsanti. Uno per avviare la presentazione e l&#8217;altro per arrestarla.<\/p>\n<p>A questo punto salvate e aprite il file PresentazioneViewController.m e al suo interno cercate il metodo viewDidLoad che dovrebbe essere commentato e modificatelo come segue:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)viewDidLoad {\r\n      [super viewDidLoad];\r\n      array = [NSArray arrayWithObjects:[UIImage imageNamed:@\"1.jpg\"],[UIImage imageNamed:@\"2.jpg\"],[UIImage imageNamed:@\"3.jpg\"],nil];\r\n      [immagine setAnimationImages:array];\r\n      [immagine setAnimationRepeatCount:0];\r\n      [immagine setAnimationDuration:5];\r\n}\r\n<\/pre>\n<p>Questo metodo esegue il codice al suo interno all&#8217;avvio della vista durante l&#8217;esecuzione del programma. Noi lo useremo per inserire le immagini nell&#8217;array, nel nostro esempio 3, grazie metodo arrayWithObjects di NSArray. Subito dopo viene passato l&#8217;array appena riempito all&#8217;oggetto immagine che sar\u00e0 usato per far scorrere le foto. Viene quindi impostato il numero di volte che deve ripetersi la presentazione (0 indica ripetizioni infinite) e il temlo tra il passaggio di un&#8217;immagine alla successiva (nel nostro caso 5 secondi). <\/p>\n<p>Tutto questo grazie ai metodi che il nostro oggetto immagine eredita da UIImageView.<\/p>\n<p>A questo punto inserite sotto il codice dei due metodi da passare ai pulsanti che useremo per avviare e arrestare la presentazione:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n-(void)avvia:(id)sender{\r\n      [immagine startAnimating];\r\n}\r\n\r\n-(void)ferma:(id)sender{\r\n      [immagine stopAnimating];\r\n}\r\n<\/pre>\n<p>Per quanto riguarda il codice \u00e8 tutto. A questo punto occorre inserire le immagini nel progetto, nel nostro caso 1.jpg, 2.jpg e 3.jpg, ma potrete ovviamente inserirne altre e con i nomi che preferite, modificando opportunamente il codice sopra. Per farlo trascinate semplicemente nella cartella &#8220;Resource&#8221; dentro &#8220;Groups &#038; Files&#8221; i file delle vostre immagini ricordando di spuntare la casella &#8220;<strong>Copy items into destination group&#8217;s folder (if needed)<\/strong>&#8221; per copiare i file stessi nel progetto, premete quindi su &#8220;Add&#8221;, come mostrato in figura qui sotto:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/inserimentoImmagini.jpg\" alt=\"inserimentoImmagini\" title=\"inserimentoImmagini\" width=\"482\" height=\"257\" class=\"aligncenter size-full wp-image-642\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/inserimentoImmagini.jpg 723w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/inserimentoImmagini-300x160.jpg 300w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><br \/>\n<\/center><\/p>\n<p>Ora non resta altro che aprire il file PresentazioneViewController.xib per disegnare l&#8217;interfaccia grafica. <\/p>\n<p>Trascinate quindi nella vista una UIImageView e due UIButton. Facendo doppio click sui pulsanti appena inseriti potrete modificarne l&#8217;etichetta inserendo Avvia e Ferma, o quello che preferite.<\/p>\n<p>Cliccate quindi su File&#8217;s Owner e dalla finestra &#8220;Presentazione View Controller Connection&#8221; collegate immagine con la UIImageView appena inserita e i due metodi &#8220;Avvia&#8221; e &#8220;Ferma&#8221; con i due pulsanti dell&#8217;interfaccia grafica, facendo attenzione a selezionare &#8220;Touch UP Inside&#8221; quando rilasciate il mouse. Dovete ottenere una configurazione della vista simile a quella mostrata qui di seguito:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t0031.jpg\" alt=\"t003\" title=\"t003\" width=\"320\" height=\"502\" class=\"aligncenter size-full wp-image-582\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t0031.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t0031-191x300.jpg 191w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\n<\/center><\/p>\n<p>Salvate e chiudete Interface Builder. Potete infine cliccare su Build and Run e testare il funzionamento della vostra applicazione tramite l&#8217;iPhone Simulator o direttamente sul vostro iPhone o iPod Touch.<\/p>\n<p>Se aveste problemi con il progetto scriveteci tramite il nostro forum. Per comodit\u00e0 mettiamo a disposizione per il download il <a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t003.zip\" target=\"_blank\">sorgente del tutoriral<\/a>.<\/p>\n<p>Questo il risultato finale che dovreste ottenere:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1.jpg\" alt=\"t003_ex\" title=\"t003_ex\" width=\"386\" height=\"742\" class=\"aligncenter size-full wp-image-583\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1.jpg 386w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/10\/t003_ex1-156x300.jpg 156w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><br \/>\n<\/center><\/p>\n<p><center><\/p>\n<h4>Video Tutorial<\/h4>\n<p> by David Pollak<br \/>\n<\/center><\/p>\n<p><center><br \/>\n<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/YQdgr1KtDFY&#038;hl=it_IT&#038;fs=1&#038;\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/YQdgr1KtDFY&#038;hl=it_IT&#038;fs=1&#038;\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"><\/embed><\/object><br \/>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questo breve tutorial vedremo come creare un piccolo programma in grado di far girare automaticamente una&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[5,4,14,1],"class_list":["post-556","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-objective-c","tag-programmazione","tag-sdk","tag-tutorial-pratici"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":35,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/556\/revisions\/578"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}