Twitter-like swipe on tableview

Ok, so I have been trying to do this various different ways for months now, and I think it's time I ask for help.

What I'm trying to do is set a tableview row to be "swipable" so that when you swipe it it displays a view underneath it with action buttons.


I've tried everything I can think of to do it, but for one reason or another it never works!

The biggest issue is that the content is dynamic, so I have no idea how tall the message is going to be. So for that reason (Using Titanium 2.0.2 and iOS 5) I have to use "Ti.UI.SIZE" for the height of the row.

I threw together a quick example of what I last tried, although this is only one of the probably dozen ways I've tried to hack it together (including counting characters and setting the height that way, which didn't work because 10 "W's" is a lot longer than 10 "i's") it does lead to some interesting questions that might help find the right direction.

Example: Creating a row_visible and row_hidden view and placing those in the row, and setting the swipe on those instead of the row itself.

//app.js
 
Titanium.UI.setBackgroundColor('#000');
 
var isSwiping = false;
 
function setSwipe(element, leftFunction, rightFunction){isSwiping = false;
    element.addEventListener('swipe', function(e) {
        if (isSwiping) { return; } //make sure it only fires once
        isSwiping = true;       
        if (e.direction === 'right') {
            rightFunction(e);
            isSwiping = false;
        } else if (e.direction === 'left') {
            leftFunction(e);
            isSwiping = false;
        }
    });
};
 
var win = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
 
var tableView = Titanium.UI.createTableView({
    top:0,
    height:Ti.Platform.displayCaps.platformHeight,
    width:Ti.Platform.displayCaps.platformWidth
});
 
var row_1 = Ti.UI.createTableViewRow({height:Ti.UI.SIZE,hasChild:false});
var row_1_label = Titanium.UI.createLabel({height:Ti.UI.SIZE, text:"This is the first rows content. Not sure how long this will be so I'm just filling it with content."});
 
var row_1_visible = Ti.UI.createView({backgroundColor:'#ddd',height:Ti.UI.SIZE,width:Ti.UI.FILL,layout:'vertical'});
var row_1_hidden = Ti.UI.createView({top:0,height:Ti.UI.FILL, width:Ti.UI.FILL,backgroundColor:'#ff0000'}); 
 
row_1_visible.add(row_1_label); //Add my text to the visible view
row_1.add(row_1_hidden); // Add this one first so it's below the visible view
row_1.add(row_1_visible);
 
setSwipe(row_1_visible, function(){
    row_1_visible.animate({opacity:0.0, duration:200}, function(){
        row_1_visible.hide();
    });
    Ti.API.info('Row Visible Swiped Left');
}, function(){
    row_1_visible.animate({opacity:0.0, duration:200}, function(){
        row_1_visible.hide();
    });
    Ti.API.info('Row Visible Swiped Right');
});
 
setSwipe(row_1_hidden, function(){
    row_1_visible.show();
    row_1_visible.animate({opacity:1.0, duration:200});
    Ti.API.info('Row Hidden Swiped Left');
}, function(){
    row_1_visible.show();
    row_1_visible.animate({opacity:1.0, duration:200});
    Ti.API.info('Row Hidden Swiped Right');
});
 
var data = [row_1];
tableView.setData(data);
 
win.add(tableView);
 
win.open();

What happens in the above example is first the row_1_hidden stretches the entire height of the app, which also makes the row stretch the entire height of the app. This tells me that Ti.UI.FILL takes precedence over the Ti.UI.SIZE and means its not bounded to any parent size (ie the height of the row because of the height of the label). That kind of makes sense, as the row has no fixed size so Ti.UI.FILL probably has no bounding area to fill other than the last one with a fixed height (The tableView) which it fills. That's unfortunate, but ok, I get it.

The next issue in the above example, is that when you swipe that row, the row_1_visible disappears (PERFECT). Unfortunately, as soon as you swipe the row_1_hidden it disappears and the row_1_visible appears. That would make sense and is what I wanted, but oddly... the row_1_hidden is gone for good (kind of...). It is technically still there as future swipe events on it still work, but the actual red background on it is gone! So it's no longer visible at all. Why would that be? If you take a look at that code above, at no point did I specify or say that row_1_hidden should go away! It should just go behind the now-visible row_1_visible, shouldn't it?

So I guess the main two questions are:

1. Where is row_1_hidden going when I swipe it to make row_1_visible appear again?
2. The big one... how do you make a view stretch to the height of its parent view... which has a dynamic height? Or is that not possible.

Sorry about the long-winded-ness of this post!

What about setting the "opening" view as a different row that animates it's height from 0 to whatever you need next below the row u just swiped to ? So a "floating" row that you insert after the swiped row.