Tuesday 26 February 2013

iPhone-5 Optimization UI elements | UI Screens

Please follow the below steps : 1) First you add Default-568h@2x.png in your project having dimensions 640 px x 1136 px. It will automatically detects the iPhone-5 splash image. Please note that the image name should be exactly "Default-568h@2x.png". 2) Select your .xib file i) Select the view -> go to attribute inspector -> Simulated metrics -> Size (select the Retina 3.5 Full screen option) ii) On the same thing in attribute inspector -> View -> Autoresize subviews  (select this one) NOTE : These are the options for optimizing the iPhone-5 screens and rest of the iPhones (i.e < iPhone-5) If we select the Retina 3.5 Full screen it will auto-size the views who are having ( < iPhone 5), So we handle the iPhone-5 UI Screens via code.
// Constants 
// Keep these constants in prefix.pch file
#define kiPhone5Screen 4.0
#define kiPhoneScreen 3.5
#define kiPhone5Height 568
#define kiPhoneHeight 480
// Generic Functions
//Function declared in your Appdelegate files

// Function is to determine the screen height size

- (float) getScreenHeightSize{
   NSLog(@"Screen size height : %f",[[UIScreen mainScreen] bounds].size.height);
   if([[UIScreen mainScreen] bounds].size.height == kiPhone5Height)
        return kiPhone5Screen;

   return kiPhoneScreen;
}
// Function is to determine the CGRect frame
-(CGRect) getFrame:(CGRect)rect{
      CGRect frameSize = rect;
      float screenSize = [self getScreenHeightSize];
      if(screenSize == kiPhone5Screen) {
         float yCoord=rect.origin.y * 1.18333333333333;
         float height=rect.size.height * 1.18333333333333;
         rect.size.height=height;
         rect.origin.y=yCoord;
         frameSize=rect;
         NSLog(@"Rect Y: %f, Height: %f",rect.origin.y,rect.size.height);
         NSLog(@"frame Y:%f, Height : %f",frameSize.origin.y,frameSize.size.height);
         return frameSize;
        }
     return frameSize;
}
// Function is to determine the Center
- (CGPoint) getCenter : (CGPoint)xyPoint{
       CGPoint xy = xyPoint;
       float screenSize = [self getScreenHeightSize];
       if(screenSize == kiPhone5Screen) {
              int x = xyPoint.x;
              int y = xyPoint.y*1.18333333333333;
              xy = CGPointMake(x, y);
              return xy;
         }
       return xy;
} 
Now it's time to use the functions: 1) We have to find the screen size by using getScreenHeightSize function Now, in your appdelegate.m file, we call this function in didFinishLaunchingWithOptions ()
[self getScreenHeightSize];
2) Please note that any UI elements on .xib, set frame programmatically by using getFrame function Let's say I'm having UIImageview and UIButton on .xib
imageview.frame = [Appdelegate getFrame:CGRectMake(0, 0, 320, 460)];
btn.center = [Appdelegate getCenter:CGPointMake(160, 196)];
Now, it will automatically adjust the UI elements on all the iPhone's screens. Hope this works for you! :) Cheers!!

No comments:

Post a Comment