Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 9    Views: 138

Absentia
buzztouch Evangelist
Profile
Posts: 960
Reg: Oct 20, 2011
Alaska
20,600
04/09/13 06:03 PM (12 years ago)

An amazing code snippet - if I could just get it to work...

I came across what seems to be the perfect solution for making rotation work on specified screens in a tabbed layout. I originally found the code here - http://stackoverflow.com/questions/5272290/how-to-hide-uitabbarcontroller/11490623#11490623 - the code animates the tab bar out of view when the device is rotated to landscape and then animates it back into view when the device rotates to portrait Here is a video of this code in action, I am using it on an html screen with embedded youtube videos...I'll be referring back to this video in a moment because it also shows the problem I'm having - http://www.youtube.com/watch?v=40QKLpxFhPM&feature=youtu.be So this is how I have it all set up in my app --------- 1. I specify in my appDelegate.m that I only want my html screen to rotate to every orientation with this code - if ([[BT_strings getStyleValueForScreen:self.rootApp.currentScreenData nameOfProperty:@"itemType" defaultValue:@""] isEqualToString:@"BT_screen_customHTML"]){ canRotate = TRUE; }else{ if([appDelegate.rootApp.rootDevice isIPad]){ canRotate = FALSE; }else{ //should we prevent rotations on small devices? if([appDelegate.rootApp.jsonVars objectForKey:@"allowRotation"]){ if([[appDelegate.rootApp.jsonVars objectForKey:@"allowRotation"] isEqualToString:@"largeDevicesOnly"]){ NSLog(@"%@", @"SHOULD NOT ROTATE"); canRotate = FALSE; } } } } 2. In the viewDidAppear method of BT_screen_customHTML.m I create an observer to detect screen rotation - [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(detectOrientation) name:UIDeviceOrientationDidChangeNotification object:nil]; 3. In the viewDidDisappear and dealloc methods of BT_screen_customHTML.m I remove the observer - [[NSNotificationCenter defaultCenter] removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil]; 4. After the viewDidDisappear method, I add the method that will respond to the observer when the screen is rotated - -(void) detectOrientation { if (([[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeLeft) || ([[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeRight)) { [self hideTabBar:self.tabBarController]; } else if (([[UIDevice currentDevice] orientation] == UIDeviceOrientationPortrait) || ([[UIDevice currentDevice] orientation] == UIDeviceOrientationPortraitUpsideDown)) { [self showTabBar:self.tabBarController]; } } 5. Finally, right after that method, I add the two methods that execute the main code that will hide and show the tab bar - - (void) hideTabBar:(UITabBarController *) tabbarcontroller { CGRect screenRect = [[UIScreen mainScreen] bounds]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.5]; float fHeight = screenRect.size.height; if( UIDeviceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation) ) { fHeight = screenRect.size.width; } for(UIView *view in tabbarcontroller.view.subviews) { if([view isKindOfClass:[UITabBar class]]) { [view setFrame:CGRectMake(view.frame.origin.x, fHeight, view.frame.size.width, view.frame.size.height)]; } else { [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, fHeight)]; view.backgroundColor = [UIColor clearColor]; } } [UIView commitAnimations]; } - (void) showTabBar:(UITabBarController *) tabbarcontroller { CGRect screenRect = [[UIScreen mainScreen] bounds]; float fHeight = screenRect.size.height - 49.0; if( UIDeviceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation) ) { fHeight = screenRect.size.width - 49.0; } [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.5]; for(UIView *view in tabbarcontroller.view.subviews) { if([view isKindOfClass:[UITabBar class]]) { [view setFrame:CGRectMake(view.frame.origin.x, fHeight, view.frame.size.width, view.frame.size.height)]; } else { [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, fHeight + 30)]; } } [UIView commitAnimations]; } The results of the above tutorial is exactly what I'm showing in the video. If you watch the video it's pretty obvious what my issue is. When the device is rotated to landscape and the hideTabBar code runs, the screen becomes slightly offset from where it was before. You can see in my video that the embedded video at the top is now sitting behind the navigation bar. Rotating the device back to portrait seems to push it up even further, and as can also be seen in the video, it becomes impossible to scroll all the way to the bottom. I know this is a conflict with the html screen because I tried this same thing with the mac image gallery and it works perfectly. Any ideas on how to make it so that the layout returns to the exact same place it was before? Also, on a side note, I noticed that the navigation bar becomes thinner when the screen is rotated...is that normal behavior?
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
04/09/13 07:00 PM (12 years ago)
Hi, quickie, webinar starting in :03 mins. I saw your post and got to thinking...have a look at the BT_tabBarController.m file (in BT_Layout folder). You'll see in the didRotateFromInterfaceOrientation method where is looks for a method called "layoutScreen" in the current plugin. This means that if you create a simple method called "layoutScreen" in your html plugin (declare it in .h and implement it in .m) like this... -(void)layoutScreen{ } Then the code as it exists will automagically trigger that method when your plugin loads. Or at least it should. This means you can get rid of the observers and add your logic there. Not sure if it will help clean this up or not? Nothing wrong with observers but they can get complicated. Jumping in webinar and will re-visit this later.... d.
 
Absentia
buzztouch Evangelist
Profile
Posts: 960
Reg: Oct 20, 2011
Alaska
20,600
like
04/09/13 07:54 PM (12 years ago)
@ David - huge thanks for the reply - turns out that was the exact issue! There was actually ALREADY a layoutScreen method in customHTML.m that was loaded with layout code. So I whenever I rotated the screen, it was running that method and the one that hides/shows the tab bar I wasn't sure if pasting the detectOrientation code over your layoutScreen code would cause issues, but surprisingly it didn't
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
04/09/13 08:26 PM (12 years ago)
Cool. Just off webinar, had a look at the Tip Calculator plugin. Cute, neat, useful. Happy to see a young developer in the market. On to the next thing....
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
04/10/13 06:52 AM (12 years ago)
Very nice and useful. How difficult to add this functionality to other plug-ins? This would be a great CP option for almost every screen, like having the LOGIN or IAD yes/no. Probably have to look at each screen.... Rotation is always an issue with every app for some screen. For sure want to study this more and now curious if this is possible on that other platform..... Great share & solution @Absentia and thanks for the assistance David!
 
Jerry
Aspiring developer
Profile
Posts: 51
Reg: Aug 07, 2012
Dallas
3,160
like
04/10/13 08:06 AM (12 years ago)
Hi Jonathan, This is not related to your original thread but how do you create your video screens? Are you using a Custom HTML screen? And are you using screen shot for your image of the video (the images with the red play button in the middle) or is that generated automatically from the video. Hope that 2nd question makes sense. ;-)
 
Absentia
buzztouch Evangelist
Profile
Posts: 960
Reg: Oct 20, 2011
Alaska
20,600
like
04/10/13 04:16 PM (12 years ago)
@Jerry - It's a custom HTML screen with embedded youtube videos. Every youtube video has an easily accessible html embedding code. I think you have to click "share" underneath the video or something like that and then you should see an embed option somewhere copy and paste that into your html source, adjust the dimensions to whatever works for you, and you should be good to go :)
 
Jerry
Aspiring developer
Profile
Posts: 51
Reg: Aug 07, 2012
Dallas
3,160
like
04/10/13 06:06 PM (12 years ago)
Thanks. Sounds easy enough... I read where you spend time updating your app and adding new features. I have a tendency to start working on a new app once I see the app start to tail off in terms of Revmob revenue. Do you see a resurgence in Revmob installs by updating your apps and adding more content?
 
Absentia
buzztouch Evangelist
Profile
Posts: 960
Reg: Oct 20, 2011
Alaska
20,600
like
04/10/13 06:19 PM (12 years ago)
I only focus on updating apps that are still making money and have a lot of active users/daily downloads - if I see that an app is a total bomb or is hardly getting downloads it doesn't make any sense to me to invest any more time into it. I came across a good tip from an app development and marketing course - "don't fall in love with an idea" - Sometimes I'll put tons of work into an app and I'll be so sure it will be a hit...but then it isn't. That's just the way the app store is - I just move on to the next thing Plus all of my apps are free so it isn't like I'm screwing over paying users by abandoning an app
 
Jerry
Aspiring developer
Profile
Posts: 51
Reg: Aug 07, 2012
Dallas
3,160
like
04/10/13 06:41 PM (12 years ago)
Ain't that the truth. I had this one app that I thought would be a big hit. I even had this app review site ask me to showcase it on their site. But it flopped-- less than 50 downloads a day. LOL
 

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.