Titanium JIRA Archive
Appcelerator Community (AC)

[AC-1896] iOS: z-indexes of subsequently added views behave unpredictably when dynamically assigned

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionCannot Reproduce
Resolution Date2013-03-22T16:43:54.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsviews, z-index
ReporterKenneth Kan
AssigneeMostafizur Rahman
Created2013-03-21T14:58:30.000+0000
Updated2016-03-08T07:40:49.000+0000

Description

I have 5 views and set some arbitrary z-index on them as they're clicked. The ordering seems unpredictable but I think most of the time it's when the *second* view is clicked, the *third* view is supposed to show on top of the *fourth* view but instead the *fourth* view is on top of everything else, including the *second* view, which is supposed to be on top of all views.
var v0 = Ti.UI.createView({
	borderColor : 'green',
	backgroundColor : 'white',
	height : 200,
	top : 0
});

var v1 = Ti.UI.createView({
	borderColor : 'blue',
	backgroundColor : 'white',
	height : 200,
	top : 40
});

var v2 = Ti.UI.createView({
	borderColor : 'red',
	backgroundColor : 'white',
	height : 200,
	top : 80
});

var v3 = Ti.UI.createView({
	borderColor : 'purple',
	backgroundColor : 'white',
	height : 200,
	top : 120
});

var v4 = Ti.UI.createView({
	borderColor : 'teal',
	backgroundColor : 'white',
	height : 200,
	top : 160
});

var win = Ti.UI.createWindow({
	backgroundColor : 'black'
});

var views = [v0, v1, v2, v3, v4];

// Add label to show order
for (var i = 0; i < 5; i++) {
	var text = 'view ' + i + ' with z-index of null';
	var topLabel = Ti.UI.createLabel({
		text : text,
		top : 0,
		height : 20
	});
	var bottomLabel = Ti.UI.createLabel({
		text : text,
		bottom : 0,
		height : 20
	});
	views[i].add(topLabel);
	views[i].add(bottomLabel);
};

// Change order by z-index
changeOrder = function(view, zs) {
	for (var i = 0; i < 5; i++) {
		var text = 'view ' + i + ' with z-index of ' + zs[i];
		views[i].setZIndex(zs[i]);
		views[i].children[0].setText(text);
		views[i].children[1].setText(text);
	}
};

v0.addEventListener('click', function() {
	zs = [5, 4, 3, 0, 1];
	changeOrder(v0, zs);
});

v1.addEventListener('click', function() {
	zs = [1, 5, 4, 3, 0];
	changeOrder(v1, zs);
});

v2.addEventListener('click', function() {
	zs = [0, 1, 5, 4, 3];
	changeOrder(v2, zs);
});

v3.addEventListener('click', function() {
	zs = [3, 0, 1, 5, 4];
	changeOrder(v3, zs);
});

v4.addEventListener('click', function() {
	zs = [4, 3, 0, 1, 5];
	changeOrder(v4, zs);
});

win.add(v0);
win.add(v1);
win.add(v2);
win.add(v3);
win.add(v4);
win.open();

Comments

  1. Davide Cassenti 2013-03-22

    Hello, The index looks correct to me; when I click on v3 the order is (according to the code you posted): 3, 0, 1, 5, 4. In fact, I can see view 0 covering view 1 and view 2, but covered by view 3 and view 4. In particular, view 3 is over view 4 because its z-index is higher. Am I missing something?
  2. Kenneth Kan 2013-03-22

    Hi Davide, My bad. It's actually I who missed something. I realized that it might be the version of Ti SDK and it was. I was actually using Titanium SDK 3.1.0 and Titanium CLI 3.0.22, the latter of which I thought was the SDK version. I'm happy now as I'm using SDK 3.0.3. Is this still a valid bug for 3.1.0? Or is that version irrelevant now? Thanks.
  3. Mostafizur Rahman 2014-01-08

    Hello, I tested this issue with the test code reporter has provided. I can't reproduce this issue in Ti SDK 3.2GA. Can you please retest your app with the latest TISDK. Please update ticket if you reproduce it.

    Test Environments

    Mac OS X 10.8.6 Ti SDK 3.2.0.GA Ti CLI 3.2.0 IOS simulator 7.0.3 Thanks

JSON Source