Introduction:
Some people asked me about creating a splash screen in iPhone. So today I am going to write a simple tutorial on creating splash view for your application. I will write another post on good looking splash page as well. Its really a small thing but have a really good impact on your users.
So lets use this image as your splash screen (This is Skype application splash screen)
Step 1:Create a new Xcode project and name it Splash. Open the SplashViewController.xib file and change the background colour to white. Run the application and you will see a black screen appear before it shows you white screen.
Step 2:Drag the above image in to your resources file. Rename the file to Default.png. Run your application, you will see that this image will be a splash screen for your project (Its so easy !). So the concept is that sdk provide you a way to display user something before your application loads fully into memory. So default.png file basically shows user that something is coming and give iPhone time to load resources required for the application into memory. You can add any image on your application and name it Default.png and it will become your starting (splash/default) screen.
Now you want that your splash screen will be displayed around 2-3 seconds before it display the main screen to user or you want to load something from server. So to do that, I am going to use model view which will be shown to user and hide after 3 seconds. You can customized it if you want to hide it from code either then using fixed time.
Step 3:In SplashAppDelegate.m file write this line at the end of applicationDidFinishLaunching method.
[viewController showSplash];
Step 4:In your SplashViewController.h file write these two methods definitions and also add a IBOutlet variable.
IBOutlet UIView *modelView;
- (void)showSplash;
- (void)hideSplash;
Step 5:Write the following code at the end of SplashController.m file
-(void)showSplash
{
UIViewController *modalViewController = [[UIViewController alloc] init];
modalViewController.view = modelView;
[self presentModalViewController:modalViewController animated:NO];
[self performSelector:@selector(hideSplash) withObject:nil afterDelay:2.0];
}
//hide splash screen
- (void)hideSplash{
[[self modalViewController] dismissModalViewControllerAnimated:YES];
}
Step 6:Now you have to map modelView inside Interface builder. (Watch video to better understand this) Drag a view to your SplashView
Step 7:Add the UIImageView to new view and change the image name to Default.png. Map this to modelView in SplashController.
Splash Screen code
You can grab this code from here.
nice tutorial!!!!
Very good
Thank for your good tutorial.
It’s simple but very helpful.
very good for beginner……..
where I can control the splash screen time on this tutorial to make visible for a little more or less?
@Maykel,
Look at this line
[self performSelector:@selector(hideSplash) withObject:nil afterDelay:2.0];
Change the delay to more or less to yours needs
Hi
Thanks for the tip, I have another question for you please?
where i can find if you know a tutorial that help to make and understand a calculation process
My Idea:
two entry-field: –to write in any number as input.–
one label: –to get the result from the number in the input field–
One button: –to execute the action. (plus, less, multiplying or dividing calculation)–
any tip or idea will be great help.
again thanks
Maykel
Hi,
Is it possible to apply this code to an Tab Bar Application? I have tried with the Tab Bar template but I get errors..
yes i would also like to know how to do this with a tab bar app?
@Chenks & Chris
I uploaded a code for tab bar splash screen. You can get it from http://adeem.me/code/TabBar-Splash.zip
So this code will add the splash view on the tab bar controller, if you didnt understand the code and want a complete tutorial please let me know.
It would be awesome, if you could make it in to another tutorial!
I wrote the code for the splash screen like yours in my app, and it builds without erros. But when I run the app, the screen is black and after a few seconds OS X gives me a crash pop up ? :S
@Sokleen,
Can you please look into the code attached with this post or email me your test code at info at adeem.me ?
Just the thing I was looking for..Thank you very much
Do you have an example where you programmatically make the tab bar then add the splash screen. I am having a hard time getting this to work with a coded tab bar.
Thanks for this tutorial, but……oops!! I just discovered a typo!!
In step 5, the method “showSplash”:
modalViewController.view = modelView;
The “modelView” here should be “modalView”.
This was the starting point I needed to get a splash screen working. My ‘first view’ in the tab controller is a UINavigationController, but I soon figured out the minor changes required. Note: remember to add [modalViewController release]; at the end of the -showSplash method (is production code).
Thanks.
Awesome tutorial, but how do you make this work on an existing application?
I have a simple DrillDown App called … er … DrillDownApp so I have RootViewController.h and .m DrillDownAppAppDelegate.h and .m and DetailViewController.h and .m as classes.
Do I add code to RootViewController.h or .m or do I need another View and if so how do I get from that View to the RootViewController.
just i look ,thanks
Hi , let me ask you , I follow you step by step in my application , but does not work for me.
I dont understand what’s happend , my app start but not show my splash screen …
One more point , i put a breakpoint in my appDelegate and showSplash but they don’t get in in this function (showSplash)… so this screen show very fast….
I can’t get this to work. I get a viewController undeclared error. Can anyone help?
@mms
What are you talking about? The method is SplashViewController.h is IBOutlet UIView *modelView;
Thus SplashViewController.m is modalViewController.view = modelView;
You can change these to whatever name you want. As long as these two lines of code match.
Btw, I want to ask something. I think I messed up something in IB because everything works as advertised EXCEPT the splash screen loads very quickly regardless of what I change the afterDelay to.
Somehow the View that is receiving afterDelay is the original iPhone View and not my new View.
So what happens is my splash quickly loads then the white iPhone view stays white for the duration of afterDelay.
Somehow my own View is not receiving the afterDelay.
Can’t wrap my head around the problem.
Any ideas?
Thanks
Nice and simple article.
Salaam Brother,
Thanx for the great tutorial. I have a question on animated Splash Screens. How do we show some animation or a quicktime movie or something as a Splash Screen?
Thanx
This is aweeeeesome!!!!!!!!!
Can you be my private online teacher?
I’m a newbie on programming and i really wanna to have an iphone application created by myself!!!
Would you kindly please teach me step by step how to command a button to navigate to another page? And, do i need to add a new file in the same project (but i don’t know which folder to add it to >..<
ristin
In order to create a new page, do i need to add a new file in the same project, which folder should i add it to?
Once i create that page, how can i add 5, for example, different images on that page?
One more question, how can i add a button which can let people to turn the image to its backside? Thanks!!!
My splash screen behave very differently than expected…
Instead of showing the splash view for few seconds it shows the main window…
I ended up putting my splash image in the main window (without any need to do any mapping in the Interface builder and it works.
Granted I am doing something wrong here and if someone have any clue what it might be I would be more than happy to know what I did to mess things up.
I should probably mentioned that I have started from an existing project I have and not from a brand new project as outlined in this tutorial.
thanks.
I have the same problem as described by Sokleen previously. Any ideas?
Once we are done with modelView, can we release the resource here itself. Let me know if I am wrong.
- (void)hideSplash{
[[self modalViewController] DismissModalViewControllerAnimated:YES];
//release the modelView
[modelView release];
}
a great tutorial!!!
may i know where should i put the code, if i need to process something before the splash screen disappears?
[self presentModalViewController:modalViewController animated:NO];
//process here?
[self performSelector:@selector(hideSplash) withObject:nil afterDelay:5.0];
//or should i process my things here?
thanks.
Seems weird why you would do it with so much code, why not just add a sleep(5); to the delegate in the Bool which pauses the splash screen for a few seconds?
@Clive Smith,
sleep() function blocks the main thread causing the UI to freeze up. One should instead schedule some action to be performed later using -[NSObject performSelector:withObject:afterDelay:]
Add this line below the presentModalViewController to stop the splash from droping 20pixels on load i.e below. This will allow it butt up against the status bar and not drop
[self presentModalViewController:modalViewController animated:NO];
self.modalViewController.view.frame = CGRectMake(0, 0, 320, 480);
Thanks for this tuto.
This works well when the iphone is in vertical mode… but if the app is launched when the iphone is in horizontal mode? The image are different and in this example only one image is used.
Thanks one more time!