Images likely make up a significant portion of your app. Some quick points to note:
Dynamic images require a composition with the layer called ImageNode.
The ImageNode layer is typically a solid, but can also be a static asset, such as PNG or JPG.
The color of the solid typically does not matter because it is replaced by a dynamic image.
The composition is of type Image, with a class of
Store the images in
If a layer is over a button or list, by default it intercepts the touch input. You can control whether or not the touch input can “go through” the layer with the Event property. See Layer Properties.
Another important aspect of images is the n-patch image, which are images that have been reduced to the smallest possible size.
Store the images in
See below for a fuller description of n-patch images.
N-patch images are compact PNG files that can be scaled without causing distortion or loss of quality. The biggest advantage of n-patch images is that they save memory. For example, instead of using multiple images for a border, you can use one n-patch and stretch it to fit different situations.
The You.i C++ n-patch images are an extension of NinePatch images. Some of the differences between n-patch and NinePatch are:
To Make an N-Patch Image:
The following animation illustrates how to create an n-patch image using draw9patch software available with Android Studio:
The following diagram illustrates an original .png file scaled without using N-patch:
As n-patch images are raster images, they are rendered to a pixel grid. The illustration below shows the stretchable area delineated in an n-patch, and how an n-patch is drawn against the pixel grid. Note the pixel rendering of corners.
To implement n-patch images, ensure you meet the following requirements:
Retain a 1-pixel space around the n-patch image.
Draw straight 1-pixel black lines around the edge of the image.
You.i Platform only recognizes scaling markers placed at the top and left sides of an n-patch. Any other markers on the n-patch image will not be recognized when your image is scaled up.
Save versions of the n-patch image for each required dpi.
Do the following:
.9.pngfile into the assets folder of the After Effects project you are working on.
N-patch images may look stretched in After Effects, but they present correctly in the Preview tool.
Following are some of the limitations of n-patch images:
Consider the following for images on You.i Roku Cloud:
ImageNodeand won’t display any image when the
ImageNodelayer is a solid.