Oggi vedremo come creare una Splash Screen e come personalizzare la sua durata di visualizzazione nella nostra applicazione. Premettiamo che come Splash Screen Apple raccomanda l’uso di una semplice immagine di dimensioni 320×480 pixel di nome Default.png da inserire nel bundle dell’app. Questa, sempre secondo le raccomandazioni Apple, dovrebbe contenere una rappresentazione dell’applicazione avviata, in modo da “illudere” l’utente con un’apparente riduzione dei tempi di caricamento dell’app stessa. Certo è che, nonostante le raccomandazioni Apple, potreste avere esigenze diverse e aver bisogno di costruire una vostra View personalizzata da usare ad esempio come Disclaimer. In questo caso, molto probabilmente, vorreste sicuramente poter gestire la sua durata, o anche solo la sua “cancellazione” tramite un tocco.
Vediamo una possibile soluzione. Apriamo Xcode, creiamo un nuovo progetto, dall’elenco dei template disponibili scegliamo “Tab Bar Application” e proseguiamo. Diamo un nome al nostro progetto, ad esempio “disclaimer”, scegliamo in che posizione salvarlo e andiamo avanti.
Eccoci con il nostro progetto pronto. Se clicchiamo ora su “Build and Run” otterremo un risultato come quello mostrato in figura qui in basso, ovvero, si aprirà direttamente la nostra app mostrando direttamente la UITabBar con i suoi elementi e la prima View:
Creiamo quindi la nostra Splash Screen personalizzata. Clicchiamo con il pulsante destro del mouse su “Classes” in “Groups & Files”, quindi su “Add” ed infine su “New File…”
Clicchiamo su “Cocoa Touch Class” sotto la sezione iPhone e tra i template di file scegliamo “UIViewController subclass”, accertiamoci che ci sia la spunta su “With XIB for user interface” e clicchiamo su “Next”. Nella nuova finestra diamo un nome, ad esempio mySplash, e mettiamo la spunta su Also create “mySplash.h” prima di confermare.
Apriamo il file “mySplash.h” e modifichiamo il codice come segue:
#import
@interface mySplash : UIViewController {
}
- (IBAction)dismissSelf:(id)sender;
@end
Abbiamo semplicemente aggiunto la dichiarazione di un metodo, di nome dismissSelf, che assoceremo ad un pulsante creato tramite Interface Builder (IBAction indica proprio che si tratta di un’azione per IB), che ci permetterà di avviare l’applicazione e nascondere la splash tramite un semplice tocco sul pulsante.
Vedremo anche come gestire la scomparsa sella Splash Screen tramite un tempo predefinito e da noi scelto, controlleremo quindi la sua durata.
Passiamo al file “mySplash.m” e modifichiamo il codice come mostrato qui in basso:
- (IBAction)dismissSelf:(id)sender
{
[self dismissModalViewControllerAnimated:YES];
}
- (void)dismiss
{
[self dismissModalViewControllerAnimated:YES];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self performSelector:@selector(dismiss) withObject:self afterDelay:8];
}
Come vedete abbiamo usato una semplice istruzione che non fa altro che nascondere la Splash Screen. I due metodi sfruttano di fatto la stessa identica istruzione, solo che il primo lo assoceremo al pulsante, il secondo al nostro “timer”. Nel viewDidLoad potete notare come abbiamo settato un tempo di visualizzazione di 8 secondi per la splash, tramite “afterDelay:8”. Sarà questo valore che, una volta modificato, vi permetterà di aumentare o diminuire la durata della vostra Splash Screen.
Possiamo ora aprire il file mySplash.xib, facendo semplicemente doppio click sopra di esso, per iniziare a disegnare la nostra View personalizzata da usare come Splash Screen. Ricordate di inserire un pulsante al suo interno (UIButton). Cliccate quindi su “File’s Owner”, andate nella finestra “My Splash Connections” e collegate il metodo “dismissSelf:” con il tasto appena inserito. Ricordate di scegliere “Touch Up Inside” dal menù contestuale che si aprirà al rilascio del mouse sul pulsante. Terminato il vostro lavoro Salvate e chiudete Interface Builder.
Ancora poche righe di codice e il lavoro sarà terminato. Apriamo ora il file “…AppDelegate.h”, nel nostro caso “disclaimerAppDelegate.h” e importiamo il file di intestazione “mySplash.h”, semplicemente aggiungento la seguente istruzione subito sotto l’importazione dell’UIKit:
#import "mySplash.h"
Salviamo e apriamo il rispettivo file “disclaimerAppDelegate.m”. Modifichiamo quindi il codice come segue:
#import "disclaimerAppDelegate.h"
@implementation disclaimerAppDelegate
@synthesize window;
@synthesize tabBarController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Add the tab bar controller's current view as a subview of the window
[window addSubview:tabBarController.view];
mySplash *splashView = [[mySplash alloc] initWithNibName:@"mySplash" bundle:nil];
splashView.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[tabBarController presentModalViewController:splashView animated:NO];
[splashView release];
}
Come vedete abbiamo aggiunto quattro righe di codice, saranno proprio queste a mostrarci la nostra personalissima Splash Screen prima dell’avvio dell’app vera e propria, in questo caso basata su TabBar.
Possiamo salvare e cliccare su “Build and Run” per testare il nostro lavoro su iPhone Simulator o direttamente sul nostro dispositivo, iPhone o iPod Touch.
Ecco uno screenshot del nostro progetto in esecuzione:
13 Responses to “T#025 – Creiamo una Splash Screen e gestiamo la sua durata via codice”
20 Febbraio 2010
ByterosUtilissimo tutorial, la mia splash si toglie da sola 🙁
Con il 3G va benissimo, ma col 3GS mica tanto…
20 Febbraio 2010
Staff devAPPCiao, in realtà il tutorial è stato fatto con un 3GS, apri un topic sul forum con il tuo codice.. vediamo cosa c’è che non va 😉
21 Febbraio 2010
ByterosNo no… mi sono espresso male…
Alla mia App si toglie da solo, alla quale non ho applicato questo codice 😀
ma ho solo inserito l’immagine.
21 Febbraio 2010
LuigiSi ma infatti la splash si toglie da sola…questo codice è utile in caso di un disclaimer da visualizzare subito dopo la splash oppure per visualizzare, per esempio, un messaggio pubblicitario/info
10 Marzo 2010
Avviare automaticamente un metodo dopo un tempo prestabilito | devAPP[…] vedere un esempio pratico di quanto descritto nel nostro Tutorial numero 25, in cui gestiamo la durata di una Splash Screen con questo […]
8 Maggio 2010
FraHo inserito tutto il codice ma quando compilo non si vede niente
24 Giugno 2010
DiegoDevi aggiungere
[window makeKeyAndVisible];
in didFinishLaunchingWithOptions
5 Luglio 2010
Gabryio ho fatto tutto quello che hai scritto nel tutorial, ma mi succede che mostra la splash screen per un secondo (quando nel codice c’è scritto 8) e poi mi si chiude il programma e non fa vedere la tab bar.
come mai?
21 Gennaio 2011
MicheleCiao ho seguito il tutorial e sono riuscito a realizzare la splash screen…solo che si vede per un secondo e poi scompare subito…vorrei sapere che istruzioni devo utilizzare per farla vedere per qualche secondo in pù
3 Maggio 2011
Pier Angeloanch’io ho seguito alla lettera il tutorial ma la splash screen si vede per un secondo e non si vede neanche il tasto inserito
Aiutatemi
8 Giugno 2011
MaveDevGrazie per il tutorial, io ho il problema inverso da tutti gli altri, la mia splash screen viene visualizzata pero’ poi non scompare piu’ fino a che non premo il tasto.
Comunque si mancava il “[window makeKeyAndVisible];”
in didFinishLaunchingWithOptions, mi sa’ che pero’ e’ questa istruzione che poi non fa’ funzionare il contatore per far sparire la splash screen.
8 Giugno 2011
MaveDevOk come non detto, mancava il “[window makeKeyAndVisible];”
in didFinishLaunchingWithOptions, ma avevo scritto male la funzione per la durata della Splash, adesso funziona tutto, grazie ancora!
1 Dicembre 2011
PieroSalve ho provato ad utilizzare questa splash per un rss reader….
ho aggiunto le due classi della splash e ho ripetuto il tutorial ma nulla….non mi esce nessuna schermata introduttiva va direttamente alla tabella del sito che ho caricato…..