Sunday, September 28, 2014

iOS Window Coordinate System

As part of the project, i had to place a which is added on top of Window to be scrolled up as the keyboard scrolls up. 

Understanding the Window coordinate system is important for this. 

The main concept is, the window orientation defined only in Portrait mode. All other orientations, the coordinates are defined w.r.to portrait orientation. 

When the keyboard appears, in various orientations, the value of the keyboard rectangle is as below 

Note that the Orientation values are like below in iOS. The values are given w.r.to the home key and hence may generate a bit of confusion, but it is all goo once see the picture below.




Portrait : keyboardRect is :(0.000000,760.000000,768.000000,264.000000)
This is easy to understand. Because keyboard left x is 0, and y is 760 from the top left of the window. and the width is device screen, height of the keyboard is 264. 

Landscape left: keyboardRect is :(416.000000,0.000000,352.000000,1024.000000)
This orientation is when device is rotated once to the right, i.e. home key appears on the left. in this case, the 0,0 is on the top right of the device and hence the x is 415 and y is 0. width is 352 and height becomes 1024

Upside Down: keyboardRect is :(0.000000,0.000000,768.000000,264.000000)
When the device is upside down, the 0,0 point is bottom right of the device. and hence the x becomes 0,0 and width becomes 768 and height becomes 264. 

Landscape Right:keyboardRect is :(0.000000,0.000000,352.000000,1024.000000)
When the device is in this orientation, the 0,0 coord is at bottom left of the device. the width becomes 352, and the height becomes 1024

a general note from this is, if the height is greater than width, then the device is in landscape orientation, and if the height is less than width, then it is in portrait orientation. 


the view centre on various orientations were 

Portriat: panel center is :(384.000000,512.000000)
Landscape Left : panel center is :(512.000000,384.000000)
Upside Down: panel center is :(384.000000,512.000000)
Landscape Right:  panel center is :(512.000000,384.000000)

Basically, the panel was put on the centre. 

Now the panel has a text field at the bottom. when the keyboard comes up, need to move the panel up so that the text field is visible. 

It is interesting to note that the easiest way to interact with a view adjusting its y position is to change the center. 


Once compute the amount that overlaps the keyboard with the view, we can just set that height to the amount to be movable.  



No comments:

Post a Comment