Titanium Mobile-向左/向右滑动TableView单元格以显示后面的另一行

Question

I've been searching around on how to do this, but I've been unsuccessful.

What I'm trying to accomplish is this: I have a TableView with, say, 5 rows. I want to be able to swipe a row left to expose information "behind" the row. Not sure if this would be done by adding an additional row to the TableView and placing it behind, or what?

At the end of the day, what would be even cooler, would be to be able to swipe the row left OR right, and depending on which direction you swipe, the row behind gets populated with different information.

Any ideas?

Answer 1

From your description, it sounds like you want something similar to what Twitter does when you swipe across a Tweet.

First, make sure the rows in the table don't have vertical/horizontal layouts.

Then create the left and right swipe views you want for each row, like so:

var leftSwipeView = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
  backgroundColor: '#ff0000', //just to make the effect apparent
  visible: false
}
var rightSwipeView = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
  backgroundColor: '#00ff00', //just to make the effect apparent
  visible: false,
}
row.add(leftSwipeView);
row.add(rightSwipeView);

row.addEventListener('swipe', function(e) {
  if (e.direction == 'left'){
    leftSwipeView.setVisible(true);
    setTimeout(function(){leftSwipeView.setVisible(false);}, 2000);
  }
  if (e.direction == 'right'){
    rightSwipeView.setVisible(true);
    setTimeout(function(){rightSwipeView.setVisible(false);}, 2000);
  }
});

The snippet I have up there will hide the views again after 2 seconds. Hope that helps.

Answer 2

Found the perfect solution on Github. https://github.com/rborn/TiSwipeToReveal