\n
![\"Creare-un-contatore-animato-per-iPhone-iPad-01\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/06\/Creare-un-contatore-animato-per-iPhone-iPad-01.jpg\" "\\"Creare-un-contatore-animato-per-iPhone-iPad-01\\"")
<\/a> ![\"Creare-un-contatore-animato-per-iPhone-iPad-02\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/06\/Creare-un-contatore-animato-per-iPhone-iPad-02.jpg\" "\\"Creare-un-contatore-animato-per-iPhone-iPad-02\\"")
<\/a>\n<\/center><\/p>\n
Come sempre cercheremo di creare del codice che sia riutilizzabile in diverse occasioni quindi una volta realizzato questo tutorial non vi rester\u00e0 altro da fare che copiare i file nel vostro progetto ed interagire con il contatore come si fa con qualsiasi altro oggetto dell’UIKit.
\nPer iniziare abbiamo bisogno delle immagini per il nostro contatore, potete realizzarle con photoshop, potete comprarle online oppure ancora potete anche usare le mie se vi piacciono. Nel progetto allegato le troverete gi\u00e0 separate, non impazzite a tagliare queste:<\/p>\n
\n
<\/a>\n<\/center><\/p>\n
Adesso qui si svela il primo trucco, le immagini che serviranno saranno 20 e non 10 come si potrebbe pensare all’inizio, perch\u00e9 ci serviranno delle imagini per l’animazione.<\/p>\n
\n
<\/a>\n<\/center><\/p>\n
Io ho cercato con photoshop di dare l’effetto “movimento” inserendo due numeri per volta con una sfocatura verticale. Ad essere sincero questa idea non \u00e8 tutta farina del mio sacco, ma l’idea mi \u00e8 venuta giocando a Flight Control, infatti come potete vedere in questo screen sul loro gioco utilizzano proprio questa tecnica:<\/p>\n
\n
<\/a>\n<\/center><\/p>\n
Un’aspetto da non sottovalutare \u00e8 la naming convention, ossia i nomi da dare ai file, sar\u00e0 importante chiamare le immagini con dei nomi come “immagine_0.png”, “”immagine_1.png” etc.
\nio ho usato da “mc_0.png” fino a “mc_9.png” per le immagini delle singole cifre, e da “mc_10.png” fino a “mc_20” per le altre 10 immagini.<\/p>\n
Realizzate quindi le immagini non ci resta che passare ad xcode, create quindi un nuovo progetto ed importate le immagini che avete creato.
\nIo per semplicit\u00e0 ho creato un progetto di tipo “ViewBased application” e nel metodo “viewDidLoad” del viewcontroller principale ho inserito questo codice per generare lo sfondo ed il pulsante:<\/p>\n
\r\n- (void)viewDidLoad\r\n{\r\n \r\n[super viewDidLoad];\r\n \/* Creazione dello sfondo\r\n *\/\r\nUIImageView *bg = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@\"sfondo_devapp.png\"]];\r\n [bg setFrame:[[UIScreen mainScreen] bounds]];\r\n [self.view addSubview:bg];\r\n [bg release];\r\n \r\n \r\n \/* Creazione del pulsante\r\n *\/\r\n UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];\r\n [btn setFrame:CGRectMake(160 - 150 \/ 2, 230 - 60 \/ 2, 150, 60)];\r\n [btn setBackgroundImage:[UIImage imageNamed:@\"button.png\"] forState:UIControlStateNormal];\r\n [btn setTitle:@\"TAP ME!\" forState:UIControlStateNormal];\r\n [btn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];\r\n [self.view addSubview:btn];\r\n<\/pre>\nQuesto codice \u00e8 stato inserito solo per completezza e non ha direttamente a che vedere con il nostro contatore.<\/p>\n
Arriviamo quindi al cuore del progetto, realizziamo la nostra classe “MechanicalCounter” creando una nuova classe che derivi direttamente da uiview.
\nLa dichiarazione della classe \u00e8 la seguente:<\/p>\n
\r\n#import \r\n\r\n@interface MechanicalCounter : UIView {\r\n NSMutableArray *ciphers;\r\n int currentValue;\r\n int *values;\r\n}\r\n\r\n@property (nonatomic, retain) NSMutableArray *ciphers;\r\n@property (nonatomic, assign) int currentValue;\r\n\r\n- (id)initWithFrame:(CGRect)frame andCiphers:(int)nchipers;\r\n- (void)setValue:(int)newValue;\r\n- (void)showNextValue;\r\n\r\n@end\r\n<\/pre>\nHo dichiarato e variabili di istanza, la prima \u00e8 un NSMutableArray, conterr\u00e0 le UIImageView del nostro contatore, la seconda variabile \u00e8 un intero che contiene il valore attualmente visualizzato sul contatore mentre l’ultima variabile \u00e8 un puntatore ad intero, verr\u00e0 usata per costruire un semplice array in puro stile C. Questo array conterr\u00e0 in ogni posizione il valore della cifra corrispondente visualizzata nel contatore.
\nFacciamo un piccolo esempio: supponiamo che il contatore visualizzi 001234, l’array conterr\u00e0 6 uiimageview, la variabile currentValue conterr\u00e0 il valore 1234, mentre l’array values sar\u00e0 cos\u00ec:<\/p>\n
values[0] = 0;
\nvalues[1] = 0;
\nvalues[2] = 1;
\nvalues[3] = 2;
\nvalues[4] = 3
\nvalues[5] = 4;<\/p>\n
Perch\u00e8 uso un array C invece di un NSArray? Perch\u00e9 negli NSArray non si possono inserire variabili di tipo int, quindi dovrei passare da nsnumber e lo ritengo un’inutile spreco di spazio.<\/p>\n
Guardiamo quindi il primo metodo:<\/p>\n
\r\n-(id)initWithFrame:(CGRect)frame andCiphers:(int)nciphers {\r\n self = [super initWithFrame:frame];\r\n if (self) {\r\n self.ciphers = [NSMutableArray arrayWithCapacity:nciphers];\r\n values = calloc(nciphers, sizeof(int));\r\n \r\n \/* Calcolo la dimensione in larghezza\r\n *\/\r\n UIImage *imgtest = [UIImage imageNamed:@\"mc_0.png\"];\r\n float width;\r\n if (imgtest.size.width * nciphers > 320) {\r\n width = 320 \/ nciphers;\r\n }\r\n else {\r\n width = frame.size.width \/ nciphers;\r\n }\r\n \r\n \r\n \/* Calcolo l'array delle immagini per l'animazione\r\n *\/\r\n NSMutableArray *arr = [NSMutableArray arrayWithCapacity:10];\r\n for (int i = 10; i <= 19; i++) {\r\n NSString *str = [NSString stringWithFormat:@\"mc_%d.png\",i];\r\n [arr addObject:[UIImage imageNamed:str]];\r\n }\r\n \r\n \r\n \/* Istanzio le singole view\r\n *\/\r\n for (int i = 0; i < nciphers; i++) {\r\n UIImageView *v = [[UIImageView alloc] initWithFrame:CGRectMake(i * width, 0, width, frame.size.height)];\r\n [v setImage:imgtest];\r\n v.contentMode = UIViewContentModeScaleAspectFit;\r\n [v setAnimationImages:arr];\r\n [v setAnimationRepeatCount:1];\r\n [v setAnimationDuration:0.5];\r\n [ciphers addObject:v];\r\n [self addSubview:v];\r\n [v release];\r\n }\r\n }\r\n return self;\r\n}\r\n<\/pre>\nQuesto metodo \u00e8 il costruttore principale della nostra classe, lo invochiamo passando il frame in cui vogliamo visualizzare il contatore ed il numero di cifre che devono essere visualizzate.<\/p>\n
\r\nself.ciphers = [NSMutableArray arrayWithCapacity:nciphers];\r\nvalues = calloc(nciphers, sizeof(int));\r\n<\/pre>\nIniziamo quindi con il richiamare il costruttore della classe super e se tutto \u00e8 andato per il verso giusto proseguiamo inizializzando l'array ciphers e l'array values.<\/p>\n
\r\nUIImage *imgtest = [UIImage imageNamed:@\"mc_0.png\"];\r\n float width;\r\n if (imgtest.size.width * nciphers > 320) {\r\n width = 320 \/ nciphers;\r\n }\r\n else {\r\n width = frame.size.width \/ nciphers;\r\n}\r\n<\/pre>\nSegue un piccolo calcolo per ottenere la larghezza di ogni singola cifra, notare che se il numero delle cifre moltiplicato per la larghezza della singola immagine supera la dimensione dello schermo, tutto viene ridimensionato per far rientrare tutto il contatore entro i 320px dell'iphone.<\/p>\n
\r\n\/* Calcolo l'array delle immagini per l'animazione\r\n *\/\r\n NSMutableArray *arr = [NSMutableArray arrayWithCapacity:10];\r\n for (int i = 10; i <= 19; i++) {\r\n NSString *str = [NSString stringWithFormat:@\"mc_%d.png\",i];\r\n [arr addObject:[UIImage imageNamed:str]];\r\n }\r\n<\/pre>\nCreo un array con le uiimage che comporranno la mia animazione, lo creo solo una volta e lo associo a tutte le uiimageview.<\/p>\n
\r\n\/* Istanzio le singole view\r\n *\/\r\n for (int i = 0; i < nciphers; i++) {\r\n UIImageView *v = [[UIImageView alloc] initWithFrame:CGRectMake(i * width, 0, width, frame.size.height)];\r\n [v setImage:imgtest];\r\n v.contentMode = UIViewContentModeScaleAspectFit;\r\n [v setAnimationImages:arr];\r\n [v setAnimationRepeatCount:1];\r\n [v setAnimationDuration:0.5];\r\n [ciphers addObject:v];\r\n [self addSubview:v];\r\n [v release];\r\n }\r\n }\r\n<\/pre>\nCreo infine tutte le UIView che mi serviranno, e per ciascuna di esse imposto tutti i parametri necessari per l'animazione.<\/p>\n
A questo punto l'inizializzazione \u00e8 terminata, questo oggetto pu\u00f2 essere gestito come tutti gli altri oggetti dell'UIKit, infatti tornando al viewcontroller principale, sempre nel metodo viewdidiload possiamo aggiungere:<\/p>\n
\r\n\/\/mc \u00e8 una variabile di tipo MechanicalCounter dichiarata nel file .h \r\nmc = [[MechanicalCounter alloc] initWithFrame:CGRectMake(0, 0, 320, 124) andCiphers:10];\r\n [self.view addSubview:mc];\r\n<\/pre>\nper vedere questo risultato:<\/p>\n
\n![\"Creare-un-contatore-animato-per-iPhone-iPad-05\"](\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2011\/06\/Creare-un-contatore-animato-per-iPhone-iPad-05.jpg\" "\\"Creare-un-contatore-animato-per-iPhone-iPad-05\\"")
<\/a>
\n<\/center><\/p>\nMa ovviamente non \u00e8 solo questo quello che ci aspettiamo, ci serve un contatore che \"conti\" :D, quindi rimbocchiamoci le maniche ed implementiamo i restanti due metodi dichirati nel file .h<\/p>\n
\r\n- (void)setValue:(int)newValue;\r\n- (void)showNextValue;\r\n<\/pre>\nPartirei dal secondo, la cui implementazione \u00e8 banale:<\/p>\n
\r\n-(void)showNextValue {\r\n [self setValue:++self.currentValue]; \r\n}\r\n<\/pre>\nQuello che fa questo metodo \u00e8 richiamare un ulteriore metodo, che non \u00e8 dichiarato nel file .h e quindi si potrebbe definire \"privato\" passando come parametro il valore della variabile currentValue incrementato di 1.
\nAnche il primo metodo se vogliamo \u00e8 piuttosto semplice perch\u00e9 la sua implementazione \u00e8 questa:<\/p>\n
\r\n- (void)setCurrentValue:(int)acurrentValue {\r\n currentValue = acurrentValue;\r\n [self setValue:self.currentValue];\r\n}\r\n<\/pre>\nSi occupa di impostare correttamente la variabiel currentValue e richiamare lo stesso metodo privato del precedente.<\/p>\n
A questo punto allora bisogna capire cosa fa questo metodo setValue:<\/em> !!<\/p>\nIl codice \u00e8 questo, c'\u00e8 un p\u00f2 di matematica, ma niente paura:<\/p>\n
\r\n- (void)setValue:(int)newValue {\r\n if (newValue > (pow(10, [ciphers count]) - 1)) {\r\n if (newValue == (pow(10, [ciphers count]))) {\r\n newValue = 0;\r\n currentValue = 0;\r\n }\r\n else {\r\n NSLog(@\"Error: value too high\");\r\n return;\r\n }\r\n }\r\n int cifra;\r\n for (int i = [ciphers count] - 1; i >= 0; i--) {\r\n cifra = newValue \/ pow(10, i);\r\n if (cifra) {\r\n newValue = newValue - cifra * pow(10, i);\r\n }\r\n [self setCipher:[ciphers count] - i - 1 value:cifra];\r\n } \r\n}\r\n<\/pre>\nCon<\/p>\n
\r\nif (newValue > (pow(10, [ciphers count]) - 1)) {\r\n<\/pre>\nVerifico se il valore da settare \u00e8 maggiore del pi\u00f9 grande numero rappresentabile con quel dato numero di cifre. Ricordo che [chipers count] ritorna il numero di cifre del contatore, supponiamo sia 5, allora il maggiore numero rappresentabile \u00e8 10^5 - 1 = 99999.<\/p>\n
\r\nif (newValue == (pow(10, [ciphers count]))) {\r\n<\/pre>\nQuesto secondo controllo l'ho inserito perch\u00e9 voglio ottenere un contatore che quando arriva al suo massimo valore, se incrementato di 1 si riazzera, un p\u00f2 come i contachilometri delle auto.
\nIn questo caso se il valore da settare \u00e8 proprio 100000 allora riporto a zero il contatore ed il currentvalue, viceversa scrivo un messaggio d'errore sulla console.<\/p>\n
\r\nint cifra;\r\n for (int i = [ciphers count] - 1; i >= 0; i--) {\r\n cifra = newValue \/ pow(10, i);\r\n if (cifra) {\r\n newValue = newValue - cifra * pow(10, i);\r\n }\r\n [self setCipher:[ciphers count] - i - 1 value:cifra];\r\n }\r\n<\/pre>\nQui c'\u00e8 un attimino di matematica, \u00e8 il primo modo che mi \u00e8 venuto in mente, magari si pu\u00f2 ottimizzare, quello che mi serve \u00e8 recuperare le singole cifre da un numero intero.
\nQuello che faccio \u00e8 questo: con un ciclo for sulla variabile i parto dalla cifra pi\u00f9 significativa e calcolo la divisione tra il nuovo valore da settare e 10^i Se il risultato \u00e8 maggiore di zero allora sottraggo dal valore da settare il prodotto del risultato per 10^i infine imposto il valore della singola cifra con il metodo setCipher: value:<\/p>\n
Vediamo come al solito un esempio per chiarire meglio.<\/p>\n
Supponiamo di avere un contatore a 4 cifre e di voler visualizzare il valore 234.
\nLa prima iterazione del ciclo for calcoler\u00e0 234 \/ 10^3 = 0 (divisione intera, viene arrotondata) qiundi non entra nell'if e richiama direttamente il metodo per impostare a 0 la cifra in posizione 0 dell'array.
\nAlla seconda iterazione verr\u00e0 calcolato 234 \/ 10^2 = 2 quindi entro nell'if e porto il nuovo valore a 234 - 200 = 34, infine imposto a 2 la cifra in posizione 1 dell'array.
\nAlla terza iterazione verr\u00e0 calcolato 34 \/ 10^1 = 3 quindi entro nell if e porto il nuovo valore a 34 - 30 = 4, ed imposto a 3 la cifra in posizione 2 dell'array.
\nAll'ultima iterazione verr\u00e0 calcolato 4 \/ 10^0 = 4 e quindi entro nell'if e porto il nuovo valore a 4 - 4 = 0, ed imposto a 4 la cifra in posizione 4 dell'array.
\nEcco che quindi nell'array ho impostato 0234, proprio il numero che volevo. Difficile? no, dai!!
\nNon ci resta che vedere il metodo che modifica il valore della singola cifra:<\/p>\n
\r\n- (void)setCipher:(int)acipher value:(int)value {\r\n if (value != values[acipher]) {\r\n NSString *str2 = [NSString stringWithFormat:@\"mc_%d.png\",value];\r\n [[ciphers objectAtIndex:acipher] setImage:[UIImage imageNamed:str2]]; \r\n [[ciphers objectAtIndex:acipher] startAnimating];\r\n values[acipher] = value;\r\n }\r\n}\r\n<\/pre>\nAnche questo metodo \u00e8 piuttosto auto-esplicativo, l'unica particolarit\u00e0 \u00e8 che faccio il controllo per verificare se effettivamente il nuovo valore \u00e8 diverso dal precedente, in questo modo, quando viene incrementato il contatore non si animano tutte le cifre, ma solo quelle che effettivamente devono cambiare.<\/p>\n
Qui potete vedere anche il video del contatore in azione:<\/p>\n
\n