Hi Guys Love the super work you've been doing on the ListView, its performance is a lot better then the tableview. I would like to convert over much of the work i've been doing to use the ListView, but the problem i'm hitting is doing swipe animations, and animating rows in general.
In the TableView, I had control over the row itself, so I could always animate the view or control directly, but since the ListView is data centric, the only way to interact with a control is by changing the ListItem. I've tried sliding a view, but updating the left position over an interval, but its not as smooth as using Ti.UI.animation.
One idea i've come up with is to 1) capture the swipe event on a row/listview 2) figure out the position of the actioned row relative to the ListView's top left coords 3) Overlay and invisible view over the top of the ListView 4) Position an FakeRow to mask over the row, and animate/manipulate that instead 5) Overlay blocks ListView scrolling 6) Upon complete editing the FakeRow, remove the overlay
The problem here is that I can't seem to get the rows position or coords. I've investigated the events like 'itemclick' and 'click' but the X and Y attributes are always relative to the click position within the row.
Is there anyway to get the underlying rows coords from any event? or is there a method I can directly interrogate the ListView?
Thanks!
Here is a code example
var win = Ti.UI.createWindow({backgroundColor: 'white'}); var listView = Ti.UI.createListView(); var sections = [];
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'}); var fruitDataSet = [ {properties: { title: 'Apple'}}, {properties: { title: 'Banana'}}, {properties: { title: 'Oranges'}}, {properties: { title: 'Carrots'}}, ];
fruitSection.setItems(fruitDataSet); sections.push(fruitSection);
//ListView swipe motion listView.addEventListener('swipe',function(e){
var overlay = Ti.UI.createView({
width:'100%',height:'100%'
});
// TODO: can I somehow glean the ListRow size and position
// so I can reposition this renderer over the top of the row?
var FakeRow = {
top:'110dp', //The relative position of the row from the window coords
width:'100%',
height:'45dp', //The height of the swiped row
backgroundColor:'red',
opacity:.6
}
var swipeRenderer = Ti.UI.createView(FakeRow);
swipeRenderer.add(Ti.UI.createLabel({text:'Oranges',left:'10dp'}));
overlay.add(swipeRenderer);
win.add(overlay);
swipeRenderer.animate(Ti.UI.createAnimation({
left:'-100dp',
duration:1000
},function(){
win.remove(overlay);
}
))
})
listView.sections = sections; win.add(listView);
win.open();
Application type: mobile Titanium SDK: 3.2.1.GA Platform & version: iOS 6.0, 7.0.6 , Android 4.1.2, Device: Iphone 5s/4s/5c, Android Samsung Galaxy s3 Host Operating System: OSX 10.9.1 Titanium Studio: 3.2.1.201402041146