{"id":7928,"date":"2011-11-07T12:16:50","date_gmt":"2011-11-07T11:16:50","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=7928"},"modified":"2011-11-07T12:22:14","modified_gmt":"2011-11-07T11:22:14","slug":"uiscrollview-guida-completa-all-uso","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/uiscrollview-guida-completa-all-uso\/","title":{"rendered":"UIScrollview \u2013 Guida completa all\u2019uso"},"content":{"rendered":"

Le UISCrollview<\/strong> fanno parte dell’UIKit framework<\/strong> e sono utilizzate dalla stessa Apple per la realizzazione di componenti avanzati quali le UIWebView<\/em> e UITableView<\/em>.<\/p>\n

Come \u00e8 chiaro dal nome, le UISCrollView sono una subclass diretta di UIView quindi in termini di OOP possiamo dire che \u00e8<\/strong> una UIView specializzata<\/strong>.<\/p>\n

Ma quale sar\u00e0 mai la specializzazione di una UIScrollView? Ovviamente quella di scrollare<\/em>, di rendere cio\u00e8 possibile la visualizzazione di un contenuto pi\u00f9 grande della UIScrollView stessa.<\/p>\n

L’incipit della refernce (link<\/a> ) dice:<\/p>\n

The UIScrollView class provides support for displaying content that is larger than the size of the application\u2019s window. It enables users to scroll within that content by making swiping gestures, and to zoom in and back from portions of the content by making pinching gestures.<\/p><\/blockquote>\n

(La classe UISCrollview permette di visualizzare contenuti che sono pi\u00f9 grandi della dimensione della finestra dell’applicazione. Permette all’utente di scrollare il contenuto tramite swipe e zoomare tramite pinch).<\/p>\n

Non so perch\u00e9 Apple faccia quel riferimento all’application window, direi che si tratta di un’imprecisione, perch\u00e9 affinch\u00e9 si possa scrollare \u00e8 necessario che il contenuto sia pi\u00f9 grande della UIScrollview stessa indipendentemente dalla dimensione della uiwindow.<\/p>\n

Come funzionano le UIScrollView?<\/h4>\n

Esamineremo il funzionamento della scrollview creando una piccola applicazione di esempio, apriamo quindi xcode e creiamo un nuovo progetto di tipo “single view application”. Io l’ho chiamato devappScrollview<\/code> ed ho tolto il flag sia da “Use storyboard” e sia da “Use Automatic reference counting” (che ci posso fare, sono vecchia scuola \ud83d\ude42 )<\/p>\n

In questo articolo non staremo molto a guardare lo stile di programmazione, quindi andremo a creare l’interfaccia direttamente nel metodo viewDidLoad<\/code> del primo UIViewController.
\nIdentifichiamo quindi questo metodo e posizioniamoci subito dopo [super viewDidLoad];<\/code><\/p>\n

Come tutte le UIView anche la UISCrollview ha la sua propriet\u00e0 frame<\/strong> che identifica il rettangolo dove verr\u00e0 visualizzata.<\/p>\n

Allochiamo e inizializiamo una nuova UIScrollView con il codice:<\/p>\n

\r\nUIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, 300, 400)];\r\n<\/pre>\n
Aggiungiamola quindi alla view principale del viewcontroller e non dimentichiamo di rilasciarla:<\/p>\n
\r\n[self.view addSubview:scroll];\r\n[scroll release];\r\n<\/pre>\n
Compiliamo e osserviamo il risultato…<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Sembra che non sia successo nulla, perch\u00e9 come tutte le uiview anche la scrollview di default si presenta con il colore trasparente.<\/p>\n
Per renderci conto di dove \u00e8 effettivamente posizionata la scrollview coloriamola di rosso inserendo questo codice subito dopo l’inizializzazione:<\/p>\n
\r\n[scroll setBackgroundColor:[UIColor redColor]];\r\n<\/pre>\n
Adesso il simulatore mostra la posizione della scrollview:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
La UIScrollview abbiamo detto che fa da contenitore, quindi proviamo ad aggiungere un’immagine al suo interno e vediamo cosa succede.<\/p>\n
Ho scelto appositamente un’immagine con una dimensione un p\u00f2 particolare 400 x 1222, l’idea \u00e8 quella di permettere quindi di scrollare l’immagine in orizzontale per poterla visualizzare. Questa \u00e8 l’immagine utilizzata (cliccateci sopra per vedere le dimensioni effettive e per scaricarla e usarla nel vostro progetto):<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Aggiungiamo quindi questa immagine al progetto xcode (file->add file to “project”) e creiamo una nuova UIImageview da inserire dentro la UIScrollview. Per chiarezza riporto tutto il metodo viewdidload<\/code>:<\/p>\n
\r\n- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n\tUIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, 300, 400)];\r\n\t[scroll setBackgroundColor:[UIColor redColor]];\r\n\t\r\n\tUIImageView *imageview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1222, 400)];\r\n\t[imageview setImage:[UIImage imageNamed:@\"panorama_orizzonte_medio_big.jpg\"]];\r\n\t[scroll addSubview:imageview];\r\n\t[imageview release];\r\n\t\r\n\t[self.view addSubview:scroll];\r\n\t[scroll release];\r\n}\r\n<\/pre>\n
Il risultato \u00e8 questo:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Per\u00f2 c’\u00e8 un grosso problema…non scrolla!<\/p>\n
Abilitiamo lo scroll<\/h4>\n
Affinch\u00e9 la UIScrollView sappia quanto e come scrollare \u00e8 necessario impostare la propriet\u00e0 contentSize<\/code> di questo oggetto, facciamolo e ricompiliamo:<\/p>\n
\r\n- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n\tUIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, 300, 400)];\r\n\t[scroll setBackgroundColor:[UIColor redColor]];\r\n\t\r\n\tUIImageView *imageview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1222, 400)];\r\n\t[imageview setImage:[UIImage imageNamed:@\"panorama_orizzonte_medio_big.jpg\"]];\r\n\t[scroll addSubview:imageview];\r\n\t[imageview release];\r\n\t\r\n\t[self.view addSubview:scroll];\r\n\t[scroll release];\r\n}\r\n<\/pre>\n
Anche se lo screenshot \u00e8 piccolino si riesce a vedere la barra di scorrimento orizzonale, segno che siamo riusciti nel nostro compito.<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
La gestione dello zoom<\/h4>\n
La gestione dello zoom \u00e8 leggermente diversa dalla logica che abbiamo visto adesso e usa il concetto di delegate. Quando l’utente fa pinch sulla UISCrollview questa invoca sul suo delegate il metodo:
\n- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView<\/code> al quale il delegate risponde con una UIView.<\/p>\n
Ci si potrebbe chiedere come mai la scrollview semplicemente non faccia in autonomia uno zoom sulla UIView visualizzata ed il motivo \u00e8 che utilizzando il delegate si ha, ad esempio, la possibilit\u00e0 di fornire una view diversa per diversi livelli di zoom. Supponiamo di avere due versioni della foto del panorama, una a bassa risoluzione ed un’altra ad altissima risoluzione, per ovvie ragioni di memoria all’inizio carichiamo quella a bassa risoluzione, poi se l’utente inizia a fare zoom oltre un certo livello potremmo sostituire l’immagine a bassa risoluzione con una porzione dell’immagine ad alta. Un p\u00f2 come succede quando si usa una mapview o strumenti analoghi.<\/p>\n
Per abilitare lo zoom dobbiamo quindi modificare il viewcontroller per renderlo conforme al protocollo UIScrollViewDelegate, aggiungiamo inoltre una variabile di istanza di tipo UIImageview. Il file .h del nostro viewcontroller si presenter\u00e0 quindi in questo modo:<\/p>\n
\r\n#import \r\n\r\n@interface ViewController : UIViewController <UIScrollViewDelegate> {\r\n\tUIImageView *imageview;\r\n}\r\n\r\n@end\r\n<\/pre>\n
Nel metodo viewdidload impostiamo quindi il delegate della scrollview e utilizziamo la variabile di istanza piuttosto che la variabile locale:<\/p>\n
\r\n- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n\tUIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, 300, 400)];\r\n\t[scroll setDelegate:self];\r\n\t[scroll setBackgroundColor:[UIColor redColor]];\r\n\t\r\n\timageview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1222, 400)];\r\n\t[imageview setImage:[UIImage imageNamed:@\"panorama_orizzonte_medio_big.jpg\"]];\r\n\t[scroll addSubview:imageview];\r\n\t\r\n\t[scroll setContentSize:CGSizeMake(1222, 400)];\r\n\t[self.view addSubview:scroll];\r\n\t[scroll release];\r\n}\r\n<\/pre>\n
notate che ho tolto anche il release della imageview perch\u00e9 voglio che sia valida anche all’uscita di questo metodo, per\u00f2 non dobbiamo generare memory leak, quindi aggiungiamo il medo dealloc in cui rilasciamo tutto.<\/p>\n
\r\n-(void)dealloc {\r\n\t[imageview release];\r\n\t[super dealloc];\r\n}\r\n<\/pre>\n
..ok ok lo so..se avessi abilitato ARC mi sarei risparmiato un p\u00f2 di rogne \ud83d\ude09<\/p>\n
Aggiungiamo il metodo per la gestione dello zoom limitandoci a ritornare l’oggetto imageview:<\/p>\n
\r\n- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {\r\n\treturn imageview;\r\n}\r\n<\/pre>\n
Se proviamo a compilare a questo punto, ci accorgiamo che lo zoom non funziona ancora… e questo ci porta ad esaminare due altre propery dell’oggetto UISCrollView: maximumZoomScale<\/code> e minimumZoomScale<\/code>. Se guardiamo la documentazione notiamo che per entrambe il valore di default \u00e8 1.0 il che significa che il contenuto non pu\u00f2 essere n\u00e9 zoomato n\u00e9 rimpicciolito. Impostiamo rispettivamente questi valori a 2.0 e 0.5 e ricompiliamo il progetto: finalmente siamo riusciti ad attivare anche questa funzionalit\u00e0.<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Paging con UIScrollview <\/h4>\n
Un utilizzo molto comune delle UISCrollview \u00e8 quello di creare browser di fotografie, visualizzabili tramite swipe.<\/p>\n
Se avessimo memoria infinita il compito sarebbe piuttosto semplice, basterebbe creare tante UIImageView quante sono le immagini da visualizzare, posizionarle all’interno della scrollview ed avremmo gi\u00e0 realizzato il nostro browser. Purtroppo ci tocca essere un tantino pi\u00f9 attenti e cercare di risparmiare quanta pi\u00f9 memoria possibile. Decidiamo quindi di mantenere in memoria soltanto 3 immagini, quella corrente, quella precedente e quella successiva, questo ci permetter\u00e0 di occupare una quantit\u00e0 fissa di memoria, indipendente dal numero di foto che compongono la galleria.<\/p>\n
Un’idea di quello che andremo a realizzare lo si vede in questa simulazione:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Modifichiamo il nostro progetto inserendo 3 variabili di istanza di tipo UIImageview e una variabile intera che memorizzer\u00e0 il numero della pagina corrente:<\/p>\n
\r\n@interface ViewController : UIViewController  {\r\n\tUIImageView *imageview1;\r\n\tUIImageView *imageview2;\r\n\tUIImageView *imageview3;\r\n        int currentPage;\r\n}\r\n@end\r\n<\/pre>\n
e non dimentichimoci del metodo dealloc:<\/p>\n
\r\n-(void)dealloc {\r\n\t[imageview1 release];\r\n\t[imageview2 release];\r\n\t[imageview3 release];\r\n\t[super dealloc];\r\n}\r\n<\/pre>\n
Dichiariamo quindi una costante globale in cui memorizziamo il numero di foto che compongono la galleria:<\/p>\n
\r\nconst int numImages = 5;\r\n<\/pre>\n
e passiamo infine a generare la scrollview sempre all’interno del metodo viewdidload<\/code>.<\/p>\n
In questo caso il contentview della scrollview sar\u00e0 uguale alla larghezza di ogni singola immagine per il numero delle immagini che compongono la galleria.<\/p>\n
\r\nUIScrollView* scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 30, 400, 300)];\r\n[scroll setDelegate:self];\r\n[scroll setContentSize:CGSizeMake(300 * numImages, 400)];\r\n<\/pre>\n
Passiamo quindi alla generazione delle tre UIImageview, ciascuna 300px pi\u00f9 a destra della precedente e ne impostiamo la propriet\u00e0 tag cos\u00ec da poterle recuperare con un po’ di matematica:<\/p>\n
\r\nimageview1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 400)];\r\n[imageview1 setImage:[UIImage imageNamed:@\"tiger0.jpg\"]];\r\n[imageview1 setTag:1];\r\nimageview2 = [[UIImageView alloc] initWithFrame:CGRectMake(300, 0, 300, 400)];\r\n[imageview2 setTag:2];\r\n\r\nimageview3 = [[UIImageView alloc] initWithFrame:CGRectMake(600, 0, 300, 400)];\r\n[imageview3 setTag:3];\r\n[scroll addSubview:imageview1];\r\n[scroll addSubview:imageview2];\r\n[scroll addSubview:imageview3];\r\n<\/pre>\n
L’idea \u00e8 quella di spostare queste imageview durante l’operazione di scrolling cos\u00ec da simulare la presenza di un numero illimitato di imageview.<\/p>\n
Per fare questo aggiungiamo nel nostro viewcontroller anche il metodo
\n-(void)scrollViewDidScroll:(UIScrollView*)scrollView<\/code> che viene richiamato durante la fase di scrolling.<\/p>\n
All’interno del metodo calcoliamo l’attuale posizione della scrollview:<\/p>\n
\r\nconst CGFloat currPos = scrollView.contentOffset.x;\r\n<\/pre>\n
da questo valore calcoliamo la pagina che \u00e8 attualmente visualizzata:<\/p>\n
\r\nconst NSInteger selectedPage = lroundf(currPos \/ 300.0); \r\n<\/pre>\n
calcoliamo infine quale delle tre imageview \u00e8 al centro dello schermo:<\/p>\n
\r\nconst NSInteger zone = 1 + (selectedPage % 3); \r\nconst NSInteger nextPage = selectedPage + 1;\r\nconst NSInteger prevPage = selectedPage - 1;\r\n<\/pre>\n
Passiamo quindi a configurare l’imageView successiva, verificando di non essere arrivati alla fine della nostra galleria. Recuperiamo l’imageview attraverso la sua propriet\u00e0 tag e la spostiamo nella posizione successiva alla schermata attuale impostandone la propriet\u00e0 image:<\/p>\n
\r\n\tif (nextPage < numImages)\r\n\t{\r\n\t\tNSInteger nextViewTag = zone + 1;\r\n\t\tif (nextViewTag == 4)\r\n\t\t\tnextViewTag = 1;\r\n\t\tUIImageView* nextView = (UIImageView*)[scrollView viewWithTag:nextViewTag];\r\n\t\tnextView.frame = CGRectMake(nextPage * 300, 0, 300, 400);\r\n\t\tNSString *str = [NSString stringWithFormat:@"tiger%d.jpg", nextPage];\r\n\t\tUIImage* img = [UIImage imageNamed:str];\r\n\t\tnextView.image = img;\r\n\t}\r\n<\/pre>\n
Lo stesso lavoro va fatto con la imageview precedente:<\/p>\n
\r\nif (prevPage >= 0)\r\n\t{\r\n\t\tNSInteger prevViewTag = zone - 1;\r\n\t\tif (!prevViewTag)\r\n\t\t\tprevViewTag = 3;\r\n\t\tUIImageView* prevView = (UIImageView*)[scrollView viewWithTag:prevViewTag];\r\n\t\tprevView.frame = (CGRect){.origin.x = prevPage * 300, .origin.y = 0.0f, .size = prevView.frame.size};\r\n\t\tNSString *str = [NSString stringWithFormat:@\"tiger%d.jpg\", prevPage];\r\n\t\tUIImage* img = [UIImage imageNamed:str];\r\n\t\tprevView.image = img;\r\n\t}\r\n<\/pre>\n
Eccoci al termine della nostra guida, compilate ed eseguite il programma e, se avete seguito tutto correttamente, dovreste godervi la vostra nuova galleria fotografica.<\/p>\n
\"\"<\/a> Se avete problemi con il progetto presentato, questo \u00e8 il link per scaricare l’esempio completo.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Le UISCrollview fanno parte dell’UIKit framework e sono utilizzate dalla stessa Apple per la realizzazione di componenti…<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[965,961,269,962,963,271,964],"class_list":["post-7928","post","type-post","status-publish","format-standard","hentry","category-framework","tag-photogallery-xcode","tag-uikit-framework","tag-uiscrollview","tag-uiscrollview-paging","tag-uiscrollview-scroll-and-zoom","tag-uiscrollviewdelegate","tag-viewforzoominginscrollview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7928","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\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=7928"}],"version-history":[{"count":30,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7928\/revisions"}],"predecessor-version":[{"id":7967,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7928\/revisions\/7967"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=7928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=7928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=7928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}