{"id":7090,"date":"2011-06-17T19:42:20","date_gmt":"2011-06-17T17:42:20","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=7090"},"modified":"2011-06-17T19:44:25","modified_gmt":"2011-06-17T17:44:25","slug":"t097-animiano-il-testo-allinterno-di-unuilabel","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t097-animiano-il-testo-allinterno-di-unuilabel\/","title":{"rendered":"T#097 – Animiamo il testo all’interno di un’UILabel"},"content":{"rendered":"

\"t097-animare-testo-uilabel-xcode-00\"<\/a> Alzi la mano chi di voi non ha mai avuto problemi durante lo sviluppo delle proprie applicazioni per iPhone con le UILabel, o meglio, con il testo settato al loro interno. Il vero problema per noi sviluppatori iPhone \u00e8 lo spazio a disposizione e di conseguenza molte volte siamo costretti a “croppare” le nostre UILabel, schiacciarle o ancora ridurre il testo al loro interno per far in modo che quanto mostrato sia ben leggibile e con un font che non sia troppo piccolo. Insomma, un vero problema di non poco conto! L’altra notte (io non dormo mai :P) pensando a questo problema, mi \u00e8 venuta la brillante idea: perch\u00e8 non realizzare un’UILabel il cui testo scorre al suo interno? Non \u00e8 poi una cattiva idea, no? Potrebbe tornarci utile per mostrare informazioni di sistema oppure informazioni che vogliamo sfruttare per attirare l’attenzione dell’utente. Sono sicuro che le idee per sfruttare questo tutorial certo non mancheranno, ma ora basta chiacchiere e partiamo con il nostro progetto<\/p>\n

Come funziona la nostra animazione<\/h4>\n

Quello che andremo a creare in questo nuovo tutorial di programmazione iPhone \u00e8 un effetto di scorrimento da destra verso sinistra per un testo mostrato all’interno di un’UILabel. Immaginate un testo molto pi\u00f9 lungo dello spazio disponibile all’interno della label. Inizialmente vedremo solo una parte (l’inizio) della nostra stringa, il resto sar\u00e0 quindi “nascosto”. Per ottenere la nostra animazione e visualizzare quindi tutto il testo, dovremo farlo scorrere e per questo sfrutteremo un timer che durante la sua esecuzione eliminer\u00e0 in modo ciclico il primo carattere della stringa visualizzata, aggiunger\u00e0 il carattere successivo (al momento non visibile) e ripresenter\u00e0 la stringa ottenuta nella UILabel. Ai cicli successivi verranno rieseguite le stesse operazioni e l’effetto finale sar\u00e0 proprio quello di uno scorrimento animato del testo. Ovviamente finite le lettere della nostra frase verranno ripescate le prime eliminate e la frase ricomincer\u00e0 la sua corsa. (ok, \u00e8 pi\u00f9 facile a farsi che a dirsi).<\/p>\n

Il nostro progetto XCode<\/h4>\n

Apriamo un nuovo progetto XCode e per prima cosa occupiamoci di dichiarare nel file .h un indice che tenga conto della lettera da cui dovr\u00f2 partire per muovermi verso sinistra e un timer che useremo ad ogni step della nostra animazione per eliminare una lettera all’inizio e aggiungerne un’altra alla fine della nostra stringa da mostrare:<\/p>\n

\r\n@interface T_097ViewController : UIViewController \r\n{\r\n    int index; \/\/indice per tenere conto della lettera da cui partiamo\r\n    NSTimer * timer;\r\n}\r\n- (void)targetMethod:(NSTimer *)timer;\r\n@end\r\n<\/pre>\n
Fatto questo possiamo creare la nostra UILabel e il nostro Timer che di fatto andr\u00e0 poi a fare tutto il lavoro per noi. Apriamo quindi il file di implementazione e modifichiamo il metodo “viewDidLoad” come segue:<\/p>\n
\r\n- (void)viewDidLoad\r\n{\r\n    [super viewDidLoad];\r\n    UIImageView * sfondo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@\"sfondot#097.png\"]];\r\n    [self.view addSubview:sfondo];\r\n    [sfondo release];\r\n    \r\n    \/\/stringa che andr\u00f2 a visualizzare sulla label\r\n    NSString * strTesto = [[NSString alloc] initWithString:@\"Questo \u00e8 un tutorial per devAPP scritto da Andrea Cappellotto\"];\r\n    \r\n    \/\/la mia label, la possiamo personalizzare come vogliamo\r\n    UILabel * lblText = [[UILabel alloc] initWithFrame:CGRectMake(40, 100, 240, 40)];\r\n    lblText.font = [UIFont systemFontOfSize:18];\r\n    lblText.backgroundColor = [UIColor clearColor];\r\n    lblText.textColor = [UIColor whiteColor];\r\n    lblText.text = strTesto;\r\n    lblText.tag = 100; \/\/imposto un tag per poi andarla a recuperare nel metodo chiamato dal timer per spostare la stringa\r\n    [self.view addSubview:lblText];\r\n    [lblText release];\r\n    \r\n    \/\/imposto l'indice ad 1\r\n    index = 1;\r\n    \/\/creo un dizionario con il paramentro del testo che poi andr\u00e0 a ripetersi\r\n    NSMutableDictionary * dict = [[NSMutableDictionary alloc] initWithObjectsAndKeys:strTesto,@\"text\", nil];\r\n    \/\/imposto un timer\r\n    timer = [NSTimer scheduledTimerWithTimeInterval:.15 \/\/ intervallo di tempo in cui il testo viene spostato 0.15 secondi in esempio\r\n                                     target:self\r\n                                   selector:@selector(targetMethod:)\r\n                                   userInfo:dict\r\n                                    repeats:YES];\r\n    \r\n    [strTesto release];\r\n    \r\n}\r\n<\/pre>\n
Nelle prime 3 righe non facciamo altro che aggiungere uno sfondo alla nostra applicazione, creiamo quindi la stringa che andremo a visualizzare e successivamente l’UILabel. Questa label la potremo personalizzare come meglio crediamo, non comprometter\u00e0 in alcun modo il funzionamento della nostra animazione. Nel nostro esempio ho impostato il font a 18, tolto il colore di sfondo e impostato il colore del testo in bianco e, ovviamente, settato il testo che visualizzeremo al suo interno.<\/p>\n
Ricordiamoci una cosa fondamentale, ovvero impostare un tag a questa label, poich\u00e8 nel metodo richiamato dal timer andremo a recuperare la label proprio grazie a questo tag!!<\/p>\n
Altra cosa importante \u00e8 il dizionario che creiamo e che poi passeremo al timer. In questo modo avremo all’interno del metodo richiamato dal timer la nostra stringa e, se durante il corso dell’applicazione volessimo cambiare il testo mostrato nella label, occorrer\u00e0 semplicemente modificare strTesto<\/em>.<\/p>\n
Nelle istruzioni successive creiamo il timer, il primo parametro riguarda il tempo di richiamo del metodo, potremo personalizzare a piacimento anche questo valore, abbiamo ancora il target, il metodo richamato, il dizionario passato come info e infine diciamo semplicemente di ripetere il metodo.<\/p>\n
Vediamo ora il cuore del nostro progetto, ovvero il metodo che svolge il compito di modificare la stringa visualizzata:<\/p>\n
\r\n-(void)targetMethod:(NSTimer *)timerM\r\n{\r\n    \/\/ottengo il dizionario delle info impostato sopra\r\n    NSMutableDictionary * dict = [timerM userInfo];\r\n    \r\n    NSLog(@\"%@, index: %i\", dict, index);\r\n    \/\/ricavo la label dal tag\r\n    UILabel * lbl1 = (UILabel *)[self.view viewWithTag:100];\r\n    \r\n    \/\/mi creo il range che voglio visualizzare, ogni volta tolgo una lettera dall'inizio quindi da index al numero di lettere che ha la mia stringa\r\n    NSRange range = NSMakeRange(index, [[dict objectForKey:@\"text\"] length]);\r\n    NSLog(@\"range : %i, %i\", range.location, range.length);\r\n    \r\n    \/\/creo la stringa che andr\u00e0 ad aggiungersi alla fine per dare l'effetto di ritorno\r\n    NSString *strText = [NSString stringWithFormat:@\" --- %@\", [dict objectForKey:@\"text\"]];\r\n    \/\/ dalla stringa sopra mi ricavo le lettere che mancano per comporre una stringa di lunghezza uguale a quella originale\r\n    NSString *str2 = [NSString stringWithString:[strText substringWithRange:NSMakeRange(0, index)]];\r\n    \/\/se l'indice \u00e8 arrivato alla fine lo faccio ripartire da 1\r\n    if (index == [[dict objectForKey:@\"text\"] length]) \r\n    {\r\n        index = 1;\r\n    }\r\n    \/\/concateno la stringa originale con le lettere che devo aggiungere e ne prendo il range che mi serve\r\n    NSString * str = [[dict objectForKey:@\"text\"] stringByAppendingString:str2];\r\n    \r\n    lbl1.text = [str substringWithRange:range];\r\n    \r\n    index ++;\r\n    \r\n}\r\n<\/pre>\n
Come vedete niente di complicato, i commenti presenti nel codice vi aiuteranno a comprendere il tutto.<\/p>\n
Tutto qui, e come per magia le nostra label avr\u00e0 ottenuto un bellissimo effetto!!! Molto utile, oltre agli esempi citati ad inizio articolo, anche per mostrare in una barra le ultime news di una rivista o un sito.<\/p>\n
Ultima cosa, non dimentichiamoci di fermare il timer quando la vista scompare, di ripristinarlo quando ricompare e, non meno importante, di rilasciarlo nel dealloc!! \ud83d\ude09<\/p>\n
\r\n- (void)viewDidUnload\r\n{\r\n    [super viewDidUnload];\r\n    [timer invalidate];\r\n    \/\/ Release any retained subviews of the main view.\r\n    \/\/ e.g. self.myOutlet = nil;\r\n}\r\n\r\n- (void)dealloc\r\n{\r\n    [super dealloc];\r\n    [timer release];\r\n}\r\n\r\n- (void)viewWillAppear:(BOOL)animated\r\n{\r\n    if (![timer isValid]) \r\n    {\r\n        [timer fire];\r\n    }\r\n    \r\n}\r\n<\/pre>\n
Bene con questo tutorial abbiamo terminato, se avete bisogno di chiarimenti o aiuti non esitate a postare le vostre richieste sul nostro forum<\/a> qui su devAPP.it<\/p>\n
Buona giornata e alla prossima!! \ud83d\ude09<\/p>\n
\"\"<\/a> Se avete problemi con il tutorial, questo \u00e8 il nostro file di progetto.<\/a><\/p>\n

\n\"t097-animare-testo-uilabel-xcode-01\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Alzi la mano chi di voi non ha mai avuto problemi durante lo sviluppo delle proprie applicazioni…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[790,788,757,792,793,791,789,125],"class_list":["post-7090","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-animare-testo-iphone","tag-animazioni-ios","tag-animazioni-xcode","tag-esempi-codice-objective-c","tag-programmare-iphone-e-ipad","tag-testo-scorrevole-xcode","tag-tutorial-pratici-xcode","tag-uilabel"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7090","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=7090"}],"version-history":[{"count":17,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7090\/revisions"}],"predecessor-version":[{"id":7133,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/7090\/revisions\/7133"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=7090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=7090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=7090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}