Skip to main content

Implement orientation modes in iPhone Hybrid Applications

Let suppose you are working on a hybrid application which runs only in single (portrait) mode. One day a requirement come that PDF and Doc Viewer (HTML Page) should support both (landscape, portrait) mode. Your Application loads all the HTML content from the local html files and you need to implement the above functionality only for one HTML file.







Let break the above task in the modules:

Step 1:


Application should detect when the PDF and Doc viewer is open in application. I setup location.href tag in html to "docvieweron://" and "docvieweroff://" when page is open and closed respectively. In this way I am getting a delegate callback in web view:

WebViewDelegate:

- (BOOL) webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request
  navigationType: (UIWebViewNavigationType)navigationType
{
    
    NSString* urlString = [[request URL] absoluteString];
    if([urlString hasPrefix:@"docvieweron"]){
        return NO;
    }else if([urlString hasPrefix:@"docvieweroff"]){
        return NO;
    }
    return YES;

}

Step 2:


We have the event when doc or pdf viewer is opened. We need to write the code to support both the orientation:

WebViewDelegate:
if([urlString hasPrefix:@"docvieweron"]){
        [(AppDelegate*)[[UIApplication sharedApplication] delegate] setIsFullScreenPlaying:true];
        return NO;
}

APPDelegate.m:

- (NSUInteger) application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window{
    if (self.isFullScreenPlaying) {
        return UIInterfaceOrientationMaskAllButUpsideDown;
    }
    return UIInterfaceOrientationMaskPortrait;
}

Application now supports both the orientation mode when doc or pdf viewer is opened.
Just try to close or navigate to another page. You will see application still support both the mode.


How to stop that?

Step 3:

else if([urlString hasPrefix:@"docvieweroff"]){
        [(AppDelegate*)[[UIApplication sharedApplication] delegate] setIsFullScreenPlaying:false];
        return NO;
    }

Try now? Application will stop to react on orientation event. But still one thing left when you close or navigate to other view by keeping the device in landscape mode then other page will open in landscape :(. How to stop that?


Rewrite the code in step 3 as given in step 4:


Step 4:

Rewrite the code:

else if([urlString hasPrefix:@"docvieweroff"]){
        [(AppDelegate*)[[UIApplication sharedApplication] delegate] setIsFullScreenPlaying:false];
         UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
        if(self.wasLandscaped && (orientation != UIDeviceOrientationPortrait && orientation != UIDeviceOrientationPortraitUpsideDown)){
            webView.transform = CGAffineTransformMakeRotation(0);
            CGRect frame = webView.frame;
            CGFloat width = frame.size.width;
            frame.origin = CGPointZero;
            frame.size.width = frame.size.height;
            frame.size.height = width;
            webView.frame = frame;
        }
        self.wasLandscaped = false;
        return NO;
  }

self.wasLandscaped:


Variable used to check whether device rotates to landscape mode or not when PDF or Doc viewer is opened. We can check in following manner:
 [[NSNotificationCenter defaultCenter] addObserver:self // put here the view controller which has to be notified
                                             selector:@selector(orientationChanged:)
                                                 name:@"UIDeviceOrientationDidChangeNotification"

                                               object:nil];


- (void)orientationChanged:(NSNotification *)notification{
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
    if([(AppDelegate*)[[UIApplication sharedApplication] delegate] isFullScreenPlaying]){
        if(orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight){
            self.wasLandscaped = true;
        }
    }
    NSLog(@"Orientation changed");
}

Once we know the device is rotated in landscape mode when PDF or DOC viewer is opened we can transform the Web view so that its content will be setup for the portrait mode :).

We are done with our task. Please let me know if you have any question on this. You can drop a mail or add a comment :).

Comments

Post a Comment

Popular posts from this blog

iOS8 UIWebView Remove or Modify Keyboard Toolbar

Remove Toolbar: One of my client requirements is to remove the default toolbar for the keyboard. I found numerous examples for iOS7 to remove toolbar from the keyboard window. But it did not work for iOS8. So i came to following solution after some Research on Google: Step1:   First we need to add observer for keyboard notification: [[ NSNotificationCenter defaultCenter ]  addObserver : self selector : @selector ( removeKeyboardTopBar :) name : UIKeyboardWillShowNotification object : nil ]; Step 2: We need to implement the method for observer: - ( void )removeKeyboardTopBar {     } Step 3: Find the keyboard window from all the application  windows:   - ( void )removeKeyboardTopBar {     UIWindow *keyboardWindow = nil ;     UIView * toolBarContainer = nil ;     NSArray * windows = [[ UIApplication sharedApplication ] windows ];     for ( U...
Post a Comment
Read more

NSThread with Asynchronous Request

NSThread: It is class used in Cocoa framework to create a thread.You have to specify a target and selector to create a new thread in objective c. So the selector or method is main entry point of your thread.  Detail: What happen once the thread execute all the code in the method (Thread main routine)? Thread is terminated after execute all the code in the entry(its main routine) routine. So how we can run an asynchronous request on NSThread ? What is Async request? It is non blocking request which permit the application to do other task side by side as request is in continue. So it enhance parallelism in the application. Now question is how we can prepare a asynchronous request in iOS: - ( void ) startAsyncRequestWithUrl:( NSString *)urlString{     assert (urlString != nil && urlString. length > 0 );     NSURL * url = [[ NSURL alloc ] initWithString :urlString];     NSURLRequest * urlRequest = [[ NSURLReq...
Post a Comment
Read more