At some point every mobile app uses images. Maybe to indicate a button or to show you some cute kitten pictures. Tabris.js supports images in a variety of ways, be it as background images, page icons or inside an ImageView. In this blog post we want to focus on the
ImageView as used in the image example.
Displaying an image in an ImageView
The simplest way to show an image is to pass a URL to the
image property of an
ImageView. The path can be local to your app or an absolute HTTP URL.
This gives you a nice
ImageView with the size of the image. But what if you want to indicate the size of the image yourself? In order to provide additional information we pass an object instead of the pure URL to the
image property. This image object has to have a property
src containing the path. We can also add additional properties like
By specifying a concrete size of the image we imply that the enclosing
ImageView has a size of 300×200.
That works nicely, but we also want to take care of scaling the image on higher resolution displays. Let’s assume we have a display with a density of 2x. To cover the designated area of 300×200 we would now provide an image with double the resolution (600×400). When using the bigger image we need to extend our
image object with the target density of the image. Therefore we add the
scale property to the image with a value of
Pro tip: To load the images in the right size for your devices density, use the
tabris.device.scaleFactor. Based on the
scaleFactor you can adjust your image path and only load images with fitting sizes.
So there are two ways to size an image: set the absolute size or base the size on the original resolution and a provided scale factor.
Setting an image with scaleMode
While these scenarios work fine for when you know the size and aspect ratio of images (like for icons) there are times when you want to have more control over arbitrary sizing inside an
ImageView. A good example would be an image gallery where you pull in random images (of kittens) of unknown size and aspect ratio. For such a scenario the
scaleMode property. The
scaleMode supports the following values:
|Don’t change the image size. The image size is handled as given by the |
|Resize the image to be fully visible inside the |
|Resize the image to cover the entire |
|Change the image to fully cover the |
|When the image is smaller than the |
The following picture shows how the
scaleMode affects an image that is smaller than the available space.
The next picture shows the affect of the
scaleMode when the image is larger than the available space.
Showing an image in a Tabris.js app is easy. To get started, simply provide the image URL. If you want absolute control over the size you can specify the image dimension directly, and if you want to be more responsive in regards to the display density, you can provide the
scale factor. Finally you can control the sizing of the image inside an
ImageView by specifying the
scaleMode. That’s all you need to know. 🙂
Check out the image example on your mobile device in the Tabris.js Developer App:
The Developer App is connected to the Scratchpad on the Tabris.js website so you can easily play with the code yourself.
Stay in the loop! Follow @tabrisjs on Twitter.
Here’s the list of “Tabris.js Examples” posts we’ve published so far: