ImageView

API Reference: UI.ImageView

ImageView is simply an image container where UI.Image is displayed inside.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myImageView: ImageView;
myImage: Image;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myImage = Image.createFromFile("images://smartface.png")
this.myImageView = new ImageView({
image: this.myImage
});
this.addChild(this.myImageView, "myImageView", ".sf-imageView", {
left: 0,
width: 300,
height: 400
});
}
JavaScript
const Page = require("nf-core/ui/page");
const extend = require("js-base/core/extend");
const Image = require('nf-core/ui/image');
const ImageView = require('nf-core/ui/imageview');
const FlexLayout = require('nf-core/ui/flexlayout');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
this.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myImage = Image.createFromFile("images://nativeface.png")
var myImageView = new ImageView({
image: myImage,
left: 0,
width: 300,
height: 400
});
this.layout.addChild(myImageView);
}
);
module.exports = Page1;

How to make a rounded imageView?

To show a rounded image on imageView, you cannot use a directly borderRadius property of imageView on Android. Because Android doesn't round the corners of an image depending on the value of imageView borderRadius.

You can create rounded image sf-core 2.0.10 version and above.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myImageView: ImageView;
myImage: Image;
borderRadius: number = 50;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
let { borderRadius } = this;
this.myFlexLayout = new FlexLayout();
this.myImage = Image.createFromFile("images://imageview.png");
this.myImage = this.myImage.android.round(borderRadius);
this.myImageView = new ImageView({
image: this.myImage
});
this.layout.addChild(this.myFlexLayout, "myFlexLayout", ".sf-flexLayout", {
width: 100,
height: 100,
borderRadius: borderRadius,
borderWidth: 3
});
this.myFlexLayout.addChild(this.myImageView, "myImageView", ".sf-imageView", {
flexGrow: 1,
imageFillType: "STRETCH"
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Image = require('sf-core/ui/image');
const ImageView = require('sf-core/ui/imageview');
const FlexLayout = require('sf-core/ui/flexlayout');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var borderRadius = 50;
var myFlexLayout = new FlexLayout({
width: 100,
height: 100,
borderRadius: borderRadius,
borderWidth: 3
});
var myImage = Image.createFromFile("images://imageview.png");
myImage = myImage.android.round(borderRadius);
var myImageView = new ImageView({
image: myImage,
flexGrow: 1,
imageFillType: ImageView.FillType.STRETCH
});
myFlexLayout.addChild(myImageView);
this.layout.addChild(myFlexLayout);
}
);
module.exports = Page1;

Success & Failure Events Of LoadFromUrl

It is possible to retrieve an image from a remote source and use it within an ImageView. Success and failure events are provided when retrieving the image.

Checking Success & Failure on iOS

Android onSuccess and onFailure fire events are async when sending displaying image at a time. But synch when retrieving from cache. iOS always fire events async.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
import ListView = require('sf-core/ui/listview');
import ListViewItem = require('sf-core/ui/listviewitem');
import Label = require('sf-core/ui/label');
import addChild from "@smartface/contx/lib/smartface/action/addChild";
import System = require('sf-core/device/system');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myDataSet: String[] = this.pushDataToArray(500);
index: number = 0;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
pushDataToArray(count: number): String[] {
let myDataSet = [];
for (let i = 0; i < count; i++) {
if (i % 5 == 0) {
myDataSet.push('fail');
} else {
myDataSet.push(`https://picsum.photos/400/100?image=${i}`);
}
}
return myDataSet;
};
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
const { myDataSet } = this;
this.myListView = new ListView({
itemCount: myDataSet.length
});
this.layout.addChild(this.myListView, "myListView", ".sf-listView", {
height: null,
width: null,
flexGrow: 1,
rowHeight: 100
});
this.myListView.onRowCreate = (): ListViewItem => {
let myListViewItem = new ListViewItem();
this.myListView.dispatch(addChild(`listViewItem${++this.index}`, myListViewItem));
let myImageView = new ImageView();
myImageView.imageFillType = ImageView.FillType.ASPECTFIT;
//@ts-ignore
myListViewItem.addChild(myImageView, "myImageView", ".sf-imageView", {
flexGrow: 1,
marginTop: 10,
marginBottom: 10,
marginLeft: 50,
marginRight: 50,
imageFillType: "ASPECTFIT"
});
let myLabel = new Label();
//@ts-ignore
myListViewItem.addChild(myLabel, "myLabel", ".sf-label", {
flexGrow: 1
});
//@ts-ignore
myListViewItem.myImageView = myImageView;
//@ts-ignore
myListViewItem.myLabel = myLabel;
return myListViewItem;
};
let placeholder = Image.createFromFile("images://imageview_off.png");
let errorImage = Image.createFromFile("images://imageview.png");
this.myListView.onRowBind = (listViewItem: ListViewItem, index: number) => {
//@ts-ignore
const { myImageView, myLabel } = listViewItem;
myImageView.image = undefined;
myLabel.text = "";
myImageView.loadFromUrl({
url: myDataSet[index],
placeholder,
onSuccess: (): void => {
let foundListViewItem = System.OS == "iOS" ? this.myListView.listViewItemByIndex(index) : listViewItem;
if (foundListViewItem)
foundListViewItem.myLabel.text = "Success : " + index;
},
onFailure: (error: any): void => {
let foundListViewItem = System.OS == "iOS" ? this.myListView.listViewItemByIndex(index) : listViewItem;
if (foundListViewItem) {
foundListViewItem.myLabel.text = "Error : " + index;
foundListViewItem.myImageView.image = errorImage;
}
}
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
paddingTop: 0,
paddingLeft: 0,
paddingBottom: 0,
paddingRight: 0,
}
});
};
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const ListView = require('sf-core/ui/listview');
const ListViewItem = require('sf-core/ui/listviewitem');
const ImageView = require('sf-core/ui/imageview');
const Image = require('sf-core/ui/image');
const Label = require('sf-core/ui/label');
const System = require('sf-core/device/system');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
var myDataSet = [];
for (var i = 0; i < 500; i++) {
if (i%5 == 0) {
myDataSet.push('fail');
}else{
myDataSet.push(`https://picsum.photos/400/100?image=${i}`);
}
}
var myListView = new ListView({
flexGrow : 1,
rowHeight: 100,
itemCount: myDataSet.length,
});
this.layout.addChild(myListView);
myListView.onRowCreate = function() {
var myListViewItem = new ListViewItem();
var myImageView = new ImageView({
flexGrow:1,
marginTop: 10,
marginBottom: 10,
marginLeft: 50,
marginRight: 50
});
myImageView.imageFillType = ImageView.FillType.ASPECTFIT;
myListViewItem.addChild(myImageView);
myListViewItem.myImageView = myImageView;
var label = new Label();
label.flexGrow = 1;
myListViewItem.label = label;
myListViewItem.addChild(label);
return myListViewItem;
};
var placeholder = Image.createFromFile("images://imageview_off.png");
var errorImage = Image.createFromFile("images://imageview.png");
myListView.onRowBind = function(listViewItem, index) {
var imageview = listViewItem.myImageView;
imageview.image = undefined;
listViewItem.label.text = "";
imageview.loadFromUrl({
url: myDataSet[index],
placeholder: placeholder,
onSuccess: function(innerIndex,innerListviewItem){
var innerListviewItem = System.OS == "iOS" ? this.listViewItemByIndex(innerIndex) : innerListviewItem;
if (innerListviewItem) {
innerListviewItem.label.text = "Success : " + innerIndex;
}
}.bind(myListView,index,listViewItem),
onFailure: function(innerIndex,innerListviewItem,error){
var innerListviewItem = System.OS == "iOS" ? this.listViewItemByIndex(innerIndex) : innerListviewItem;
if (innerListviewItem) {
innerListviewItem.label.text = "Error : " + innerIndex;
innerListviewItem.myImageView.image = errorImage;
}
}.bind(myListView,index,listViewItem)
});
};
}
);
module.exports = Page1;

ImageView With Tint Color

Changes the color of all the non-transparent pixels to the tintColor.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
import System = require('sf-core/device/system');
import Color = require('sf-core/ui/color');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
let image = Image.createFromFile("images://smartface.png");
if (System.OS == 'iOS')
image = image.ios.imageWithRenderingMode(Image.iOS.RenderingMode.TEMPLATE);
this.imageView = new ImageView({
image,
tintColor: Color.RED
});
this.layout.addChild(this.imageView, "imageView", ".sf-imageView", {
height: null,
width: null,
flexGrow: 1
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
},
onLoad: function() {
const ImageView = require('sf-core/ui/imageview');
const Image = require('sf-core/ui/image');
const Color = require('sf-core/ui/color');
const System = require('sf-core/device/system');
var page = this;
var image = Image.createFromFile("images://smartface.png");
if (System.OS == 'iOS') {
image = image.ios.imageWithRenderingMode(Image.iOS.RenderingMode.TEMPLATE);
}
var imageView = new ImageView();
imageView.flexGrow = 1;
imageView.tintColor = Color.RED;
imageView.image = image;
page.layout.addChild(imageView);
}
});
}
);
module.exports = Page1;

RTL Image

When a UI is changed from LTR to RTL (or vice-versa), it’s often called mirroring. When a UI changes from one direction to another, direction of image changes automatically related to system or application direction.

Only on iOS

On iOS flipsForRightToLeftLayoutDirection also changes direction of image.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
import System = require('sf-core/device/system');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myFlexLayout: FlexLayout;
image: Image;
imageView: ImageView;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.image = Image.createFromFile("images://smartface.png");
this.image.autoMirrored = true;
if (System.OS == 'iOS')
this.image = this.image.ios.imageWithRenderingMode(Image.iOS.RenderingMode.TEMPLATE);
this.myFlexLayout = new FlexLayout({
width: 200,
height: 100
});
this.imageView = new ImageView({
image: this.image
});
this.layout.addChild(this.myFlexLayout, "myFlexLayout", ".sf-flexLayout", {
width: 200,
height: 100
});
this.myFlexLayout.addChild(this.imageView, "imageView", ".sf-imageView", {
flexGrow: 1,
imageFillType: "STRETCH"
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Image = require('sf-core/ui/image');
const ImageView = require('sf-core/ui/imageview');
const FlexLayout = require('sf-core/ui/flexlayout');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myFlexLayout = new FlexLayout({
width: 200,
height: 100,
});
var myImage = Image.createFromFile("images://smartface.png");
myImage.autoMirrored = true;
var myImageView = new ImageView({
image: myImage,
flexGrow: 1,
imageFillType: ImageView.FillType.STRETCH
});
myFlexLayout.addChild(myImageView);
this.layout.addChild(myFlexLayout);
}
);
module.exports = Page1;