Problem Description
Label property 'opacity' does not change for a label in a TableViewRow that is outside the screen on touch events. In other words, if a row is inside the screen, and has an event listener for 'touchstart' which changes the label property, it works, but scrolling down to rows outside the initial view doesn't.
Steps to reproduce
1. Use the following app to reproduce the issue (just start it on Android, touch the title of one of the visible rows - opacity changes - then scroll down and touch again - fail):
var win = Ti.UI.createWindow({
backgroundColor: 'black',
exitOnClose: true,
fullscreen: false,
title: 'TableView Demo'
});
function randomInt(max){
var num = Math.floor(Math.random() * max) + 1;
var string = "";
for (var i=0;i<num;i++) {
string+=i;
}
return string;
}
var IMG_BASE = 'https://github.com/appcelerator/titanium_mobile/raw/master/demos/KitchenSink/Resources/images/';
var defaultFontSize = Ti.Platform.name === 'android' ? 16 : 14;
var tableData = [];
for (var i=1; i<=100; i++){
var row = Ti.UI.createTableViewRow({
touchEnabled:false,
hasChild:false,
selectionStyle:Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
rowIndex:i
});
var imageAvatar = Ti.UI.createImageView({
image: IMG_BASE + 'custom_tableview/user.png',
left:10, top:5,
width:50, height:50
});
row.add(imageAvatar);
var vertView = Ti.UI.createView({
left:70,
layout:'vertical',
height:Ti.UI.SIZE
})
var labelUserName = Ti.UI.createLabel({
top:5,
color:'#576996',
font:{fontFamily:'Arial', fontSize:defaultFontSize+10, fontWeight:'bold'},
text:'Fred Smith ' + i
});
labelUserName.addEventListener('touchstart', function(e) {
Ti.API.info('touchstart='+JSON.stringify(e));
e.source.opacity = .5;
});
labelUserName.addEventListener('touchend', function(e) {
Ti.API.info('touchend='+JSON.stringify(e));
e.source.opacity = 1;
});
labelUserName.addEventListener('touchcancel', function(e) {
Ti.API.info('touchcancel='+JSON.stringify(e));
e.source.opacity = 1;
});
vertView.add(labelUserName);
var labelDetails = Ti.UI.createLabel({
top:5,
color:'#222',
font:{fontFamily:'Arial', fontSize:defaultFontSize+2, fontWeight:'normal'},
text:'Replied to post with id ' + randomInt(200) + '.'
});
vertView.add(labelDetails);
if (i%2===0) {
row.className = "twoLabels";
var labelDetails2 = Ti.UI.createLabel({
top:5,
color:'#222',
font:{fontFamily:'Arial', fontSize:defaultFontSize+2, fontWeight:'normal'},
text:'Replied to post with id ' + randomInt(200) + '.'
});
vertView.add(labelDetails2);
} else {
row.className = "oneLabel";
}
var imageCalendar = Ti.UI.createImageView({
top:5,
image:IMG_BASE + 'custom_tableview/eventsButton.png',
width:32, height: 32
});
vertView.add(imageCalendar);
var labelDate = Ti.UI.createLabel({
top:5,
color:'#999',
font:{fontFamily:'Arial', fontSize:defaultFontSize, fontWeight:'normal'},
text:'on ' + randomInt(30) + ' Nov 2012'
});
vertView.add(labelDate);
row.add(vertView);
tableData.push(row);
}
var tableView = Ti.UI.createTableView({
backgroundColor:'white',
data:tableData
});
win.add(tableView);
win.open();
Additional Notes
Removing the className from the rows solves the problem, but the app crashes after a few scrolling (memory issues). Using the same className for every row fails as well. I did not notice the problem if the TableView uses less memory (e.g. if you leave the table alone).
I verified that removing the className causes this example to work. This appears to be a duplicate of TIMOB-10238.
Appears to be a duplicate of TIMOB-10238
This bug has been marked as duplicate, but the fix for TIMOB-10238 doesn't seem to solve the problem here. I tested the v3.0.0.v20120924003312 SDK and I still see the same issue with the same code.
Does seem to be a dupe of 10328, please address
Pull request https://github.com/appcelerator/titanium_mobile/pull/3043
Here's a test case for old-style rows from TIMOB-6723: Ti.UI.setBackgroundColor('#000'); var win = Ti.UI.createWindow({ title:'Tableview with Filter', backgroundColor:'#fff' }); var data = []; for (var c=0;c<=20;c++) { data.push({title:"Row "+c}); } data[3].font = { fontSize: 50, fontWeight: 'bold'}; var tableview = Ti.UI.createTableView({ data:data, }); win.add(tableview); win.open();
Submitted pull request https://github.com/appcelerator/titanium_mobile/pull/3103 for docs change.
Working fine now.Environment used for verification - Titanium SDK:3.0.0.v20121024144610 Titanium Studio:3.0.0.201210220122