A Nine-patch image in Flint serves the purpose of facilitating dynamic stretching and shrinking of an image during runtime. This specialized image is divided into a 3x3 grid, forming 9 distinct patches.
These patches enable the creation of a scalable image by repeating specific regions, resulting in 4 corners, 4 sides, and a central image.
The properties of each region are designated for optimal stretching:
Corner Regions (1, 3, 7, 9): These regions are fixed, ensuring that nothing inside them will tile, maintaining their original appearance.
Horizontal Sides (4, 6): The pixels in these regions will tile vertically when needed, allowing for dynamic vertical stretching.
Vertical Sides (2, 8): The pixels in these regions will tile horizontally when necessary, facilitating dynamic horizontal stretching.
Center (5): The pixels in this region will tile in both horizontal and vertical directions equally, offering comprehensive flexibility for dynamic scaling in both directions.
To create an EFX - Nine patch file, right click on images ->New -> Project. In the dialog, select Sparklet EFX option.
Let’s select an image from the list, edit the nine patch areas under the editor section.
In the preview section we can see the edited nine-patch image in different sizes by giving the width and height values.
In the image below , the word ‘Ok’ has a background that is a rounded rectangle with a black border and a grey background.The rectangle has been uniformly tiled to accommodate the longer text.
In essence, the Nine-patch image not only conserves resources but also preserves the curved shapes that may otherwise get distorted when using conventional PNG images for dynamic scaling.
Note : In the context of Flint/Sparklet, the tiling concept is implemented within the nine-patch framework. To achieve a smooth and optimal result, it is advisable to employ plain/ solid color images when creating a nine-patch image.
