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

Shake Effect in iOS

Animation Animation always capture the user attention. We can use animation to update things on the screen.  For developer also animations fascinated things to learn and implement. Today we will try shake effect with Various  API. CABasicAnimation: Here we animate view's frame y coordinate from one position to another position. It is simple example of changing the position with respect to time. CABasic Animation is deal with the single keyframe.                                        y(t) = y 0 + t*d(y) You can use CABasic Animation if you have to play with single value. You need to move object from  one position to another without any intermediate steps. CABasicAnimation * shakeAnimation = [CABasicAnimation animationWithKeyPath: @ "position" ]; shakeAnimation . duration = 0.05 ; shakeAnimation . autoreverses = YES; shakeAnimation . repe...
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