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

Constant Weds Literals Venue Objective C

Arrangement: While working on a application you may have used some predefined values. The visibility of these values can be application level, feature level or class level. For the  convenience  we give name to these values and then use in the application. In this case the name given by you only representing the single value and it never change to represent some other value thats why it is called Constant. On the other hand variables are like us doing jobs in IT World and can switch from one organization( value ) to other. Like while choosing a partner for marriage you may choose best for you by seeing multiple persons and still after sometime you feel stuck. Same may happen you choose a best option to declare a constant and after sometime this constant can create a issue for you in code due to its scope or any other reason. On the other hand you may have a fixed mind that you always declare a constant in a same way in any situation like a love ma...
Post a Comment
Read more

Best Practices in iOS with Objective - C

In this post i am making collection of points which i read from some other post or some documentation. Today we will learn what are good or bad habits while doing programming in objective - c. 1) Instance Type and id I noticed one day that in iOS SDK init method of class has  instancetype  as a return value. I am curious to know about this thing and why this type not id. So what i found is following: Example: - ( instancetype )initWithProximityUUID:( NSUUID *)proximityUUID identifier:( NSString *)identifier What is instancetype? Suppose you are writing a method for object initialisation and according to objective c coding convention you need to return the object of same class from the method. So you can use instance type as a return type of method. Instance Type -  It represents the instance of the class or subclass of the class in which you are writing the method with return type instancetype. Confusing ? Let suppose i have declare a class empl...
Post a Comment
Read more