[TIMOB-16223] Android: Add support selectedBackgroundGradient for ListView
| GitHub Issue | n/a |
|---|---|
| Type | New Feature |
| Priority | Medium |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | Release 3.2.1 |
| Fix Version/s | n/a |
| Components | Android |
| Labels | qe-3.2.1 |
| Reporter | Paras Mishra |
| Assignee | Ashraf Abu |
| Created | 2014-01-17T11:50:33.000+0000 |
| Updated | 2016-06-30T04:35:53.000+0000 |
Description
Android: List View selectedBackgroundGradient not working
It is reproducible on SDK: 3.2.0.GA, 3.1.3.GA as well
Steps to reproduce:
1. Run the app.
var _window = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var search = Titanium.UI.createSearchBar({
barColor:'#000',
showCancel:true,
height:43,
top:0,
});
search.addEventListener('cancel', function(){
search.blur();
});
search.addEventListener('change', function(e){
listView.searchText = e.value;
});
var listView = Ti.UI.createListView({headerView:search});
var listSection = Ti.UI.createListSection();
var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
var gradient = {
colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.5 }, { color: 'red', offset: 1.0 } ],
type: 'linear'
};
var gradient2 = {
colors: [ { color: 'purple', offset: 0.0}, { color: 'yellow', offset: 0.5 }, { color: 'purple', offset: 1.0 } ],
type: 'linear'
};
var data = [];
for (var i = 0; i < fruits.length; i++) {
data.push({
properties: {
title: fruits[i],
searchableText: fruits[i],
backgroundGradient: gradient,
selectedBackgroundGradient: gradient2
}
});
}
listSection.setItems(data);
listView.sections = [listSection];
_window.add(listView);
var view = Ti.UI.createView({
backgroundGradient: gradient,
width: 100,
height: 100,
bottom: 0,
left: 0
});
var view2 = Ti.UI.createView({
backgroundGradient: gradient2,
width: 100,
height: 100,
bottom: 0,
right: 0
});
_window.add(view);
_window.add(view2);
_window.open();
2. Click on any fruit item.
Expected:
Clicked item should turn into purple,yellow,purple background gradient color.
Actual:
Nothing happens
In the interim, a person can achieve the desired selectedBackgroundGradient functionality on Android as follows:
var _window = Ti.UI.createWindow({ backgroundColor: '#fff' }); var search = Titanium.UI.createSearchBar({ barColor:'#000', showCancel:true, height:43, top:0, }); var listView = Ti.UI.createListView({headerView:search}); var listSection = Ti.UI.createListSection(); var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate']; var gradient = { colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.5 }, { color: 'red', offset: 1.0 } ], type: 'linear' }; var gradient2 = { colors: [ { color: 'purple', offset: 0.0}, { color: 'yellow', offset: 0.5 }, { color: 'purple', offset: 1.0 } ], type: 'linear' }; var data = []; for (var i = 0; i < fruits.length; i++) { data.push({ properties: { title: fruits[i], searchableText: fruits[i], backgroundGradient: gradient, selectedBackgroundGradient: gradient2 } }); } var currentSelected = -1; var previousSelected = -1; listSection.setItems(data); listView.sections = [listSection]; listView.addEventListener('itemclick', function(e) { Ti.API.info('The '+e.type+' event happened at '+ e.itemIndex); if (currentSelected != e.itemIndex) { listSection.updateItemAt(e.itemIndex, { properties: { title: fruits[e.itemIndex], searchableText: fruits[e.itemIndex], backgroundGradient: gradient2 } } ) previousSelected = currentSelected; currentSelected = e.itemIndex; } if(previousSelected > -1) { listSection.updateItemAt(previousSelected, { properties: { title: fruits[previousSelected], searchableText: fruits[previousSelected], backgroundGradient: gradient } } ) } }); search.addEventListener('cancel', function() { search.blur(); }); search.addEventListener('change', function(e) { listView.searchText = e.value; listSection.updateItemAt(currentSelected, { properties: { title: fruits[currentSelected], searchableText: fruits[currentSelected], backgroundGradient: gradient } } ) currentSelected = -1; previousSelected = -1; }); _window.add(listView); var view = Ti.UI.createView({ backgroundGradient: gradient, width: 100, height: 100, bottom: 0, left: 0 }); var view2 = Ti.UI.createView({ backgroundGradient: gradient2, width: 100, height: 100, bottom: 0, right: 0 }); _window.add(view); _window.add(view2); _window.open();