[TIMOB-6586] Android - Add support for repeating backgrounds on a view that is similar to background-repeat property in CSS

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-03-21T13:35:13.000+0000
Affected Version/s	n/a
Fix Version/s	Release 2.0.0, Sprint 2012-06
Components	Android
Labels	parity, qe-port
Reporter	Jeff Haynie
Assignee	Opie Cyrus
Created	2011-12-12T16:25:38.000+0000
Updated	2012-08-15T14:55:04.000+0000

Description

PROBLEM A customer wants to create titled backgrounds, so they look the same in any platform, and they don't have to generate different background images for each different platform. There is a screenshot showing the expected behavior. Additionally, you can see an example of code that will do the same effect, using insane amount of memory:

win = Ti.UI.createWindow();

var background = Ti.UI.createView();

var image1 = Ti.UI.createImageView({
 // use whatever image you have here
  image: 'appicon.png',
  height: 'auto',
  width: 'auto'
});
 
var width=image1.size.width;
var height=image1.size.height;

var deviceW= Titanium.Platform.displayCaps.platformWidth;
var deviceH= Titanium.Platform.displayCaps.platformHeight;

var repeatX = (deviceW % width) + 1; 
var repeatY = (deviceH % height) + 1; 


for(i=0;i<repeatX; i++)
	for(j=0;j<repeatY; j++){
		background.add(Ti.UI.createImageView({
			image: 'appicon.png',
			height: 'auto',
			width: 'auto',
			top:j*height, 
			left:i*width,
		}));
	}
	
win.add(background);
win.open();

Attachments

File	Date	Size
Screen shot 2011-12-12 at 4.37.25 PM.png	2011-12-12T16:43:49.000+0000	78567

Comments

Mauro Parra-Miranda 2011-12-12

Platform guys are telling me that this is a Ti API bug, so the original ticked will be discussed and then splited as two bugs, one for each platform. Best, Mauro
Stephen Tramer 2012-01-16

Reopening for parity with TIMOB-4690.

Opie Cyrus 2012-03-20

Test case:

   var win = Ti.UI.createWindow({backgroundColor:'blue'});
   
   var b1 = Ti.UI.createButton({
   	top:20,
   	width:140,
   	height:40,
   	title:'Swap tiling'
   });
   b1.addEventListener('click', function() {
   	Ti.API.info(sampleView.backgroundRepeat);
   	sampleView.backgroundRepeat = !sampleView.backgroundRepeat;
   });
   win.add(b1);
   
   var b2 = Ti.UI.createButton({
   	top:80,
   	width:140,
   	height:40,
   	title:'Change image'
   });
   b2.addEventListener('click', function() {
   	if (sampleView.backgroundImage == 'KS_nav_views.png') {
   		sampleView.backgroundImage = 'KS_nav_ui.png';
   	} else {
   		sampleView.backgroundImage = 'KS_nav_views.png';
   	}
   });
   win.add(b2);
   
   var resized = false;
   var b3 = Ti.UI.createButton({
   	top:140,
   	width:140,
   	height:40,
   	title:'Change size'
   });
   b3.addEventListener('click', function() {
   	if (resized) {
   		sampleView.width = 200;
   		sampleView.height = 200;
   	}
   	else {
   		sampleView.width = 80;
   		sampleView.height = 200;
   	}
   	resized = !resized;
   });
   win.add(b3);
   
   var sampleView = Ti.UI.createView({
   	bottom:20,
   	left: 20,
   	width:200,
   	height:200,
   	backgroundImage:'KS_nav_ui.png',
   	backgroundColor:'red',
   	backgroundRepeat:true
   });
   win.add(sampleView);
   
   win.open();

* change the image files used if need be to suit your own test app

Opie Cyrus 2012-03-20

PR https://github.com/appcelerator/titanium_mobile/pull/1769 opened
Rima Umbrasas 2012-08-15

Verified fixed with : Mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: Galaxy S III Android version 4.0.4 Ipad 5.1

JSON Source