This guide explains how to use an Image object in a project.
What is Image ?
An Image object displays a picture inside of a given rectangle area of the image object. The display of aspect ratio, positioning of the picture might vary inside the image object. Image component can easily display local (depending on the screen size) and remote images. See also: SMF.UI.Image in the docs.
If it is added to a Page, it will be shown like below:
An Image object displays a picture with different image size property. If the displayed image is constrained with some proportions, it will be shown like below.
Supported Image Formats
Android and iOS supported different type of image formats. That’s why Smartface accepts .JPEG, .PNG and .BMP and .TIFF file formats only.
You can put these types of images into assets folder. Resource folders only supports .PNG type images.
Setting Correct Image
Android : For different screen sizes, the local image file is set to the resource drawable folder according to its screen size. The drawable folders can be found images/android directory.
iOS : There is only one resource folder on iOS devices. Different size of image file names ends with “@” prefix.
Setting From SMF.Bitmap Object
When an Image object is created, the constructor requires the URL of the image. Instead of the imageURI property, a file reference also can be set by using the file property in the constructor.
After creating the image, the file property can be retreived once the image has been successfully loaded.
Setting From Camera
Capturing a photo by the device camera is also possible with an application written in the Smartface. The captured photos with the camera will be saved under the “Camera” sub directory of applicationTemporaryData.
An Image object can display a remote image via URL of this image.
Nine Patch Support
The 9-Patch is a PNG image with some coding added that allows the Android system to determine how the image can be stretched and contorted to meet the specific layout constraints during use. It does this by taking a predefined PNG image, and allowing the user to define a 1-pixel border around the image in locations where stretching can occur. You can simply add 9-patch image to image or imagebutton objects.
Remote images supports also 9-patch format (.9.png) on Android and iOS. To make sure that your NinePatch graphics scale down properly, verify that any stretchable regions are at least 2×2 pixels in size. Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the color at the boundaries to change.
Note: A normal PNG file (*.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved NinePatch file (*.9.png) will be loaded as-is, with no drawing area added, because it already exists.
The Image object can be bounded to a data source with different ways. These are;
- static image
- remote image