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

What does enable bitcode do in Xcode

Background: Now days compilation process for any language is divided into two parts and same is applicable for objective c. Frontend Compiler (Clang) Backend Compiler (LLVM) Frontend Compiler (Clang):  Responsibility of front-end compiler is to take a source code and convert into intermediate representation (IR).  In case of clang it is LLVM IR.  Backend Compiler(LLVM):  Responsibility of backend compiler is to take a IR as input and convert into object code. LLVM input is bitstream of LLVM IR (Bitcode) and output is sequence of machine instruction(Object code). Each  cpu or processor has different set of  M achine   instruction, So  LLVM output is CPU dependent or it can be executed on specific CPU only.   There may be question in your mind that  1) What is the need to divide into these phases? 2) What is LLVM IR? Can we see the LLVM IR as Output? What is the need to divide into these phases? It is beneficial for both the programming language designer a
Post a Comment
Read more

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 Handler class
Post a Comment
Read more

Everything about BLE with iOS Part1 (Introduction)

In this article we will learn how to turn your iPhone to behave as peripheral (who has data to send) or central (who receive the data). What is BLE (Bluetooth Low energy device) ? Bluetooth LE is a wireless personal area network technology like its previous incarnation, Classic Bluetooth. It can be use to transfer and receiving of the data. What is difference between Classic and LE ? BLE has low power consumption and low data transfer rate. BLE can support large number of slaves. On the other hand Classic (3.0) support maximum 7 devices connectivity. Unique feature of BLE is advertising  functionality,  So other devices can scan,  connect and  receive data from the advertising BLE device. Other difference is in classic you need to pair the devices first for the communication. Terms: Peripheral:  It is device which advertise the service. In client-server architecture form we can say peripheral is server which has data to send to client. The basic difference i
Post a Comment
Read more