|
|
|
|
|
|
|
|
|
|
- Overview
- Implementation
- How to?
- Remarks
Providing an image per DPI
On mobile, when displaying images, each device has its own physical size and its own graphic resolution. Let's take a look at the terms linked to the management of screens and images: - the screen size is expressed in pixels. The screen size corresponds to width and height of a screen in number of pixels.
- the graphic resolution of a screen is expressed in "dpi" (dots per inch) or in "ppi" (pixels per inch). It is the number of dots displayed per inch or the number of pixels per inch (an inch is equal to 2.54 cm). The higher this value is, the more precise the display will be.
The same image file, on 2 screens with the same physical size but with a different resolution, may be displayed in a different size. To avoid this, and to display the image with an identical size, the images are displayed in "stretched" mode. - For the high-definition screens, the displayed image may be pixelated.
- In the case of low-definition screens, it's the Reverse: if the image is too high-definition, reducing it may cause blurring..
To solve this problem, WINDEV Mobile proposes, for each image used in the application, to provide several image files, adapted to different DPI. At runtime, the image adapted to the resolution will be automatically selected. How to? To automatically manage the DPI of an image used in the application: - Create a set of images corresponding to the different DPI.
 5 DPI supported: 160, 240, 320, 480, 640.    3 DPI supported: 160, 320, 480.
- The name of these images must be formatted as follows:
ImageName@dpi99x.Extension
Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
The editor uses a DPI of 160. For example, for a "Logo.png" image, the set of images will be: - "Logo@dpi1x.png" for the DPI of 160. In Android, corresponds to mdpi.
- "Logo@dpi1_5x.png" for the DPI of 240. In Android, corresponds to hdpi.
- "Logo@dpi2x.png" for the DPI of 320. In Android, corresponds to xhdpi.
- "Logo@dpi3x.png" for the DPI of 480. In Android, corresponds to xxhdpi.
- "Logo@dpi4x.png" for the DPI of 640. In Android, corresponds to xxxhdpi.
- In the editor, in the control corresponding to the image file, select one of the files found in the set of images.
When creating the Android or iOS archive, WINDEV Mobile will automatically include all images supplied in the archive. Remarks - There is no need to provide an image for the 5 supported DPI. At runtime, the best suitable image regarding the DPI of the device screen will be automatically displayed.
- Pay special attention to the image formats supported by the platform used.
- For some images (splash screen, application icon, ...), the interface of the editor also proposes to select a file per resolution. In this case, the two methods can be used (selecting a file per resolution or selecting a single file in multi-dpi format).
- The image catalog automatically generates the necessary images. For more details, see Image catalog.
- The ".WDPIC" files with the "multi-dpi" option, generated by the image editor, are automatically managed: it is not necessary to generate the different images corresponding to the different DPIs..
Warning: If a file of type ".WDPIC" is to be programmatically assigned to a field, this file must first be added to the list of project elements..
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|