Cover/Contain Image Scaling

This demo shows how to display images with cover and contain scaling.

The debugging flag of the ImageScaleView is set to true so you can see the view bounds.

import ui.ImageScaleView;
import ui.View as View;
import ui.TextView as TextView;

exports = Class(GC.Application, function () {
	this.initUI = function () {
		this.style.layout = 'linear';
		this.style.direction = 'vertical';
		this.style.justifyContent = 'space-outside';

		var isv = new ui.ImageScaleView({
			superview: this,
			scaleMethod: 'cover',
			layout: 'box',
			layoutWidth: '80%',
			layoutHeight: '50%',
			debug: true,
			centerX: true
		});

first row of buttons: kitten switcher; cover/contain

		var middleView = new View({
			superview: this,
			layout: 'linear',
			direction: 'horizontal',
			justifyContent: 'space-outside',
			layoutHeight: '20%'
		});

kitty image (tall/short)

		var isTall = true;
		var kittyImage = new TextView({
			superview: middleView,
			layout: 'box',
			layoutWidth: '40%',
			backgroundColor: 'red',
			wrap: true
		});
		var updateKittyImage = function() {
			isTall = !isTall;
			var cur = isTall ? 'tall' : 'short';
			var next = isTall ? 'short' : 'tall';
			isv.setImage('resources/images/' + cur + '.jpg');
			kittyImage.setText('current: ' + cur + ', next: ' + next);
		};
		kittyImage.on('InputSelect', updateKittyImage);

cover/contain

		var isContain = false;
		var coverContain = new TextView({
			superview: middleView,
			layout: 'box',
			layoutWidth: '40%',
			backgroundColor: 'red',
			wrap: true
		});
		var updateCoverContain = function() {
			isContain = !isContain;
			var cur = isContain ? 'contain' : 'cover';
			var next = isContain ? 'cover' : 'contain';
			isv.updateOpts({
				scaleMethod: cur
			});
			coverContain.setText('current: ' + cur + ', next: ' + next);
		};
		coverContain.on('InputSelect', updateCoverContain);

second row of buttons: horizontal and vertical alignment

		var bottomView = new View({
			superview: this,
			layout: 'linear',
			direction: 'horizontal',
			justifyContent: 'space-outside',
			layoutHeight: '20%'
		});

horizontal alignment

		var halignments = ['left', 'center', 'right'];
		var halignIndex = 0;
		var getHAlign = function() {
			var newHA = halignments[halignIndex];
			halignIndex = (halignIndex + 1) % 3;
			return newHA;
		};
		var horizontalAlign = new TextView({
			superview: bottomView,
			layout: 'box',
			layoutWidth: '40%',
			backgroundColor: 'red',
			wrap: true
		});
		var updateHAlign = function() {
			var cur = getHAlign();
			var next = halignments[halignIndex];
			isv.updateOpts({
				horizontalAlign: cur
			});
			horizontalAlign.setText('current: ' + cur + ', next: ' + next);
		};
		horizontalAlign.on('InputSelect', updateHAlign);

vertical alignment

		var valignments = ['top', 'middle', 'bottom'];
		var valignIndex = 0;
		var getVAlign = function() {
			var newVA = valignments[valignIndex];
			valignIndex = (valignIndex + 1) % 3;
			return newVA;
		};
		var verticalAlign = new TextView({
			superview: bottomView,
			layout: 'box',
			layoutWidth: '40%',
			backgroundColor: 'red',
			wrap: true
		});
		var updateVAlign = function() {
			var cur = getVAlign();
			var next = valignments[valignIndex];
			isv.updateOpts({
				verticalAlign: cur
			});
			verticalAlign.setText('current: ' + cur + ', next: ' + next);
		};
		verticalAlign.on('InputSelect', updateVAlign);

update all properties

		updateKittyImage();
		updateCoverContain();
		updateHAlign();
		updateVAlign();
	};
});

Run this code as the Application.js file in your project, and you should see something like this in the simulator: cover/contain screenshot