Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 18    Views: 185

PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
04/22/13 04:48 PM (12 years ago)

Tutorial: Show a nice Intro screen

Hi, Just to share (iPhone only portrait): If you want a nice introduction screen that is only showed once (the first time a user starts your app). Download this:https://github.com/MatthewYork/iPhone-IntroductionTutorial Let's say you have a button screen as your homepage (you can do this with any plugin). From the just downloaded source from github drag the following files into the folder bt_screen_menuButtons: MYIntroductionPanel.h MyIntroductionPanel.m MyIntroductionView.h MyIntroductionView.m SampleBackground.png SampleHeaderImage.png SampleImage1.png SampleImage2.png Now edit MYIntroductionPanel.h and add on line 27 #import <UIKit/UIKit.h> Now edit MyIntroductionPanel.m and add on line 27 #import <UIKit/UIKit.h> open MYIntroductionView.h and change line 74 to this: @property (unsafe_unretained) id <MYIntroductionDelegate> delegate; now go into BT_screen_menuButtons.h: Make the line where it says @interface look like this: @interface BT_screen_menuButtons : BT_viewController <BT_downloadFileDelegate, UIScrollViewDelegate, MYIntroductionDelegate>{ See, I added ,MYINtroductionDelegate Add this right after #import "BT_Item.h" (line39) #import "MYIntroductionView.h" and add this right after BOOL isLoading (line 61) NSArray *myPanels; NSUserDefaults * standardUserDefaults; Add next after this:@property (nonatomic) int buttonPadding; @property (nonatomic, retain) NSUserDefaults *standardUserDefaults; Now go to BT_screen_menuButtons.m add this on line 54: @synthesize standardUserDefaults; add this right after the last closing bracket from the ViewDidLoad (after line 134) -(void)viewDidAppear:(BOOL)animated{ if(![[NSUserDefaults standardUserDefaults] boolForKey:@"showIntro"]){ [[self navigationController] setNavigationBarHidden:YES animated:YES]; //STEP 1 Construct Panels MYIntroductionPanel *panel = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage1"] title:@"My first intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view."]; //You may also add in a title for each panel MYIntroductionPanel *panel2 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My second intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //You may also add in a title for each panel MYIntroductionPanel *panel3 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My third intro screen" description:@"My test text in panel3"]; //You may also add in a title for each panel MYIntroductionPanel *panel4 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fourth intro screen" description:@"My test text in panel4"]; //You may also add in a title for each panel MYIntroductionPanel *panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; //STEP 2 Create IntroductionView /*A standard version*/ //MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) headerImage:[UIImage imageNamed:@"SampleHeaderImage.png"] panels:@[panel, panel2]]; /*A version with no header (ala "Path")*/ //MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) panels:@[panel, panel2]]; //NSArray *paneltest = @"panel, panel2, panel3, panel4, panel5"; /*A more customized version*/ MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; //Set delegate to self for callbacks (optional) introductionView.delegate = self; //STEP 3: Show introduction view [introductionView showInView:self.view]; } //[[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"hasSeenTutorial"]; [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; //zet introductie op gelezen! } -(void)introductionDidFinishWithType:(MYFinishType)finishType{ if (finishType == MYFinishTypeSkipButton) { [[self navigationController] setNavigationBarHidden:NO animated:YES]; } else if (finishType == MYFinishTypeSwipeOut){ [[self navigationController] setNavigationBarHidden:NO animated:YES]; } //One might consider making the introductionview a class variable and releasing it here. // I didn't do this to keep things simple for the sake of example. } That's it!! Now you have a nice introduction screen that shows only once (the first time the user starts the/your app) If you want to add more screens just copy this: MYIntroductionPanel *panel5 = [[MYIntroductionPanel alloc] initWithimage:[UIImage imageNamed:@"SampleImage2"] title:@"My fifth intro screen" description:@"Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below. Once you panels have been created, you are ready to create the introduction view. You will pass the panels you just created into this method where they will be rendered (in order) in the introduction view. An example can be found below."]; And change panel5 to panel6 Next look for this: MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; and add panel6 so it looks like this: MYIntroductionView *introductionView = [[MYIntroductionView alloc] initWithFrame:self.view.bounds headerText:@"" panels:@[panel, panel2, panel3, panel4, panel5, panel6] languageDirection:MYLanguageDirectionLeftToRight]; [introductionView setBackgroundImage:[UIImage imageNamed:@"SampleBackground"]]; Can't remember the lowest version this works but I think it's ios5 Have much fun with this! Best Regards, Danny See: http://tinypic.com/r/2ptrrjr/4 http://tinypic.com/r/5jz2vd/4 http://tinypic.com/r/qoyg4n/4 PS. When testing it would be usefull to comment this line: [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; so it looks like this: //[[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"showIntro"]; or do this [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"showIntro"]; (see that I've changed setBool to NO) Edit: Made some changes. Tutorial was incomplete
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
04/22/13 05:01 PM (12 years ago)
Very nice! My mind is reeling with the possibilities! Mark
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
04/22/13 05:02 PM (12 years ago)
Great, Yes! Lots of possibilities here...... Best Regards, Danny
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
04/22/13 05:52 PM (12 years ago)
This looks great. Thanks Danny. Good stuff as always.
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
04/22/13 06:58 PM (12 years ago)
Danny- forums are better place when you are around! As always, cheers. See you at #BuzzCon14
 
farcat
buzztouch Evangelist
Profile
Posts: 1008
Reg: Jan 27, 2012
France
13,230
like
04/22/13 11:48 PM (12 years ago)
Thanks Danny, can't wait to try this! Farcat
 
Mackimack
Apple Fan
Profile
Posts: 481
Reg: Dec 30, 2010
Sweden
14,310
like
04/23/13 12:04 AM (12 years ago)
Nice one Danny!
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
04/23/13 12:51 AM (12 years ago)
Hi All, thanks and have fun with it. @MacApple Thanks for the kind words. Haven't been as much on the forums lately (and near future) as much as I would like....too busy :-( Yeah, hope that I can join buzzcon next year (if in Europe would be better) and meet you guys and girls all in person :-) Best Regards, Danny
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
04/23/13 01:38 AM (12 years ago)
I made some small changes because the tutorial wasn't complete. Best Regards, Danny
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/23/13 02:00 AM (12 years ago)
Europe for Buzzcon 14, EUROPE!!! EUROPE!!! EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!EUROPE!!! EUROPE!!!
 
chris1
Code is Art
Profile
Posts: 3862
Reg: Aug 10, 2012
Austin, TX
50,120
like
04/23/13 04:33 AM (12 years ago)
Nice job - you should make this into a plugin! I had plans for such a plugin but never found time to work on it. Would much rather pay you some cash and download the work ready to go! :)
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
04/23/13 06:48 AM (12 years ago)
Excellent. Great find and share and even better tutorial. I would think this is hard to make into a plug-in unless it was a splash screen OR you made modified versions of the Menu Screen/Button Menu or one of those killer new menus like the carousel or animated circle... and dropped the code in there..... I duped the button menu plug-in to add some animation code to that for a similar reason. Regardless, this is an excellent tool to add to the kit. Thanks for the share. For sure hope to meet up one of these days, all about a BuzzCon 14 in EU - just don't make it Amsterdam....
 
Otatech
Code is Art
Profile
Posts: 80
Reg: Jul 18, 2012
Rome
800
like
04/23/13 12:46 PM (12 years ago)
Bravo Danny, as always :-)
 
Otatech
Code is Art
Profile
Posts: 80
Reg: Jul 18, 2012
Rome
800
like
04/23/13 12:51 PM (12 years ago)
Bravo Danny, as always :-)
 
Mackimack
Apple Fan
Profile
Posts: 481
Reg: Dec 30, 2010
Sweden
14,310
like
04/24/13 12:51 AM (12 years ago)
HI Danny. I try this to your BTA Design menu plugin. But I did not get this to work. I have you only try this to BT Button menu?
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/24/13 01:12 AM (12 years ago)
I came accross this in cocoa controls a while back. I modded the splash screen plugin. It's a bit more complicated than the tutorial above but well worth it. It showed the splash then showed the tutorial. The same way using nsuserdefaults (my new best friend over the past month) When it has initially loaded the splash screen would just react as normal and fade away.
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
04/24/13 01:25 AM (12 years ago)
Hi Marcus, I've only tried the button menu but it should work with every plugin. If it didn't work for you, did you get any errors or warnings? Be sure to use the #import Let me know. Best Regards, Danny
 
Mackimack
Apple Fan
Profile
Posts: 481
Reg: Dec 30, 2010
Sweden
14,310
like
04/24/13 05:53 AM (12 years ago)
Danny I have send you a mail.
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
04/24/13 06:11 AM (12 years ago)
Sorry for the inconvenience but I updated the tutorial. I forgot the part of the @interface line and the edits needed in the MYIntroductionPanel h and m and the edit in MyIntroductionView.h. Think that everything should be ok now. Best Regards, Danny
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.