'transparent' backgroundColor property for ListView Templates is showing a 'white' backgroundColor in the ListItems instead of a transparent one.
Setting a color it works as expected.
var win = Ti.UI.createWindow({
backgroundColor: 'yellow',
top:20
});
var plainTemplate = {
childTemplates: [
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
width: '50dp', height: '50dp', left: 0
}
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'title', // Maps to a custom title property of the item data
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
left: '60dp', top: 0,
},
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'subtitle', // Maps to a custom subtitle property of the item data
properties: { // Sets the label properties
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '60dp', top: '25dp',
}
}
],
properties: {
// These are the same as the list data item properties
// The list data item properties supersedes these if both are defined
backgroundColor: 'transparent', // this will set the backgroundColor to white.
// backgroundColor: 'green' // set the background to a color works
},
// Binds a callback to the click event, which catches events bubbled by the view subcomponents.
events: {click: toggleCheck }
};
// The following API calls are equivalent to using jQuery.extend(true, {}, oldObject)
// Copy the plainTemplate
var redTemplate = JSON.parse(JSON.stringify(plainTemplate));
// Change the text color to red
redTemplate.childTemplates[1].properties.color = 'red';
redTemplate.childTemplates[2].properties.color = 'red';
// Rebind the click event callback
redTemplate.events.click = toggleCheck;
var listView = Ti.UI.createListView({
// Maps plainTemplate to 'uncheck' and redTemplate to 'check'
templates: { 'uncheck': plainTemplate, 'check': redTemplate },
// Use 'uncheck', that is, the plainTemplate created earlier for all items
// Can be overridden by the item's template property
defaultItemTemplate: 'uncheck',
backgroundColor:'purple'
});
var tasks = [
{id: 'trash', name: 'Take Out the Trash', person: 'Yakko', icon: 'trash.png'},
{id: 'dishes', name: 'Do the Dishes', person: 'Wakko', icon: 'dishes.png'},
{id: 'doggie', name: 'Walk the Dog', person: 'Dot', icon: 'doggie.png'}
];
var data = [];
for (var i = 0; i < tasks.length; i++) {
data.push({
// Maps to the title component in the template
// Sets the text property of the Label component
title : { text: tasks[i].name },
// Maps to the subtitle component in the template
// Sets the text property of the Label component
subtitle : { text : tasks[i].person },
// Maps to the pic component in the template
// Sets the image property of the ImageView component
pic : { image : tasks[i].icon },
// Sets the regular list data properties
properties : {
itemId: tasks[i].id,
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
// backgroundColor:'transparent' //this works
}
});
}
var section = Ti.UI.createListSection();
section.setItems(data);
listView.sections = [section];
// Modified version of the itemclick
event listener
// Changes the item template rather than the list item's color property
function toggleCheck (e) {
var item = section.getItemAt(e.itemIndex);
if (item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {
item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK;
item.template = 'check';
}
else {
item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;
item.template = 'uncheck';
}
section.updateItemAt(e.itemIndex, item);
}
win.add(listView);
win.open();
I've been able to reproduce the issue also using a common titanium code. Moving to Timob and attaching sample code.
More clarity: I am successfully setting ListItem backgrounds to "transparent" dynamically on iOS7 on custom items, e.g.
but doing this in the template definition doesn't work. So there is a workaround....
Mark: yes, in particular with Alloy, in the app.tss you can use
and the rows should be transparent as expected. The problem, as you wrote, is when using the 'transparent' value in the property inside the template definition.
Federico - I just tried setting the style in app.tss, and it doesn't work (on iOS7 of course). Only works if I do it in the Javascript as above.
Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4721
Backport to 3_1_X https://github.com/appcelerator/titanium_mobile/pull/4722
Needs more fixes in master and for iOS6
New PR against master https://github.com/appcelerator/titanium_mobile/pull/4729
Tested the above Alloy sample originally provided from community and verified transparent color works with: Appcelerator Studio, build: 3.1.3.201309132456 Titanium SDK, build: 3.1.4.v20130926144546 Alloy 1.2.2 CLI 3.1.2 Device: iPhone 5s iOS7 iPhone 5c iOS7.0.2(11A501)
So far, I have seen it going white or not white 50% of the time. How is that possible? Sometimes I see it flickering for a very small moment. 3.1.4.v20131008163742