Skip to content

Titanium native ImageView module that extends the default Titanium ImageView with more capabilities and a different caching system.

License

Notifications You must be signed in to change notification settings

AndreaVitale/av.imageview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

av.imageview

An optimized ImageView module
for Axway Appcelerator Titanium Framework

Features

Currently Titanium.UI.ImageView doesn't support the contentMode property so your rendered image will everytime fit your ImageView. The main feature of this module is contentMode handling that allows you to specify which behavior your ImageView must have and, in addition, the module adds some extra features like image caching and placeholder-fallback images.

Here is an example of two mainly supported content modes: CONTENT_MODE_ASPECT_FIT and CONTENT_MODE_ASPECT_FILL.

         

All other macro-features can be grouped in the following list:

  • ContentModes handling
  • Loading image placeholder
  • Broken link image fallback
  • Custom HTTP header, useful if the images are protected
  • WebP support
  • GIF support

Installation

Pick the latest version of the module from here and unzip it inside your application module folder or install it automatically via gitt.io

$ gittio install av.imageview

In your application's tiapp.xml the av.imageview module is declared as follows:

<modules>
    <module platform="iphone">av.imageview</module>
    <module platform="android">av.imageview</module>
</modules>

and you're ready to use it.

API

All Titanium.UI.View properties and methods are supported.

Property Description iOS Android Note
contentMode Sets the ImageView content mode Supported content modes are listed in a next section.
defaultImage Image to display when the image download is in progress Must refers to a local image ; Android must be set before assigning an image (e.g. at creation)
brokenLinkImage Image to display when the image fetch goes in error Must refers to a local image; Android must be set before assigning an image (e.g. at creation)
loadingIndicator Enable or disable the activity indicator when the download is in progress true by default
loadingIndicatorColor Changes the loading indicator color
requestHeaders An object used to define extra http request header fields
timeout Sets timeout for requests, in milliseconds
handleCookies Enables cookie handling for remote images
shouldCacheImagesInMemory Activates in-memory cache mechanism true by default
avoidDecodeImage Disable image decompression 🚫 false by default
maxCacheAge The maximum length of time to keep an image in the cache, in seconds 🚫 integer value
maxCacheSize The maximum size of the cache, in bytes 🚫 integer value
rounded Renders the image in a circle 🚫 Use with CONTENT_MODE_ASPECT_FIT for a correct rendering
animated Disables the fade-in animation 🚫
signature Sets a custom caching signature (Glide documentation) 🚫 string value

Events

  • load an event that is fired when an image was correctly loaded
    • image as a string if a remote or local url was given or as a blob otherwise
  • error an event that is fired when the image fetch goes in error
    • image as a string if a remote or local url was given or as a blob otherwise
    • reason contains the reason why the image fetch goes in error

Supported content modes

Here is a list of supported content modes:

Android and iOS

  • CONTENT_MODE_ASPECT_FIT
  • CONTENT_MODE_ASPECT_FILL

iOS only

  • CONTENT_MODE_SCALE_TO_FIT
  • CONTENT_MODE_REDRAW
  • CONTENT_MODE_CENTER
  • CONTENT_MODE_TOP
  • CONTENT_MODE_BOTTOM
  • CONTENT_MODE_LEFT
  • CONTENT_MODE_RIGHT
  • CONTENT_MODE_TOP_LEFT
  • CONTENT_MODE_TOP_RIGHT
  • CONTENT_MODE_BOTTOM_LEFT
  • CONTENT_MODE_BOTTOM_RIGHT

Usage

You can simply use this module by declaring an ImageView in your controller.xml file as follows:

    <ImageView id="Photo" module="av.imageview" />

and style it by using the related controller.tss file:

    "#Photo": {
        width: Ti.UI.FILL,
        height: 200,
        contentMode: Alloy.Globals.CONTENT_MODE_FILL,
        loadingIndicatorColor: "red"
    }

and of course expose as a global variable your desired CONTENT_MODE inside Alloy.Globals namespace.

ListView ItemTemplate

Using the module in a ListItemTemplate is a bit difference because custom module proxies cannot be directly used inside of it.

    <ItemTemplate>
        <ImageView ns="AvImageview" />
    </ItemTemplate>

where AvImageview is a variable declared in alloy.js like as follows:

    const AvImageview = require("av.imageview");
    global.AvImageview = AvImageview;
    
    //and to use contentmodes constants via alloy
    Alloy.Globals.CONTENT_MODE_FIT = AvImageview.CONTENT_MODE_ASPECT_FIT;
    Alloy.Globals.CONTENT_MODE_FILL = AvImageview.CONTENT_MODE_ASPECT_FILL;

    //If you need to access to protected images you can define which request header fields the module has to use for every request
    Alloy.Globals.REQUEST_HEADERS = {
        'Authorization': 'place or assign dinamically your logged user access token',
        'Another HTTP header field': 'with its value'
    };

A complete example can be:

    <ListView id="Images" defaultItemTemplate="template">
        <Templates>
            <ItemTemplate name="template" height="160">
                <ImageView ns="AvImageview" bindId="photo" height="160" width="Ti.UI.FILL" loadingIndicator="true" contentMode="Alloy.Globals.CONTENT_MODE_FILL" requestHeader="Alloy.Globals.REQUEST_HEADERS" />
            </ItemTemplate>
        </Templates>
        <ListSection>
            <ListItem template="template" photo:image="http://www.nationalgeographic.com/content/dam/photography/photos/000/060/6018.ngsversion.1467254523217.adapt.1900.1.jpg"></ListItem>
            <ListItem template="template" photo:image="http://www.italiangoodnews.com/wp-content/uploads/2014/11/italy-04.jpg"></ListItem>
            <ListItem template="template" photo:image="https://walkingtree.org/wp-content/uploads/2015/09/Elia-Locardi-Whispers-From-The-Past-The-Colosseum-Rome-Italy-1280-WM.jpg"></ListItem>
            <ListItem template="template" photo:image="http://wp-admin.goldenbird-italy.com/wp-content/uploads/2015/07/italy_2631046a.jpg"></ListItem>
            <ListItem template="template" photo:image="http://www.travelviaitaly.com/wp-content/uploads/2015/12/Rome-Italy.jpg"></ListItem>
        </ListSection>
    </ListView>

Do you want a more complete example? Look a the sample app.js.

Contributions

If you enjoy this module, feel free to contribute with your PR or donate :-)