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

Asynchronous Request with NSOperationQueue

Today post is about how to run a asynchronous task in NSOperationQueue.  Generally we do not run a Asynchronous task in NSOperationQueue. It is also not recommended for any programmer to do that. This post is only for learning purpose what will happen if we schedule a asynchronous task in a queue and how can we complete that task:). So let us move to the learning: NSOperationQueue: In iOS NSOperationQueue is a class, which provide a way to perform operation concurrently. We also have others way to perform concurrent operation: 1) GCD 2) NSThread 3) pThread NSOperationQueue is a wrapper on GCD, which provides a very convenient way to execute operation concurrently. To create a Queue for Operation you have to simply allocate a object of the class: NSOperationQueue * opertionQueue = [[ NSOperationQueue alloc ] init ]; For this post let suppose you are making a queue to handle all Http request in your application. So i want to create a queue in Handl...
Post a Comment
Read more

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