skip to Main Content

Currently I am working on an iPhone application. I find some difficulties in fixing the UI layouts.

Is there a tool thats measures the pixels given in my application? Something like a ruler in Microsoft Word or Photoshop around my application which allows me to find the measurements in my app.

Thanks

2

Answers


  1. Screen height and width macros:

    #define SCREEN_WIDTH ((([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) || ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortraitUpsideDown)) ? [[UIScreen mainScreen] bounds].size.width : [[UIScreen mainScreen] bounds].size.height)
    
    #define SCREEN_HEIGHT ((([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) || ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortraitUpsideDown)) ? [[UIScreen mainScreen] bounds].size.height : [[UIScreen mainScreen] bounds].size.width)
    

    these macros give SCREEN_HEIGHT and SCREEN_WIDTH whenever you use them for the current Iphone or Ipad device

    If you want the scale then you can check the scale like so:

    [UIScreen mainScreen].scale;
    

    Point coordinates multiplied by screen scale = Pixel size, so for an Iphone 6+ this is how this would work:

    SCREEN_WIDTH * 3 = Pixel width
    SCREEN_HEIGHT * 3 = Pixel height
    
    Login or Signup to reply.
  2. If I understand correctly, you’r looking for a way to better understand the current (and desired) positions of the UI elements in InterfaceBuilder (whether you’re working with xib files or storyboards).

    If that’s the case, there are two things you need to know:

    1. If you select any object on the screen and press the ALT key then drag the mouse cursor (without pressing the mouse button), you’ll see the distance between that element and any other element that you’re interested in (the one your cursor is currently pointing to). This makes the positioning of elements on the screen very straight forward and is relatively similar to the rulers you described.

    2. In addition to the previous tool, you have the Size Inspector tab on the top right corner of InterfaceBuilder, in which you can see the sizes and positions (in points, not pixels) of the current element you’re editing. The display of this tab changes whether you’re using auto-layout or autoresizing masks.

    enter image description here

    I hope this helps. Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search