Difference permissions devices. Developer Tips
How to save time and resources by developing an application, hoping to cover as many devices as possible? With the current number of devices one of the main issues is resolution.
Disclaimer coming from comments:
I work with third-party development environments that span multiple platforms. In general, an article for the same as me.
HOW-I-DO-BEFORE (or HOW-NOT-NEED-DO)
First thoughts: "I will make it work for the iPhone, and then I will redo it for the iPad."
Did work. Now you need to redo the iPad. We come up with a percentage of the ratios of the sides of the device. Width 960 to 1024 - a ratio of 1.067. Height - 640 to 768 - a ratio of 1.2. And all that remains is to multiply the coordinates of all the GUI by these numbers. That's all!
')
But there is one BUT! GUI elements in the application of more than a dozen. And now to each in the code you need to add a variable ratio. And the size !!! It is necessary to redraw all sizes of buttons and windows! Because otherwise they magically climb on each other or form unnecessary holes. The text, that and at all is displayed at all where it is necessary. Generally…
... Council first and foremost
Forget about the percentage of coordinates! If everything is correctly taken into account from the very beginning, then neither programming nor graphics will take absolutely no time. As a result, you will have a full-fledged product, ready to work on any resolution.
Second tip
When planning a GUI, use the edges of the screen. Push off of them. DeviceWidth, DeviceHeight, someimage.Width and someimage.Height are your best friends in this matter.
Using these 4 parameters, you can write code for almost any resolution.
How I selected the coordinates of the GUI elements.
Calculations need to start with the smallest resolution for which the application is designed. Let us assume that the images have the origin of coordinates in the upper left corner.
At the top of the Y-coordinate is always equal to 0. We start on the right.
Figure 1. Place the GUI elements from the top right corner.
Now left, it's easier here.
Figure 2. Place the GUI elements from the upper left corner.
As a result, we get the distance S. Which will stretch depending on the width of the screen. The “left” GUI elements will remain magnetised to the left of the screen, the “right” ones to the right.
Figure 3. Distance S, which will increase with increasing screen width.
For completeness, I'll show the bottom GUI elements. With the X-coordinate everything is the same, for Y we use the height of the screen and the height of the images (DeviceHeight and image.Height).
Figure 4. Lower GUI elements.
And the last tip for background images
The background image must be initially drawn so that its edges are a beautiful addition, and not an important element. Then they can always be hidden behind the screen without losing the necessary information. In this case, one picture is suitable for all (or almost all) permissions.
Figure 5. Unimportant areas of the picture.
Naturally, you need to place background images in the very center, taking into account that the center of coordinates of the image is in its middle.
The center of the screen is easily obtained from DeviceWidth / 2, DeviceHeight / 2.
Instead of conclusion
Following these simple rules, I now start projects with ease, knowing that I will be fine with permission.
Of course, this is not a complete list of all the nuances. I tried to uncover the main essence, which, I hope, make your life easier. Therefore, in the comments I would like to hear the advice of the guru and the nuances of your personal experience.
UPD:
Does not work for retina. Unfortunately for her to draw a separate schedule 2 times more.
In other words, this article helps save resources for similar permissions. For iOS application developers, there should be 3 types of graphics for iPad 3. 1 - for the non-retina of the iPhone, 2 - for the retina of the iPhone + iPad no retina, 3 - for the retina of the iPad.
I will be glad to comments!
Disclaimer coming from comments:
I work with third-party development environments that span multiple platforms. In general, an article for the same as me.
HOW-I-DO-BEFORE (or HOW-NOT-NEED-DO)
First thoughts: "I will make it work for the iPhone, and then I will redo it for the iPad."
Did work. Now you need to redo the iPad. We come up with a percentage of the ratios of the sides of the device. Width 960 to 1024 - a ratio of 1.067. Height - 640 to 768 - a ratio of 1.2. And all that remains is to multiply the coordinates of all the GUI by these numbers. That's all!
')
But there is one BUT! GUI elements in the application of more than a dozen. And now to each in the code you need to add a variable ratio. And the size !!! It is necessary to redraw all sizes of buttons and windows! Because otherwise they magically climb on each other or form unnecessary holes. The text, that and at all is displayed at all where it is necessary. Generally…
... Council first and foremost
Forget about the percentage of coordinates! If everything is correctly taken into account from the very beginning, then neither programming nor graphics will take absolutely no time. As a result, you will have a full-fledged product, ready to work on any resolution.
Second tip
When planning a GUI, use the edges of the screen. Push off of them. DeviceWidth, DeviceHeight, someimage.Width and someimage.Height are your best friends in this matter.
Using these 4 parameters, you can write code for almost any resolution.
How I selected the coordinates of the GUI elements.
Calculations need to start with the smallest resolution for which the application is designed. Let us assume that the images have the origin of coordinates in the upper left corner.
At the top of the Y-coordinate is always equal to 0. We start on the right.
Figure 1. Place the GUI elements from the top right corner.
Now left, it's easier here.
Figure 2. Place the GUI elements from the upper left corner.
As a result, we get the distance S. Which will stretch depending on the width of the screen. The “left” GUI elements will remain magnetised to the left of the screen, the “right” ones to the right.
Figure 3. Distance S, which will increase with increasing screen width.
For completeness, I'll show the bottom GUI elements. With the X-coordinate everything is the same, for Y we use the height of the screen and the height of the images (DeviceHeight and image.Height).
Figure 4. Lower GUI elements.
And the last tip for background images
The background image must be initially drawn so that its edges are a beautiful addition, and not an important element. Then they can always be hidden behind the screen without losing the necessary information. In this case, one picture is suitable for all (or almost all) permissions.
Figure 5. Unimportant areas of the picture.
Naturally, you need to place background images in the very center, taking into account that the center of coordinates of the image is in its middle.
The center of the screen is easily obtained from DeviceWidth / 2, DeviceHeight / 2.
Instead of conclusion
Following these simple rules, I now start projects with ease, knowing that I will be fine with permission.
Of course, this is not a complete list of all the nuances. I tried to uncover the main essence, which, I hope, make your life easier. Therefore, in the comments I would like to hear the advice of the guru and the nuances of your personal experience.
UPD:
Does not work for retina. Unfortunately for her to draw a separate schedule 2 times more.
In other words, this article helps save resources for similar permissions. For iOS application developers, there should be 3 types of graphics for iPad 3. 1 - for the non-retina of the iPhone, 2 - for the retina of the iPhone + iPad no retina, 3 - for the retina of the iPad.
I will be glad to comments!
Source: https://habr.com/ru/post/140353/
All Articles